/* Mobile detail/edit surfaces; no business logic or desktop overrides. */
@media (max-width: 767px) {
  .admin-app .tickets { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .admin-app .ticket { padding: 16px; }
  .admin-app .toolbar .segmented { gap: 4px; }
  .admin-app .toolbar .segmented > button { flex: 1 1 25%; }
  .admin-app .callout { flex-wrap: wrap; }
  .admin-app .callout > div { min-width: 0; flex: 1 1 180px; }
  .admin-app .callout-action { margin-left: auto; }
  .admin-app .dialog.variant-drawer,
  .admin-app .dialog[data-key="product"],
  .admin-app .dialog[data-key="appearance-preview-expanded"] {
    position: fixed; inset: var(--staff-visible-top, 0px) 0 auto; margin: 0;
    width: 100%; height: var(--staff-visible-height, 100dvh); max-height: var(--staff-visible-height, 100dvh);
    border: 0; border-radius: 0;
  }
  .admin-app .dialog { max-height: min(calc(var(--staff-visible-height, 100dvh) - 16px), 100dvh); }
  .admin-app .dialog-head { padding: max(8px, env(safe-area-inset-top)) 16px 8px; gap: 8px; flex: none; }
  .admin-app .dialog-head h2 { font-size: 1.125rem; line-height: 1.4; }
  .admin-app .dialog-head .close { flex: none; width: 44px; height: 44px; }
  .admin-app .dialog-body { padding: 16px; scroll-padding-block: 16px 96px; }
  .admin-app .dialog .form-grid,
  .admin-app .modifier-editor-fields,
  .admin-app .modifier-option-fields,
  .admin-app .modifier-option-fields:has([data-quantity-field]:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  .admin-app .dialog :is(.button, .text-button, .icon-button) { min-height: 44px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .admin-app .dialog .icon-button { min-width: 44px; }
  .admin-app .dialog :is(input, select, textarea) { scroll-margin-block: 80px; }
  .admin-app .dialog-foot { background: var(--paper-50); }
  .admin-app .dialog[data-key="product"]:has(#product-form) .dialog-body { overflow: hidden; padding-bottom: 0; }
  .admin-app #product-form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .admin-app #product-form > fieldset { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 24px; scroll-padding-bottom: 24px; }
  .admin-app #product-form > .dialog-foot { flex: none; margin-top: auto; }
  .admin-app #product-form .form-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px; }
  .mobile-order-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: none; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line-200); background: var(--paper-50); }
  .mobile-order-actions > button { flex: 1 1 100%; min-height: 48px; }
  .admin-app .status-actions { gap: 8px; }
  .admin-app .appearance-layout { display: flex; flex-direction: column; gap: 16px; }
  .admin-app .appearance-controls { width: 100%; padding-inline: 16px; }
  .admin-app .appearance-preview { order: -1; width: 100%; padding: 16px; border: 1px solid var(--line-200); border-radius: var(--radius); background: var(--paper-50); }
  .mobile-preview-toggle { display: inline-flex; justify-self: start; min-height: 44px; white-space: normal; }
  .appearance-preview:not(.mobile-preview-open) .appearance-preview-content { display: none; }
  .admin-app .appearance-save-row { position: fixed; z-index: 27; bottom: var(--mobile-bottom); left: 0; right: 0; padding: 12px 16px; background: var(--paper-50); border-top: 1px solid var(--line-200); display: flex; gap: 8px; }
  .admin-app .appearance-save-row > button { flex: 1 1 0; min-height: 44px; }
  .admin-app .content:has(.appearance-save-row) { padding-bottom: calc(var(--mobile-bottom) + 120px); }
  .admin-app:has(dialog[open]) .appearance-save-row, .mobile-keyboard .appearance-save-row { visibility: hidden; }
  .admin-app .appearance-controls .appearance-actions { padding-bottom: 24px; }
  .admin-app .appearance-branding-grid { grid-template-columns: minmax(0, 1fr); }
  .admin-app .appearance-preview .appearance-phone { max-width: 100%; }
  .admin-app .counter-line-controls .icon-button { min-width: 44px; width: 44px; }
  .admin-app .counter-line { grid-template-columns: minmax(0, 1fr); }
  .admin-app .counter-line-controls { justify-self: end; }
  .admin-app .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .admin-app .products-table .actions { flex-wrap: wrap; }
  .admin-app .data-table { max-width: 100%; }
  .admin-app .data-table :is(td, th) { overflow-wrap: anywhere; }
}