/* Merchant shell. Desktop keeps the existing layout and controls. */
.mobile-nav, .mobile-store-name, .mobile-sound-label, .workspace-tools > summary { display: none; }
.workspace-tools { display: contents; }
.workspace-tools-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.appearance-preview-content { display: grid; gap: .75rem; min-width: 0; }
.mobile-preview-toggle { display: none; }

@media (max-width: 767px) {
  .admin-app {
    --mobile-space: 16px;
    --mobile-nav-height: 68px;
    --mobile-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    --mobile-surface: var(--paper-50);
    --mobile-text: var(--ink-900);
    --mobile-muted: var(--ink-600);
    --mobile-line: var(--line-200);
    --mobile-active: var(--brand-700);
    --mobile-active-bg: var(--brand-50);
    background: var(--paper-100);
  }
  [data-theme="dark"] .admin-app, .admin-app[data-theme="dark"] {
    --paper-50: #211e1b; --paper-100: #191715; --paper-200: #302a25;
    --ink-900: #f5eee7; --ink-700: #ded2c7; --ink-600: #baafa5;
    --line-200: #484039; --line-300: #62584e;
    --brand-700: #ffb1a6; --brand-600: #ba4940; --brand-50: #3c2521;
  }
  :is([data-theme="dark"] .admin-app, .admin-app[data-theme="dark"]) :is(.button:not(.primary, .solid), button.secondary, button.danger:not(.solid), .chip) { --btn-bg: var(--paper-50); background-color: var(--paper-50); }
  :is([data-theme="dark"] .admin-app, .admin-app[data-theme="dark"]) :is(.button.primary, button.primary, .button.danger.solid, button.danger.solid) { background-color: var(--btn-bg); }
  :is([data-theme="dark"] .admin-app, .admin-app[data-theme="dark"]) :is(.button.primary, button.primary):hover { background-color: #973d35; border-color: #973d35; }
  :is([data-theme="dark"] .admin-app, .admin-app[data-theme="dark"]) :is(.chip[aria-pressed="true"], .chip[aria-current="true"], .segmented > button[aria-pressed="true"], .segmented > label:has(input:checked)) { background: var(--paper-200); color: var(--ink-900); border-color: var(--line-300); }
  :is([data-theme="dark"] .admin-app, .admin-app[data-theme="dark"]) :is(input:not([type=checkbox], [type=radio], [type=range]), select, textarea) { background-color: var(--paper-50); color: var(--ink-900); }
  :is([data-theme="dark"] .admin-app, .admin-app[data-theme="dark"]) :is(.dialog-head, .lang-switch, .state-block, .card, .table-wrap, .print-list li, .stepper, .icon-button.outlined, .image-choice, .image-choice-current, .upload-box) { background-color: var(--paper-50); }
  :is([data-theme="dark"] .admin-app, .admin-app[data-theme="dark"]) :is(.lang-switch button[aria-pressed="true"], .icon-button[aria-pressed="true"]) { background-color: var(--paper-200); color: var(--ink-900); }
  :is([data-theme="dark"] .admin-app, .admin-app[data-theme="dark"]) .conn { color: #e7bf75; }
  :is([data-theme="dark"] .admin-app, .admin-app[data-theme="dark"]) .conn:is(.tone-green, .tone-success) { color: #98dbc5; }
  .admin-app .topbar {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 8px; padding: max(12px, env(safe-area-inset-top)) var(--mobile-space) 12px;
    background: var(--mobile-surface);
  }
  .admin-app .topbar > .menu-toggle { display: none; }
  .mobile-store-name { display: block; grid-area: 1 / 1; min-width: 0; overflow-wrap: anywhere; font-size: 1rem; line-height: 1.4; font-weight: 600; }
  .admin-app .topbar .conn {
    grid-area: 2 / 1 / 3 / -1; width: auto; max-width: 100%; min-height: 24px;
    justify-self: start; justify-content: start; padding: 0; gap: 6px;
    border: 0; border-radius: 0; background: transparent; font-size: .8125rem;
  }
  .admin-app .conn .conn-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .admin-app .topbar-end { grid-area: 1 / 2; margin: 0; gap: 4px; flex-wrap: nowrap; }
  .workspace-tools { position: relative; display: block; }
  .workspace-tools > summary { display: grid; width: 44px; height: 44px; list-style: none; cursor: pointer; }
  .workspace-tools > summary::-webkit-details-marker { display: none; }
  .workspace-tools > summary:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
  .workspace-tools[open] > summary { background: var(--mobile-active-bg); color: var(--mobile-active); }
  .workspace-tools-panel {
    position: absolute; z-index: 40; right: 0; top: calc(100% + 8px);
    display: grid; gap: 12px; width: min(20rem, calc(100vw - 32px));
    max-height: calc(var(--staff-visible-height, 100dvh) - 120px); overflow-y: auto;
    padding: var(--mobile-space); border: 1px solid var(--mobile-line); border-radius: var(--radius);
    background: var(--mobile-surface); box-shadow: var(--shadow-2); color: var(--mobile-text);
  }
  .workspace-tools-panel [data-sound] { display: flex; gap: 12px; width: 100%; height: auto; min-height: 44px; text-align: left; justify-content: start; padding: 8px; }
  .mobile-sound-label { display: inline; font-size: .875rem; }
  .workspace-tools-panel .lang-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-app .workspace-tools-panel .customer-link { display: inline-flex; justify-content: start; }
  .admin-app .content { padding: var(--mobile-space) var(--mobile-space) calc(var(--mobile-bottom) + 24px); }
  .mobile-nav {
    position: fixed; z-index: 28; bottom: 0; left: 0; right: 0;
    display: flex; gap: 4px; min-height: var(--mobile-bottom); padding: 4px 8px max(4px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--mobile-line); background: var(--mobile-surface); color: var(--mobile-muted);
  }
  .mobile-nav > :is(a, button) {
    position: relative; display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center;
    min-width: 44px; min-height: 60px; gap: 4px; padding: 4px; border: 0; border-radius: var(--radius);
    background: transparent; color: inherit; text-decoration: none; font-size: .8125rem; font-weight: 500; line-height: 1.3; text-align: center; overflow-wrap: anywhere;
  }
  .mobile-nav > [aria-current="page"] { color: var(--mobile-active); background: var(--mobile-active-bg); font-weight: 600; }
  .mobile-nav > :is(a, button):focus-visible { outline: 2px solid var(--brand-600); outline-offset: -2px; }
  .mobile-nav > :is(a, button):active { background: var(--paper-200); }
  .mobile-nav .nav-count { position: absolute; top: 2px; left: 55%; max-width: 40px; font-size: .6875rem; }
  .mobile-keyboard .mobile-nav { display: none; }
  .admin-app:has(dialog[open]) .mobile-nav { visibility: hidden; }
  .admin-app .sidebar { padding-block: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-bottom)); background: var(--mobile-surface); }
  html:has(.admin-shell.nav-open) { overflow: hidden; }
  .admin-app .toast { bottom: calc(var(--mobile-bottom) + 12px); }
  .admin-app .page-head { align-items: start; gap: 16px; }
  .admin-app .page-head .head-actions { width: 100%; gap: 8px; }
  .admin-app .page-head .head-actions > .button { flex: 1 1 0; }
  .admin-app .page-head h1 { font-size: 1.5rem; }
  .admin-app .page-head p { font-size: .875rem; line-height: 1.6; }
  .admin-app :is(.ticket, .metric, .settings-card, .data-table tbody tr) { background-color: var(--mobile-surface); }
  .admin-app :is(button, .button, summary) { touch-action: manipulation; }
}