/* Shared display palette: loaded after the existing app styles. */
.mobile-seat-row { display:contents; }
.seat-sort-toggle { display:none; }
.employee-menu-settings-status { margin:0; padding:6px; color:#9a342d; font-size:.72rem; }
.employee-menu-close { display:grid; place-items:center; width:32px; height:32px; padding:0; border:1px solid #cbd8d2; border-radius:9px; background:#fff; color:#16372d; font-size:1.3rem; line-height:1; }
html body.state-account.state-staff[data-active-view="service"] .employee-menu-summary { grid-template-columns:38px minmax(0,1fr) 32px !important; }
.employee-menu-summary > span:nth-child(2) { display:grid; min-width:0; }
.theme-display-mode-toggle { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; margin-top:10px; padding:9px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--text); font-weight:800; }
.theme-display-mode-toggle[aria-pressed="true"] { border-color:var(--theme-accent); background:var(--theme-accent-soft); }
body:not(.state-staff) .theme-display-mode-toggle { display:none; }
html body.state-account.state-staff[data-active-view="service"] .topbar.mobile-menu-open .header-actions { font-size:.85rem; }
html body.state-account.state-staff[data-active-view="service"] .topbar.mobile-menu-open .service-notification-setting { min-height:40px; }
html body.state-account.state-staff[data-active-view="service"] .topbar.mobile-menu-open .theme-picker-panel { position:static; width:100%; margin-top:5px; }

/* T1 … Tn + employee on row one; the seats use all of row two. */
html body.state-account.state-staff[data-active-view="service"] .topbar {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 44px !important;
  grid-template-rows:46px 46px !important;
  gap:0 6px !important;
  height:96px !important;
  min-height:96px !important;
  padding:2px 7px !important;
}
html body.state-account.state-staff[data-active-view="service"] .brand-block { display:none !important; }
html body.state-account.state-staff[data-active-view="service"] .mobile-service-controls { display:contents !important; }
html body.state-account.state-staff[data-active-view="service"] .service-table-strip { grid-column:1; grid-row:1; width:100%; }
html body.state-account.state-staff[data-active-view="service"] .mobile-menu-toggle { grid-column:2 !important; grid-row:1 !important; align-self:center !important; justify-self:end; }
html body.state-account.state-staff[data-active-view="service"] .mobile-seat-row {
  display:grid;
  grid-column:1 / -1;
  grid-row:2;
  grid-template-columns:minmax(0,1fr) 42px;
  align-items:center;
  gap:4px;
  width:100%;
  min-width:0;
}
html body.state-account.state-staff[data-active-view="service"] .mobile-seat-strip {
  width:100% !important;
  min-width:0;
  height:46px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  overscroll-behavior-x:contain;
  touch-action:pan-x;
  scrollbar-width:thin !important;
  scrollbar-color:#6b9182 transparent;
}
html body.state-account.state-staff[data-active-view="service"] .mobile-seat-strip::-webkit-scrollbar { display:block; height:3px; }
html body.state-account.state-staff[data-active-view="service"] .mobile-seat-strip::-webkit-scrollbar-thumb { border-radius:3px; background:#6b9182; }
html body.state-account.state-staff[data-active-view="service"] .mobile-seat-button { flex:0 0 42px !important; min-width:42px; width:42px !important; height:38px !important; }
html body.state-account.state-staff[data-active-view="service"] .mobile-seat-button.selected { height:42px !important; transform:none !important; }
html body.state-account.state-staff[data-active-view="service"] .service-table-switch,
html body.state-account.state-staff[data-active-view="service"] .service-table-select { flex:0 0 42px; width:42px; min-width:42px; }
html body.state-account.state-staff[data-active-view="service"] .service-table-select { position:relative; padding:3px; }
html body.state-account.state-staff[data-active-view="service"] .service-table-select:has(.service-table-channel,.service-table-complete,.service-table-progress) > strong { transform:translateY(-5px); font-size:.76rem; }
html body.state-account.state-staff[data-active-view="service"] .service-table-channel { position:absolute; bottom:2px; font-size:.48rem; line-height:1; }
html body.state-account.state-staff[data-active-view="service"] .service-table-channel.food { left:3px; }
html body.state-account.state-staff[data-active-view="service"] .service-table-channel.drinks,
html body.state-account.state-staff[data-active-view="service"] .service-table-channel.travelling { right:3px; }
html body.state-account.state-staff[data-active-view="service"] .service-table-complete { position:absolute; top:2px; right:2px; width:11px; height:11px; }
html body.state-account.state-staff[data-active-view="service"] .service-table-progress { position:absolute; right:4px; bottom:4px; }
html body.state-account.state-staff[data-active-view="service"] .seat-sort-toggle { display:grid; place-items:center; width:42px; height:42px; padding:0; border:1px solid #759889; border-radius:10px; background:#173d32; color:#fff; font-size:1.25rem; }
html body.state-account.state-staff[data-active-view="service"] .seat-sort-toggle.active { border-color:#5bd4b3; background:#c5f2e3; color:#083e2e; }
html body.state-account.state-staff[data-active-view="service"] .service-mobile-section-tabs button { gap:2px; padding-inline:2px; font-size:.72rem; }
html body.state-account.state-staff[data-active-view="service"] .service-mobile-section-tabs button b { flex:none; min-width:18px; height:18px; color:#173b30; }
@media (max-width:350px) {
  html body.state-account.state-staff[data-active-view="service"] .service-mobile-section-tabs button { font-size:.65rem; }
}
html body.state-account.state-staff[data-active-view="service"] .service-mobile-section-tabs { top:96px !important; }
html body.state-account.state-staff[data-active-view="service"] .app-shell { inset:96px 0 0 !important; height:calc(100dvh - 96px) !important; }
html body.state-account.state-staff[data-active-view="service"] .topbar.mobile-menu-open .header-actions { top:98px !important; max-height:calc(100dvh - 104px); }
html body.state-account .seat-target-hint { padding:8px 10px !important; margin:5px 0 !important; border:1px solid #b7c8c0 !important; border-radius:9px; background:#edf3ef !important; color:#214438 !important; font-size:.8rem; font-weight:800; opacity:1 !important; }

html[data-display-mode="dark"] {
  color-scheme:dark;
  --bg:#101815;
  --surface:#1b2823;
  --surface-strong:#23342c;
  --text:#edf6f1;
  --ink:#edf6f1;
  --muted:#b4c7bc;
  --line:#43564b;
  --ink-soft:#263a30;
  --danger:#ff9b90;
  --danger-soft:#4c2726;
  --ok:#8adeac;
  --ok-soft:#244230;
  --warn:#ffd180;
  --warn-soft:#453a22;
  --theme-accent-soft:color-mix(in srgb,var(--theme-accent) 18%,#1b2823) !important;
  --shadow:0 16px 40px rgba(0,0,0,.3);
}
html[data-display-mode="dark"] body { background:var(--bg) !important; color:var(--text) !important; }
html[data-display-mode="dark"] body::before { background:var(--bg) !important; }
html[data-display-mode="dark"] body :is(#serviceView.active,#managerView.active,#kitchenView.active,#barView.active,#takeawayView.active,#dashboardView.active,.app-shell) { background:var(--bg) !important; color:var(--text) !important; }
html[data-display-mode="dark"] body :is(.workspace,.view,.order-panel,.cart,.service-product-list,.service-products-accordion-content,.service-order-history-content,.mobile-cart-content,.billing-groups,.billing-lines,.table-orders-groups) { background:var(--bg) !important; color:var(--text) !important; }
html[data-display-mode="dark"] body :is(.panel,.locked-panel,.login-panel,.restaurant-admin,.staff-manager,.menu-manager,.takeaway-manager,.reservation-mailbox,.modifier-dialog,.billing-dialog,.payment-dialog,.service-action-menu,.service-pickup-dialog,.my-tables-dialog,.table-orders-dialog,.service-search-keyboard,.service-search-keyboard-dialog,.service-quick-card,.order-header,.header-actions,.theme-picker-panel) { background:var(--surface) !important; color:var(--text) !important; border-color:var(--line) !important; }
html[data-display-mode="dark"] body :is(.service-product-row,.service-product-tools,.service-order-history-line,.mobile-cart-line,.cart-line,.billing-line,.billing-group,.table-orders-group,.table-orders-item,.service-pickup-line,.my-table-row,.ticket,.staff-card,.product-button,.summary-tile,.reservation-row,.reservation-mail-row,.pass-tag-row,.dashboard-card,.dashboard-kpi,.dashboard-queue-row,.dashboard-staff-row,.dashboard-station-card,.floor-status-legend,.seat-choice,.employee-menu-tables,.service-notification-setting,.service-connection-setting) { background:var(--surface) !important; color:var(--text) !important; border-color:var(--line) !important; }
html[data-display-mode="dark"] body :is(.employee-menu-summary,.theme-picker-toggle,.theme-picker-heading,.billing-group>header,.table-orders-group>header,.table-orders-seat-summary,.service-order-history-heading,.service-accordion-header,.dashboard-service-summary>div,.reservation-form,.service-quick-card-tip,.pin-keypad button,.service-action-list>button) { background:var(--surface-strong) !important; color:var(--text) !important; border-color:var(--line) !important; }
html[data-display-mode="dark"] body :is(input,select,textarea) { background:var(--surface-strong) !important; color:var(--text) !important; border-color:var(--line) !important; }
html[data-display-mode="dark"] body :is(input,textarea)::placeholder { color:var(--muted) !important; opacity:1; }
html[data-display-mode="dark"] body :is(.meta,.staff-role,.eyebrow,.employee-menu-label,.service-quick-modifier-group>span,.service-quick-course-note label>span,.billing-price-field span,.billing-grand-total span,.table-orders-split label) { color:var(--muted) !important; }
html[data-display-mode="dark"] body :is(.employee-menu-summary,.service-notification-setting,.service-connection-setting,.my-table-row,.service-pickup-line,.ticket,.billing-line,.table-orders-group) small { color:var(--muted) !important; }
html[data-display-mode="dark"] body :is(.secondary-action,.room-tab,.theme-preset,.employee-menu-tables button,.employee-menu-close,.service-product-expand,.mobile-cart-expand,.service-editable-order-actions .edit,.service-search-key,.service-keyboard-key,.service-product-kind button,.seat-state) { background:var(--surface-strong) !important; color:var(--text) !important; border-color:var(--line) !important; }
html[data-display-mode="dark"] body :is(.primary-action,.service-product-add,.service-product-send) { background:var(--theme-accent) !important; color:var(--theme-on-accent) !important; }
html[data-display-mode="dark"] body :is(.service-product-price,.cart-line-total,.billing-line-total,.billing-grand-total strong,.table-orders-total strong,.service-product-name) { color:var(--text) !important; }
html[data-display-mode="dark"] body :is(.service-quick-modifiers,.cart-line-modifiers,.service-wave-complete,.billing-grand-total,.table-orders-split,.seat-selection-banner,.service-product-kind button.active,.theme-preset.active,.employee-menu-tables button.active) { background:var(--theme-accent-soft) !important; color:var(--text) !important; border-color:var(--theme-accent) !important; }
html[data-display-mode="dark"] body .service-quick-chip { background:#294735 !important; color:#ddf8e7 !important; border-color:#4d705b !important; }
html[data-display-mode="dark"] body .service-quick-chip.available { background:var(--surface-strong) !important; color:var(--text) !important; }
html[data-display-mode="dark"] body .service-quick-chip.extra { background:#23553f !important; color:#c8fbe2 !important; border-color:#61c69b !important; }
html[data-display-mode="dark"] body .service-quick-chip.removed { background:#512c29 !important; color:#ffb5a9 !important; border-color:#bd756a !important; }
html[data-display-mode="dark"] body :is(.mobile-cart-drawer,.service-mobile-section-tabs,.service-mobile-section-tabs button,.mobile-cart-summary) { background:var(--surface) !important; color:var(--text) !important; border-color:var(--line) !important; }
html[data-display-mode="dark"] body .service-mobile-section-tabs button.active { background:color-mix(in srgb,var(--guest,#66b9ee) 26%,var(--surface)) !important; color:var(--text) !important; border-color:var(--guest,#66b9ee) !important; box-shadow:inset 0 -3px 0 var(--guest,#66b9ee) !important; }
html[data-display-mode="dark"] body .mobile-cart-summary { background:color-mix(in srgb,var(--guest,#66b9ee) 26%,var(--surface)) !important; }
html[data-display-mode="dark"] body .mobile-cart-line { border-left-color:var(--guest,#66b9ee) !important; }
html[data-display-mode="dark"] body :is(.mobile-cart-quantity,.mobile-cart-guest) { color:#10211d !important; }
html[data-display-mode="dark"] body.state-account #productGrid .seat-target-hint { background:#263c32 !important; color:#e2f4e8 !important; border-color:#789d87 !important; }
html[data-display-mode="dark"] body :is(.danger-action,.employee-menu-logout,.mobile-cart-remove,.service-editable-order-actions .danger) { background:var(--danger-soft) !important; color:var(--danger) !important; border-color:#93564e !important; }
html[data-display-mode="dark"] body .employee-menu-settings-status { color:var(--danger) !important; }
html[data-display-mode="dark"] body .floor-plan { background:var(--surface-strong) !important; border-color:var(--line) !important; }
html[data-display-mode="dark"] body .table-surface { background:var(--surface) !important; color:var(--text) !important; }
html[data-display-mode="dark"] body .table-node.occupied .table-surface { background:#4b2c28 !important; }
html[data-display-mode="dark"] body :is(.dialog-backdrop,.service-pickup-overlay,.my-tables-overlay) { background:rgba(0,0,0,.68) !important; }
html[data-display-mode="dark"] body .service-notification-setting .setting-icon { background:var(--surface-strong); }
html[data-display-mode="dark"] body :is(.theme-picker-toggle-label,.service-product-tools strong,.service-product-row strong) { color:inherit !important; }
/* These service surfaces formerly carried high-specificity fixed light colors. */
html[data-display-mode="dark"] body.state-account.state-staff #serviceView .order-panel { background:var(--bg) !important; color:var(--text) !important; }
html[data-display-mode="dark"] body.state-account.state-staff #serviceView :is(.service-product-tools,.service-product-row,.service-quick-modifiers,.mobile-cart-drawer,.service-order-history,.service-product-toolbar) { background:var(--surface) !important; color:var(--text) !important; border-color:var(--line) !important; }
html[data-display-mode="dark"] body.state-account.state-staff #serviceView :is(.service-quick-modifier-group>span,.service-quick-course-note label>span) { color:var(--muted) !important; }
html[data-display-mode="dark"] body.state-account.state-staff #serviceView .service-product-customize:disabled { opacity:1 !important; color:var(--text) !important; }
html[data-display-mode="dark"] body.state-account.state-staff #serviceView .service-mobile-section-tabs button { background:var(--surface) !important; color:var(--text) !important; border-color:var(--line) !important; }
html[data-display-mode="dark"] body.state-account.state-staff #serviceView .service-mobile-section-tabs button.active { background:color-mix(in srgb,var(--guest,#66b9ee) 26%,var(--surface)) !important; border-color:var(--guest,#66b9ee) !important; }
html[data-display-mode="dark"] body.state-account.state-staff #serviceView .service-mobile-section-tabs button b { background:#456457 !important; color:#fff !important; }
html[data-display-mode="dark"] body.state-account.state-staff #serviceView .service-mobile-section-tabs button.active b { background:var(--guest,#66b9ee) !important; color:#10211d !important; }

/* The owner and production views also contain legacy fixed-light surfaces. */
html[data-display-mode="dark"] body.state-account.state-staff :is(.dashboard-heading,.dashboard-room-tab,.dashboard-mini-floor,.dashboard-table-tile,.admin-action-card,.language-settings,.menu-category-panel,.menu-search-label,.menu-product-row,.menu-product-card,.production-board-summary,.kitchen-language-settings-panel) { background:var(--surface) !important; color:var(--text) !important; border-color:var(--line) !important; }
html[data-display-mode="dark"] body.state-account.state-staff :is(.production-board-summary>span,.kitchen-language-settings-toggle,.dashboard-staff-row>span) { background:var(--surface-strong) !important; color:var(--text) !important; border-color:var(--line) !important; }
html[data-display-mode="dark"] body.state-account.state-staff :is(.dashboard-heading p,.dashboard-kpi span,.dashboard-kpi small,.dashboard-room-tab span,.dashboard-utilization-gauge span,.dashboard-table-tile small,.dashboard-table-tile time,.dashboard-queue-row small,.dashboard-service-summary span,.dashboard-empty,.dashboard-staff-row small,.dashboard-queue-empty,.production-board-summary small,.language-settings>div span,.menu-product-name small,.menu-product-station,#menuCategoryNav small,.admin-action-card small) { color:var(--muted) !important; }
html[data-display-mode="dark"] body.state-account.state-staff :is(.dashboard-heading-actions time,.dashboard-card .text-action,.dashboard-queue-row>b,.menu-family summary,#menuCategoryNav button,.menu-product-chevron,.admin-action-card strong) { color:var(--text) !important; }
html[data-display-mode="dark"] body.state-account.state-staff .dashboard-utilization-gauge { background:radial-gradient(circle at center,var(--surface) 0 56%,transparent 57%),conic-gradient(var(--theme-accent) calc(var(--dashboard-value) * 1%),var(--line) 0) !important; }
html[data-display-mode="dark"] body.state-account.state-staff :is(.dashboard-room-tab.active,#menuCategoryNav button.active,.kitchen-language-settings-toggle.active) { background:var(--theme-accent-soft) !important; color:var(--text) !important; border-color:var(--theme-accent) !important; }
/* Keep operational status recognizable without pale tiles or dark text. */
html[data-display-mode="dark"] body.state-account.state-staff .dashboard-table-tile.flow-occupied { border-color:#e1786e !important; background:#462b27 !important; }
html[data-display-mode="dark"] body.state-account.state-staff .dashboard-table-tile.flow-ordered { border-color:#5d9bd7 !important; background:#243951 !important; }
html[data-display-mode="dark"] body.state-account.state-staff .dashboard-table-tile.flow-ready { border-color:#e6b13d !important; background:#443a21 !important; }
html[data-display-mode="dark"] body.state-account.state-staff .dashboard-table-tile.flow-picked_up { border-color:#8e77d4 !important; background:#352d47 !important; }
html[data-display-mode="dark"] body.state-account.state-staff .dashboard-table-tile.flow-delivered { border-color:#59b98c !important; background:#254332 !important; }
html[data-display-mode="dark"] body.state-account.state-staff .dashboard-queue-age.warning { color:var(--warn) !important; }
html[data-display-mode="dark"] body.state-account.state-staff .dashboard-queue-age.critical { color:var(--danger) !important; }
html[data-display-mode="dark"] body.state-account.state-staff .production-table { background:var(--surface) !important; color:var(--text) !important; border-color:var(--line) !important; }
html[data-display-mode="dark"] body.state-account.state-staff .production-table-header { background:var(--surface-strong) !important; border-color:var(--line) !important; }
html[data-display-mode="dark"] body.state-account.state-staff :is(.production-empty,.production-column-headings,.production-meta,.production-table-header span,.production-status-control>span,.production-remarks>span) { color:var(--muted) !important; }
html[data-display-mode="dark"] body.state-account.state-staff .production-meta>strong { color:var(--text) !important; }
html[data-display-mode="dark"] body.state-account.state-staff :is(.production-column-headings .added,.production-adjustment.added>span:not(.empty)) { color:#a4ebc7 !important; }
html[data-display-mode="dark"] body.state-account.state-staff .production-adjustment.added>span:not(.empty) { background:#244735 !important; }
html[data-display-mode="dark"] body.state-account.state-staff :is(.production-column-headings .removed,.production-adjustment.removed>span:not(.empty)) { color:var(--danger) !important; }
html[data-display-mode="dark"] body.state-account.state-staff .production-adjustment.removed>span:not(.empty) { background:var(--danger-soft) !important; }
html[data-display-mode="dark"] body.state-account.state-staff .dashboard-card .text-action { padding:5px 7px; border:1px solid var(--line); border-radius:7px; background:var(--surface-strong) !important; }