/* Zaki venue dashboard: canonical product UI system. */
/* RESPONSIVE BREAKPOINT SCALES (audited 2026-08-05, see docs/superpowers/plans/2026-08-05-staff-dashboard-responsive.md)
   Adaptive layout, not separate per-device UI -- the nav below already reflows
   the same markup rather than swapping templates; keep extending it that way.
   Two legitimate scales are in use; pick whichever your component belongs to
   rather than introducing a third near-duplicate value.
     1) Nav/shell chrome (.nav, .nav-*, .ops-shell, #tab-settings rail width):
          520px  - compact-phone nav (logo/padding shrink)
          720px  - page/container padding-inline bump, nav-role-chip shows
          780px  - phone/small-tablet declutter (labels hidden, ops-shell full width)
          960px  - LOAD-BEARING: nav <-> rail conversion (--rail-width). Every
                   .ops-shell/.floor-plan-page/#tab-settings margin calc depends
                   on this exact value -- do not move it without re-verifying
                   every page that sets margin-left:var(--rail-width).
     2) Ops "command-layout" content pages (inventory/loyalty/menu panels):
          620px  - phone: side stack collapses under main panel
          1100px - tablet/narrow-desktop: side panel narrows
          1400px - wide desktop: extra breathing room
        Settings' command-layout should match this exactly.
   Known one-off drift identified in this audit, NOT yet folded in (tracked
   for Phase 2/3 of the plan above): settings uses 620/959/1440 instead of
   620/1100/1400; kitchen display uses 760/980 instead of 780/960; orders-tab-
   bar/payment-panel/pos-mode-workspace use 640 instead of 620; reports page
   uses 700 instead of 780.

   MOBILE + TABLET VIEW PASS (2026-09-04) -- device-class intent, reusing the
   load-bearing values above (no new breakpoint numbers):
       <=520px          compact phone   bottom nav, 1 col, tighter chrome
       <=780px          phone           bottom nav, 1 col, dense tables stack
                                        into cards, heroes compact, nav opaque
       781-959px        portrait tablet bottom nav (centered), 2-col grids,
                                        content capped ~880 & centered, REAL
                                        tables (horizontal scroll inside
                                        .table-wrap if one still overflows)
       >=960px          landscape tablet / desktop -- left rail, unchanged
   CSS custom properties are INVALID in @media conditions, so "breakpoint
   variables" are not possible; this is a documented convention only. The
   pass's rules live in one block at the END of this file ("MOBILE + TABLET
   VIEW PASS") so equal-specificity ties resolve there -- grep that marker. */
@font-face{font-family:"Cairo";src:url("/static/fonts/cairo-arabic-600-normal.woff2") format("woff2");font-style:normal;font-weight:600;font-display:swap}
:root{color-scheme:dark;--primitive-ink:#11100d;--primitive-graphite:#302820;--primitive-mist:#f7f6f2;--primitive-brass:#b88a3b;--primitive-brass-deep:#8f6827;--primitive-silver:#e2e4df;--primitive-muted:#7b7469;--primitive-success:#4f6f5a;--primitive-warning:#b7792f;--primitive-danger:#c65345;--color-bg:#12100d;--color-bg-subtle:#191610;--color-surface:#1f1a13;--color-surface-raised:#282016;--color-surface-soft:#30261a;--color-text:#f7f6f2;--color-text-secondary:#cbc5b8;--color-text-muted:#9d9485;--color-line:rgba(247,246,242,.11);--color-line-strong:rgba(247,246,242,.18);--color-accent:#b88a3b;--color-accent-strong:#d1a24b;--color-accent-soft:rgba(184,138,59,.13);--color-success:#78a184;--color-success-soft:rgba(79,111,90,.22);--color-warning:#d29a4d;--color-warning-soft:rgba(183,121,47,.18);--color-danger:#ef776a;--color-danger-soft:rgba(198,83,69,.17);--color-focus:#d8ad5b;--shadow-1:0 1px 0 rgba(255,255,255,.035) inset,0 8px 24px rgba(0,0,0,.16);--shadow-2:0 1px 0 rgba(255,255,255,.045) inset,0 20px 55px rgba(0,0,0,.25);--shadow-sheet:0 28px 90px rgba(0,0,0,.46);--radius-xs:8px;--radius-sm:12px;--radius-md:18px;--radius-lg:24px;--radius-xl:30px;--motion-fast:140ms;--motion-base:220ms;--ease-out:cubic-bezier(.22,1,.36,1);--font-body:"Plus Jakarta Sans","Cairo",sans-serif;--font-display:"Plus Jakarta Sans","Cairo",sans-serif;--font-mono:"DM Mono",ui-monospace,monospace;--rail-width:252px;--content-max:1520px;--bg:var(--color-bg);--bg2:var(--color-bg-subtle);--bg3:var(--color-surface-soft);--su:var(--color-surface);--su2:var(--color-surface-raised);--g:var(--color-accent);--gf:var(--color-accent-soft);--ggl:rgba(184,138,59,.24);--gold:var(--color-accent);--goldf:var(--color-accent-soft);--t:var(--color-text);--t2:var(--color-text-secondary);--t3:var(--color-text-muted);--b:rgba(184,138,59,.28);--b2:var(--color-line);--sh:var(--shadow-2);--sh-sm:var(--shadow-1);--sh-hover:var(--shadow-2);--ops-bg:var(--color-bg);--ops-surface:var(--color-surface);--ops-surface-2:var(--color-surface-raised);--ops-green:var(--color-success);--ops-gold:var(--color-accent);--ops-red:var(--color-danger);--ops-text:var(--color-text);--ops-muted:var(--color-text-muted);--ops-line:var(--color-line)}
:root[data-theme="dark"],
:root:not(.light){color-scheme:dark}
:root.light,:root[data-theme="light"]{color-scheme:light;--color-bg:#eeede7;--color-bg-subtle:#f3f2ed;--color-surface:#fff;--color-surface-raised:#faf9f5;--color-surface-soft:#f0efe9;--color-text:#111716;--color-text-secondary:#3e4743;--color-text-muted:#6f7773;--color-line:rgba(17,23,22,.10);--color-line-strong:rgba(17,23,22,.17);--color-accent-soft:rgba(184,138,59,.10);--color-success:#4f6f5a;--color-success-soft:rgba(79,111,90,.12);--color-warning:#9d692b;--color-warning-soft:rgba(183,121,47,.12);--color-danger:#b6473c;--color-danger-soft:rgba(198,83,69,.10);--shadow-1:0 1px 0 rgba(255,255,255,.85) inset,0 8px 24px rgba(17,23,22,.055);--shadow-2:0 1px 0 rgba(255,255,255,.9) inset,0 22px 60px rgba(17,23,22,.09);--shadow-sheet:0 28px 90px rgba(17,23,22,.2)}
*,*::before,*::after{box-sizing:border-box}html{min-height:100%;scroll-behavior:smooth;background:var(--color-bg)}#zaki-nav-progress{position:fixed;top:0;left:0;width:0;height:3px;z-index:9999;background:linear-gradient(90deg,var(--color-accent-strong),var(--color-accent));opacity:0;box-shadow:0 0 8px rgba(184,138,59,.6);pointer-events:none}@media (prefers-reduced-motion:reduce){#zaki-nav-progress{display:none}}body{min-width:320px;min-height:100dvh;margin:0;color:var(--color-text);background:radial-gradient(circle at 78% -10%,rgba(184,138,59,.09),transparent 28rem),var(--color-bg);font-family:var(--font-body);font-size:15px;line-height:1.5;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}body.ar{direction:rtl;font-family:"Cairo",var(--font-body)}body.ar .nav{direction:ltr}body.ar .page,body.ar .container{direction:rtl}::selection{color:var(--primitive-ink);background:rgba(184,138,59,.45)}[hidden]{display:none!important}img,svg{display:block;max-width:100%}button,input,select,textarea{font:inherit}button,a,[role="button"]{touch-action:manipulation}a{color:inherit}h1,h2,h3,h4,p{margin-top:0}h1,h2,h3,.syne,.brand,.card-title,.panel-head strong{font-family:var(--font-display)}.mono,.mono-cell,code,pre{font-family:var(--font-mono)}:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
.zaki-skip-link{position:fixed;top:10px;left:10px;z-index:10001;padding:10px 14px;color:var(--primitive-ink);background:var(--color-accent-strong);border-radius:10px;font-size:13px;font-weight:800;text-decoration:none;transform:translateY(-160%)}.zaki-skip-link:focus-visible{transform:translateY(0);outline-color:var(--color-text);outline-offset:3px}body.ar .zaki-skip-link{right:10px;left:auto}
/* 2026-09-13: was right-anchored, plain surface color. Reviewer-caught
   (well, user-caught): a SECOND .zaki-back-to-top rule got appended near
   the end of this file without noticing this one already existed --
   both defined transform (this one only on :hover, the other only on
   the base rule), and since :hover's specificity (0-2-0) beats the
   other rule's unqualified base (0-1-0) regardless of source order, the
   base rule's translateX(-50%) centering was replaced by this rule's
   translateY(-1px) on every hover -- the button visibly jumped right by
   half its own width the moment your cursor touched it. Consolidated
   back into ONE rule, moved to bottom-center per request, gold instead
   of surface-raised, with an up-arrow and a bounce-in reveal -- the
   hover transform now composes WITH the centering translateX instead of
   replacing it, so it can never do that again. Kept the mobile-safe
   bottom offset (clears the bottom tab bar + safe-area-inset) that the
   original rule already had right; desktop/tablet (no bottom tab bar)
   gets a smaller, closer-to-the-edge offset instead. */
.zaki-back-to-top{position:fixed;left:50%;bottom:calc(112px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:500;display:flex;align-items:center;gap:7px;min-height:44px;padding:10px 20px;border:none;border-radius:999px;background:var(--gold);color:var(--primitive-ink);font-family:inherit;font-size:13px;font-weight:800;box-shadow:var(--sh);cursor:pointer;transition:background var(--motion-fast),transform var(--motion-fast);animation:zaki-back-to-top-in .42s var(--ease-out)}
.zaki-back-to-top:hover{background:var(--color-accent-strong);transform:translateX(-50%) translateY(-2px)}
.zaki-back-to-top:active{transform:translateX(-50%) scale(.98)}
.zaki-back-to-top::before{content:"\2191";font-size:15px;line-height:1;font-weight:900}
@media(min-width:960px){.zaki-back-to-top{bottom:24px}}
@keyframes zaki-back-to-top-in{0%{transform:translate(-50%,36px) scale(.82);opacity:0}65%{transform:translate(-50%,-6px) scale(1.04);opacity:1}100%{transform:translate(-50%,0) scale(1)}}
.nav{position:fixed;inset:0 0 auto;z-index:100;display:grid;grid-template-columns:1fr auto;align-items:center;min-height:68px;padding:max(10px,env(safe-area-inset-top)) 16px 10px;color:var(--primitive-mist);background:rgba(17,16,13,.94);border-bottom:1px solid rgba(247,246,242,.1)}.nav-left,.nav-right,.nav-center{display:flex;align-items:center}.nav-left{gap:10px;min-width:0}.nav-right{gap:8px;justify-content:flex-end}.nav-center{position:fixed;inset:auto 0 0;z-index:110;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(58px,1fr);align-items:stretch;min-height:calc(66px + env(safe-area-inset-bottom));padding:7px 8px max(7px,env(safe-area-inset-bottom));background:color-mix(in srgb,var(--color-surface) 94%,transparent);border-top:1px solid var(--color-line);box-shadow:0 -12px 36px rgba(0,0,0,.16);backdrop-filter:blur(24px) saturate(130%)}
/* GPU-composite only below the >=960px rail breakpoint, where .nav-center
   is the phone/tablet bottom tab bar this was written for (iOS Safari
   fixed-position scroll jank). A `transform` other than `none` makes its
   element a containing block for position:fixed descendants regardless of
   that element's own position value -- and .nav-center's base rule above
   is unscoped, so this used to apply at every width. At >=960px
   .nav-center becomes position:static (dashboard.css:118) and holds the
   Ask-Zaki FAB (.zaki-ask-fab, itself position:fixed, spliced in as a
   nav-center cell -- routes/dashboard.py ZAKI_ASK_FAB_BUTTON_HTML) --
   the leaked transform trapped the FAB's fixed positioning inside the
   sidebar instead of the real viewport, reproducing the exact bug already
   fixed once for the tablet rail in commit 22d9ccf ("ask zaki button is
   inside the side bar"), this time via a different property/selector.
   Scoping this down here is the fix. */
@media(max-width:959px){.nav-center{transform:translateZ(0);will-change:transform}}.nav-logo-box{position:relative;flex:0 0 44px;min-width:44px;width:44px;height:44px;padding:0;overflow:visible;background:transparent;border:0;border-radius:0;box-shadow:none}.nav-logo-box::after{content:none}.nav-logo-box img{width:40px;height:40px;object-fit:contain}.nav-brand{display:inline-flex;align-items:center;min-height:44px;color:var(--primitive-mist);font:800 19px/1 var(--font-display);text-decoration:none}.nav-brand span{color:var(--color-accent)}.nav-brand-ar{display:none;font-family:"Cairo",sans-serif}body.ar .nav-brand-main{display:none}body.ar .nav-brand-ar{display:inline}.nav-venue,.nav-role-chip{min-width:0;max-width:150px;overflow:hidden;padding:5px 9px;color:rgba(247,246,242,.68);border:1px solid rgba(247,246,242,.12);border-radius:999px;font-size:10px;font-weight:700;line-height:1;text-overflow:ellipsis;white-space:nowrap}.nav-role-chip{display:none;color:var(--color-accent-strong);border-color:rgba(184,138,59,.28)}.nav-tab{position:relative;display:grid;place-items:center;align-content:center;gap:3px;min-width:0;min-height:52px;padding:5px 4px;color:var(--color-text-muted);border:0;border-radius:13px;text-decoration:none;transition:color var(--motion-fast),background var(--motion-fast),transform var(--motion-fast)}.nav-tab:hover{color:var(--color-text);background:var(--color-accent-soft)}.nav-tab:active{transform:scale(.97)}.nav-tab.active{color:var(--color-accent-strong);background:var(--color-accent-soft)}.nav-tab-icon{position:relative;display:grid;place-items:center;width:23px;height:23px}.nav-tab-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}.nav-tab-label{max-width:100%;overflow:hidden;font-size:10px;font-weight:750;text-overflow:ellipsis;white-space:nowrap}.nav-tab-lock{position:absolute;top:4px;right:5px}.nav-tab-lock svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2}.nav-tab-locked{opacity:.58}.nav-spacer{flex:1}
/* Bottom tab bar: an animated active-tab indicator, the phone equivalent of
   the >=960 rail's own sliding gold bar (.nav-tab::before, dashboard.css:82,
   height animates 0->26px on .active). The rail's own ::before is
   desktop-only (defined inside that media block) so this doesn't double up
   with it there -- explicitly hidden at >=960 below anyway as a second line
   of defense against future changes to that rule's own scoping. */
.nav-tab::after{content:"";position:absolute;bottom:2px;left:50%;width:0;height:3px;background:var(--color-accent);border-radius:999px;transform:translateX(-50%);transition:width var(--motion-base) var(--ease-out)}
.nav-tab.active::after{width:20px}
@media(min-width:960px){.nav-tab::after{display:none}}
/* Phone bottom nav redesign (2026-09-15 QA, "make the phone nav be like
   this" -- reference: a floating dark pill, icon-only tabs, the active
   tab morphing into a light circle with its label sliding in beside it).
   Scoped to the same <960px band the plain icon/label stack above already
   used -- this REPLACES that stacked look on phones, not the tablet-width
   rail (>=960px keeps the existing sidebar nav entirely, untouched: see
   the min-width:960px override just above popping .nav-tab::after there,
   and dashboard.css:118's rail layout switching .nav-center to static
   positioning for that cutover).
   Reuses the exact existing markup (.nav-tab > .nav-tab-icon +
   .nav-tab-label, routes/dashboard.py's _nav_tab_html) -- no HTML change,
   this is a pure re-skin so routing/locked-tier/notification-badge
   behavior on each tab is untouched. */
@media (max-width:959px){
  .nav-center{
    left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));
    border-radius:999px;
    background:var(--primitive-ink);
    border-top:0;
    box-shadow:0 14px 36px rgba(0,0,0,.38);
    padding:6px;
    display:flex;
    gap:2px;
    min-height:auto;
  }
  .nav-tab::after{display:none}
  .nav-tab{
    flex:1 1 0;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 6px;
    border-radius:999px;
    color:rgba(247,246,242,.58);
    transition:flex-grow var(--motion-base) var(--ease-out),background var(--motion-base) var(--ease-out),color var(--motion-fast);
  }
  .nav-tab:hover{background:rgba(247,246,242,.06);color:rgba(247,246,242,.85)}
  .nav-tab.active{flex-grow:2.1;background:rgba(184,138,59,.22);color:var(--color-accent-strong)}
  .nav-tab-icon{
    flex:0 0 auto;width:22px;height:22px;border-radius:50%;
    transition:width var(--motion-base) var(--ease-out),height var(--motion-base) var(--ease-out),background var(--motion-base) var(--ease-out),color var(--motion-base) var(--ease-out);
  }
  .nav-tab.active .nav-tab-icon{width:34px;height:34px;background:var(--color-accent);color:var(--primitive-ink)}
  .nav-tab-label{
    max-width:0;margin-inline-start:0;opacity:0;
    font-size:12px;font-weight:800;
    transition:max-width var(--motion-base) var(--ease-out),margin-inline-start var(--motion-base) var(--ease-out),opacity var(--motion-fast);
  }
  .nav-tab.active .nav-tab-label{max-width:110px;margin-inline-start:8px;opacity:1}
  .nav-tab-lock{top:2px;right:2px}
  :root .nav-center{background:#000}
  :root.light .nav-center,:root[data-theme="light"] .nav-center{background:#fff}
  :root.light .nav-center .nav-tab:not(.active),:root[data-theme="light"] .nav-center .nav-tab:not(.active){color:var(--color-text-secondary)}
}
/* .nav-center's own transform:translateZ(0)/will-change:transform
   (dashboard.css:46, the base .nav-center rule) forces it onto its own GPU
   compositing layer -- the standard fix for iOS Safari's fixed-position
   scroll jank, where a position:fixed element repaints a frame or two late
   during momentum scroll and visually appears to lag/partially vanish
   behind the page for an instant ("nav bar hides on scroll", 2026-09-07
   report). No app code anywhere hides/shows this element on scroll --
   grepped for scroll listeners touching it, found none -- so this was
   always the mobile browser's own rendering, not app state; this doesn't
   change what's drawn, only how the browser composites it. Harmless at
   >=960px where .nav-center is position:static (a compositing layer with
   no positioning effect changes nothing there). */
.icon-btn,.lang-btn,.gear-btn,.ops-notify-btn,.staff-switcher-btn{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:0 12px;color:rgba(247,246,242,.78);background:rgba(247,246,242,.055);border:1px solid rgba(247,246,242,.12);border-radius:14px;cursor:pointer;text-decoration:none;transition:color var(--motion-fast),background var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast)}.icon-btn:hover,.lang-btn:hover,.gear-btn:hover,.ops-notify-btn:hover,.staff-switcher-btn:hover,.ops-notify-btn.active,.staff-switcher-btn.active{color:var(--color-accent-strong);background:rgba(184,138,59,.13);border-color:rgba(184,138,59,.36)}.icon-btn:active,.lang-btn:active,.gear-btn:active{transform:scale(.96)}.icon-btn svg,.gear-btn svg,.ops-notify-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.theme-icon-moon{display:none}:root.light .theme-icon-sun{display:none}:root.light .theme-icon-moon{display:block}.nav-right>.btn-ghost,.nav-right>.gear-btn{display:none}.lang-btn{width:auto;font-size:12px;font-weight:750}
.page,.container{width:100%;max-width:var(--content-max);min-height:100dvh;margin:0 auto;padding:92px 16px calc(92px + env(safe-area-inset-bottom))}.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:24px}.page-title{margin-bottom:3px;font-size:clamp(28px,4vw,44px);line-height:1.03;letter-spacing:-.045em}.page-sub{max-width:68ch;margin:0;color:var(--color-text-muted);font-size:13px}.page-header .btn,.page-header .ops-btn{flex:0 0 auto}.yn-tab-panel{display:none}.yn-tab-panel.active{display:block;animation:zaki-enter var(--motion-base) var(--ease-out)}@keyframes zaki-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.btn,.ops-btn,.link-btn,.copy-open-link,.rpt-export-btns a,.rpt-presets a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 18px;color:var(--color-text);background:var(--color-surface-raised);border:1px solid var(--color-line);border-radius:13px;font-size:13px;font-weight:750;line-height:1.1;text-decoration:none;cursor:pointer;transition:transform var(--motion-fast),background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast)}.btn:hover,.ops-btn:hover,.link-btn:hover{border-color:rgba(184,138,59,.38);transform:translateY(-1px)}.btn:active,.ops-btn:active,.link-btn:active{transform:scale(.98)}.btn-g,.btn-primary,.ops-btn.primary,.new-order-send .ops-btn{color:var(--primitive-ink);background:linear-gradient(180deg,#d8ad5b,var(--color-accent));border-color:transparent;box-shadow:0 10px 26px rgba(184,138,59,.22)}.btn-o,.btn-secondary,.ops-btn.ghost{background:transparent}.btn-ghost{min-height:44px;padding:0 12px;color:var(--color-text-muted);background:transparent}.btn-danger,.danger,.ops-btn.danger{color:var(--color-danger);background:var(--color-danger-soft);border-color:rgba(198,83,69,.34)}.btn[disabled],button[disabled]{cursor:not-allowed;opacity:.48;transform:none}
.card,.zaki-panel,.ops-panel,.settings-section,.rpt-section,.control-group,.guest-bill-card{overflow:clip;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md);box-shadow:var(--shadow-1)}.card{margin-bottom:16px}.card-head,.card-header,.zaki-panel-head,.panel-head,.settings-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:14px 18px;background:var(--color-surface-raised);border-bottom:1px solid var(--color-line)}.card-title,.settings-section-title{margin:0;font-size:14px;letter-spacing:-.02em}.card-meta,.muted,.sub,.settings-section-context{color:var(--color-text-muted);font-size:12px}.card-body,.settings-section-body{padding:18px}.empty,.empty-slim,.fb-empty{display:grid;place-items:center;min-height:112px;padding:24px;color:var(--color-text-muted);text-align:center}.empty-icon{margin-bottom:8px;color:var(--color-accent)}.empty-slim{min-height:72px;padding:16px}.error-msg,.rpt-warn{margin-bottom:16px;padding:12px 14px;color:var(--color-danger);background:var(--color-danger-soft);border:1px solid rgba(198,83,69,.28);border-radius:var(--radius-sm)}
.form-group{margin-bottom:18px}.form-label,.bug-modal-label,.ops-field>span{display:block;margin-bottom:7px;color:var(--color-text-secondary);font-size:11px;font-weight:800;letter-spacing:.045em;text-transform:uppercase}.form-input,.form-select,.form-textarea,.bug-modal-select,.bug-modal-textarea,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),select,textarea{width:100%;min-height:48px;padding:12px 14px;color:var(--color-text);background:var(--color-bg-subtle);border:1px solid var(--color-line-strong);border-radius:var(--radius-sm);outline:0;transition:border-color var(--motion-fast),box-shadow var(--motion-fast),background var(--motion-fast)}textarea,.form-textarea,.bug-modal-textarea{min-height:100px;resize:vertical}input::placeholder,textarea::placeholder{color:var(--color-text-muted)}input:focus,select:focus,textarea:focus{background:var(--color-surface);border-color:var(--color-accent);box-shadow:0 0 0 4px var(--color-accent-soft)}input[type="checkbox"],input[type="radio"]{accent-color:var(--color-accent)}.form-help{margin-top:6px;color:var(--color-text-muted);font-size:11px;line-height:1.45}.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.filter-bar,.search-bar,.rpt-controls,.management-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}.search-input{min-width:min(300px,100%)}
.stats-grid,.stats,.kpi-grid,.rpt-kpi-grid,.management-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px}.stat-card,.stat,.kpi,.rpt-kpi,.ops-kpi{position:relative;min-width:0;padding:18px;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md);box-shadow:var(--shadow-1);text-decoration:none}.stat-label,.kpi-label,.rpt-kpi-label{margin-bottom:10px;color:var(--color-text-muted);font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}.stat-value,.kpi-value,.rpt-kpi-value,.ops-kpi strong{display:block;color:var(--color-text);font:800 clamp(22px,2.4vw,32px)/1 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.04em}.stat-sub,.kpi-note,.rpt-kpi-note,.ops-kpi span{display:block;margin-top:7px;color:var(--color-text-muted);font-size:11px}.stat-gold .stat-value,.gold,.warm{color:var(--color-accent-strong)}.stat-green .stat-value,.green{color:var(--color-success)}.stat-red .stat-value,.red,.hot{color:var(--color-danger)}
.table-wrap,.ops-table-wrap,.staff-role-table-wrap,.fp-list-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}table{width:100%;border-collapse:collapse;font-size:13px}th{padding:11px 14px;color:var(--color-text-muted);background:var(--color-surface-raised);border-bottom:1px solid var(--color-line);font-size:10px;font-weight:850;letter-spacing:.055em;text-align:left;text-transform:uppercase;white-space:nowrap}td{padding:13px 14px;color:var(--color-text-secondary);border-bottom:1px solid var(--color-line);vertical-align:middle}tr:last-child td{border-bottom:0}tbody tr{transition:background var(--motion-fast)}tbody tr:hover{background:var(--color-accent-soft)}body.ar th{text-align:right}.mono-cell,.table-amount{color:var(--color-accent-strong);font-variant-numeric:tabular-nums}.row-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.order-items-disclosure{width:min(300px,30vw);min-width:190px}.order-items-disclosure summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;min-height:44px;cursor:pointer;list-style:none}.order-items-disclosure summary::-webkit-details-marker{display:none}.order-items-disclosure summary::after{content:"";order:-1;width:14px;height:14px;background:var(--color-accent-strong);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform var(--motion-fast)}.order-items-disclosure[open] summary::after{transform:rotate(180deg)}.order-items-disclosure summary:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:var(--radius-sm)}.order-items-summary{min-width:0;overflow:hidden;color:var(--color-text);font-weight:700;text-overflow:ellipsis;white-space:nowrap}.order-items-meta{color:var(--color-text-muted);font-size:10px;font-weight:800;white-space:nowrap}.order-items-detail{margin:4px 0 2px;padding:10px 11px;background:var(--color-bg-subtle);border:1px solid var(--color-line);border-radius:var(--radius-sm)}.order-items-lines{display:grid;gap:8px;margin:0;padding:0;list-style:none}.order-items-line{color:var(--color-text-secondary);font-size:12px;line-height:1.4}.order-items-line strong{display:block;color:var(--color-text);font-size:12px}.order-items-line.empty{color:var(--color-text-muted)}.order-items-note{margin:4px 0 0;color:var(--color-text-secondary);font-size:11px;line-height:1.4;white-space:pre-wrap}.order-items-note span{display:block;margin-bottom:1px;color:var(--color-text-muted);font-size:10px;font-weight:850;letter-spacing:.06em;text-transform:uppercase}.order-items-order-note{margin:10px 0 0;padding-top:9px;border-top:1px solid var(--color-line)}
.badge,.ops-badge,.staff-status-badge,.fp-status-badge,.ops-partial-badge{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:24px;padding:3px 9px;color:var(--color-text-muted);background:var(--color-surface-soft);border:1px solid var(--color-line);border-radius:999px;font-size:10px;font-weight:800;line-height:1;white-space:nowrap}.badge::before,.ops-badge::before{content:"";width:5px;height:5px;background:currentColor;border-radius:50%}.badge-green,.badge-confirmed,.ops-badge.green,.staff-status-badge.present{color:var(--color-success);background:var(--color-success-soft);border-color:rgba(79,111,90,.3)}.badge-gold,.ops-badge.gold,.staff-status-badge.late{color:var(--color-warning);background:var(--color-warning-soft);border-color:rgba(183,121,47,.3)}.badge-red,.badge-cancelled,.ops-badge.red,.staff-status-badge.absent{color:var(--color-danger);background:var(--color-danger-soft);border-color:rgba(198,83,69,.3)}.badge-gray{color:var(--color-text-muted)}.cancel-reason{max-width:260px;margin-top:5px;color:var(--color-text-muted);font-size:11px}/* Menus, alerts and sheets. */
.ops-notify,.staff-switcher{position:relative}.notify-count{position:absolute;top:-5px;right:-5px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;color:#fff;background:var(--primitive-danger);border:2px solid var(--primitive-ink);border-radius:999px;font-size:10px;font-weight:900}.ops-notify-menu,.staff-switcher-menu{position:fixed;top:72px;right:12px;z-index:220;display:none;width:min(400px,calc(100vw - 24px));max-height:min(70dvh,520px);overflow:auto;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-line-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-sheet)}.ops-notify-menu.active,.staff-switcher-menu.active{display:block;animation:zaki-sheet var(--motion-base) var(--ease-out)}@keyframes zaki-sheet{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}.ops-notify-head,.staff-switcher-head{padding:15px 16px;background:var(--color-surface-raised);border-bottom:1px solid var(--color-line)}.notify-signal-list,.signal-list{display:grid;gap:8px;padding:10px}.signal-row{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:10px;padding:11px;background:var(--color-bg-subtle);border:1px solid var(--color-line);border-radius:var(--radius-sm)}.signal-row strong{color:var(--color-accent-strong);font:800 18px/1 var(--font-display)}.signal-row span{font-size:12px;font-weight:700}.staff-switcher-menu{width:min(300px,calc(100vw - 24px));padding:7px}.staff-switcher-head{color:var(--color-text-muted);font-size:10px;font-weight:850;letter-spacing:.06em;text-transform:uppercase}.staff-switcher-item{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:7px 9px;color:var(--color-text);background:transparent;border:0;border-radius:11px;cursor:pointer}.staff-switcher-item:hover{background:var(--color-accent-soft)}.staff-switcher-item-avatar{display:grid;place-items:center;width:30px;height:30px;color:var(--color-accent-strong);background:var(--color-accent-soft);border-radius:50%;font-size:10px;font-weight:900}.staff-switcher-empty,.staff-switcher-pin-step{padding:12px;color:var(--color-text-muted);font-size:12px}.staff-switcher-pin-step{border-top:1px solid var(--color-line)}.staff-switcher-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.staff-switcher-actions button,.staff-switcher-forgot{min-height:44px;border-radius:11px}.staff-switcher-submit{color:var(--primitive-ink);background:var(--color-accent);border:0}.staff-switcher-cancel{color:var(--color-text);background:transparent;border:1px solid var(--color-line)}.staff-switcher-error,.staff-switcher-forgot-status.err{color:var(--color-danger)}.staff-switcher-forgot{color:var(--color-text-muted);background:transparent;border:0;text-decoration:underline}.staff-switcher-forgot-status{margin-top:6px;padding:8px;border-radius:9px;font-size:11px}.staff-switcher-forgot-status.ok{color:var(--color-success);background:var(--color-success-soft)}.staff-switcher-btn-locked{position:relative;display:inline-grid;place-items:center;opacity:.58}.staff-switcher-lock{position:absolute;bottom:-2px;right:-2px;display:grid;place-items:center;width:15px;height:15px;color:var(--color-text-muted);background:var(--color-surface);border:1.5px solid var(--color-line-strong);border-radius:999px}.staff-switcher-lock svg{width:9px;height:9px;fill:currentColor;stroke:none}.global-search{position:relative}.global-search-panel{position:fixed;top:72px;right:12px;z-index:225;display:flex;flex-direction:column;width:min(440px,calc(100vw - 24px));max-height:min(70dvh,560px);overflow:hidden;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-line-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-sheet);animation:zaki-sheet var(--motion-base) var(--ease-out)}.global-search-input-row{display:flex;align-items:center;gap:8px;padding:12px 14px;background:var(--color-surface-raised);border-bottom:1px solid var(--color-line)}.global-search-input-icon{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:var(--color-text-muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.global-search-input{flex:1;min-width:0;padding:6px 0;color:var(--color-text);background:transparent;border:0;font-size:14px}.global-search-input:focus{outline:none}.global-search-close{display:grid;place-items:center;width:26px;height:26px;color:var(--color-text-muted);background:transparent;border:0;border-radius:8px;font-size:18px;line-height:1;cursor:pointer}.global-search-close:hover{background:var(--color-accent-soft);color:var(--color-text)}.global-search-results{overflow:auto;padding:6px}.global-search-hint{padding:16px;color:var(--color-text-muted);font-size:12px;text-align:center}.global-search-group{padding:4px 0}.global-search-group-label{padding:6px 10px 4px;color:var(--color-text-muted);font-size:10px;font-weight:850;letter-spacing:.06em;text-transform:uppercase}.global-search-item{display:flex;flex-direction:column;gap:1px;width:100%;padding:8px 10px;color:var(--color-text);text-decoration:none;border-radius:10px}.global-search-item:hover{background:var(--color-accent-soft)}.global-search-item-title{font-size:13px;font-weight:700}.global-search-item-subtitle{color:var(--color-text-muted);font-size:11px}.global-search-item-badge{align-self:flex-start;margin-top:2px;padding:2px 7px;color:var(--color-accent-strong);background:var(--color-accent-soft);border-radius:999px;font-size:10px;font-weight:800;text-transform:uppercase}.global-search-more{display:block;padding:8px 10px;color:var(--color-accent-strong);font-size:12px;font-weight:700;text-decoration:none}.global-search-more:hover{text-decoration:underline}
/* Today command center. */
.overview-page{max-width:none}.zaki-today-showcase{width:100%;max-width:1440px;margin:0 auto}.zaki-showcase-topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}.zaki-showcase-topbar>div:first-child{display:grid;gap:8px;min-width:0;align-content:start}.zaki-page-kicker{margin-bottom:5px;color:var(--color-accent-strong);font-size:10px;font-weight:850;letter-spacing:.11em;text-transform:uppercase}.zaki-showcase-topbar h1{margin:0;font-size:clamp(34px,5vw,58px);line-height:1.02;letter-spacing:-.06em}.zaki-showcase-topbar .page-sub{line-height:1.25}.zaki-showcase-status,.zaki-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.zaki-time-pill,.zaki-weather-pill,.zaki-updated{display:inline-flex;align-items:center;min-height:38px;padding:0 12px;color:var(--color-text-secondary);background:var(--color-surface);border:1px solid var(--color-line);border-radius:999px;font-size:11px;font-weight:750}.zaki-showcase-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}.zaki-showcase-card{position:relative;display:grid;align-content:space-between;min-height:138px;padding:17px;overflow:hidden;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md);box-shadow:var(--shadow-1);text-decoration:none;transition:transform var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-fast)}.zaki-showcase-card::after{content:"";position:absolute;inset:auto 18px 0;height:2px;background:var(--color-accent);border-radius:2px 2px 0 0;transform:scaleX(.22);transform-origin:left;transition:transform var(--motion-base) var(--ease-out)}.zaki-showcase-card:hover{border-color:rgba(184,138,59,.32);box-shadow:var(--shadow-2);transform:translateY(-2px)}.zaki-showcase-card:hover::after{transform:scaleX(1)}.zaki-card-title{display:flex;align-items:center;gap:9px;color:var(--color-text-secondary);font-family:var(--font-body);font-size:12px;font-weight:750}.zaki-card-icon{display:grid;place-items:center;width:30px;height:30px;color:var(--color-accent-strong);background:var(--color-accent-soft);border-radius:9px}.zaki-card-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}.zaki-showcase-card strong{color:var(--color-text);font:800 clamp(28px,3.4vw,42px)/1 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.05em}.zaki-showcase-card small{color:var(--color-text-muted);font-size:11px}.zaki-showcase-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.85fr);gap:12px;margin-bottom:12px}.zaki-pulse-panel,.zaki-actions-panel,.zaki-flow-panel{padding:17px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md);box-shadow:var(--shadow-1)}.zaki-panel-head{min-height:auto;padding:0 0 14px;background:transparent}.zaki-panel-head h2{margin:0;font-size:15px}
.zaki-tabs,.zaki-segment,.section-tabs,.tab-bar,.compact-tabs,.cashier-mode-tabs,.workspace-tabs{display:inline-flex;gap:3px;padding:3px;overflow-x:auto;background:var(--color-bg-subtle);border:1px solid var(--color-line);border-radius:12px}.zaki-tabs button,.zaki-segment button,.section-tabs a,.tab-bar a,.compact-tabs a,.cashier-mode-tabs button,.workspace-tabs a,.ops-section-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;color:var(--color-text-muted);background:transparent;border:0;border-radius:9px;font-size:11px;font-weight:800;text-decoration:none;white-space:nowrap}.zaki-tabs .active,.zaki-segment .active,.section-tabs .active,.tab-bar .active,.compact-tabs .active,.cashier-mode-tabs .active,.workspace-tabs .active,.ops-section-link.active{color:var(--primitive-ink);background:var(--color-accent);box-shadow:0 5px 16px rgba(184,138,59,.18)}
.zaki-pulse-rings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.zaki-pulse-card{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;min-height:68px;padding:12px 13px;color:var(--color-text);background:linear-gradient(180deg,var(--color-surface-raised),var(--color-bg-subtle));border:1px solid var(--color-line);border-radius:16px;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:transform var(--motion-fast),border-color var(--motion-fast),background var(--motion-fast)}.zaki-pulse-card::before{content:"";width:10px;height:10px;border-radius:999px;background:var(--color-success);box-shadow:0 0 0 5px var(--color-success-soft)}.zaki-pulse-card.amber::before{background:var(--color-accent);box-shadow:0 0 0 5px var(--color-accent-soft)}.zaki-pulse-card.danger::before{background:var(--color-danger);box-shadow:0 0 0 5px var(--color-danger-soft)}.zaki-pulse-card:hover{border-color:rgba(184,138,59,.34);background:var(--color-surface-raised);transform:translateY(-1px)}.zaki-pulse-copy{display:grid;gap:2px;min-width:0}.zaki-pulse-label{overflow:hidden;color:var(--color-text-secondary);font-size:11px;font-weight:850;letter-spacing:.045em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.zaki-pulse-card small{overflow:hidden;color:var(--color-text-muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.zaki-pulse-card strong{color:var(--color-text);font:800 25px/1 var(--font-display);font-variant-numeric:tabular-nums}.zaki-action-row,.zaki-action-row a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;min-height:48px;padding:0 4px;color:var(--color-text-secondary);border-bottom:1px solid var(--color-line);text-decoration:none}.zaki-action-row a:last-child{border-bottom:0}.zaki-action-row a:hover{color:var(--color-accent-strong)}.zaki-action-row strong{color:inherit;font-size:12px}.zaki-flow-panel{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:16px}.zaki-flow-grid{display:grid;grid-template-columns:repeat(5,minmax(70px,1fr))}.zaki-flow-slot{padding:10px 12px;border-right:1px solid var(--color-line)}.zaki-flow-slot:last-child{border-right:0}.zaki-flow-slot span,.zaki-flow-wait span{display:block;color:var(--color-text-muted);font-size:10px}.zaki-flow-slot strong,.zaki-flow-wait strong{display:block;margin:4px 0;font:800 20px/1 var(--font-display);font-variant-numeric:tabular-nums}.zaki-flow-wait{padding:11px 15px;background:var(--color-bg-subtle);border-radius:var(--radius-sm)}.zaki-flow-footer{display:flex;justify-content:space-between;gap:12px;grid-column:1/-1;padding-top:10px;color:var(--color-text-muted);border-top:1px solid var(--color-line);font-size:10px}
/* Guests, Team and Control. */
.zaki-workspace-page,.zaki-guests-workspace{display:grid;gap:16px}.zaki-workspace-actions,.zaki-workspace-grid,.control-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.zaki-action-card,.zaki-feature-card{position:relative;display:grid;gap:5px;min-height:104px;padding:17px 44px 17px 17px;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md);box-shadow:var(--shadow-1);text-decoration:none;transition:transform var(--motion-fast),border-color var(--motion-fast),background var(--motion-fast)}.zaki-action-card::after,.zaki-feature-card::after{content:"\2192";position:absolute;top:16px;right:17px;color:var(--color-accent);font-size:19px}body.ar .zaki-action-card,body.ar .zaki-feature-card{padding:17px 17px 17px 44px}body.ar .zaki-action-card::after,body.ar .zaki-feature-card::after{right:auto;left:17px;transform:rotate(180deg)}.zaki-action-card:hover,.zaki-feature-card:hover{background:var(--color-surface-raised);border-color:rgba(184,138,59,.34);transform:translateY(-2px)}.zaki-action-card strong,.zaki-feature-card strong{font-size:14px}.zaki-action-card span,.zaki-feature-card span{color:var(--color-text-muted);font-size:11px;line-height:1.45}.overview-more-row{display:flex;justify-content:flex-end;padding-top:8px}.overview-more-link{color:var(--color-accent);font-size:12px;font-weight:750;text-decoration:none}.guests-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.vip-crown{color:var(--color-accent)}.waitlist-row-urgent{background:var(--color-danger-soft)}
.control-group{min-width:0}.control-group-head{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;min-height:92px;padding:16px;border-bottom:1px solid var(--color-line)}.control-group-icon{display:grid;place-items:center;width:42px;height:42px;padding:10px;color:var(--color-accent);background:var(--color-accent-soft);border-radius:13px}.control-group-icon svg{fill:none;stroke:currentColor;stroke-width:1.8}.control-group-head h2{margin:0 0 3px;font-size:15px}.control-group-head p{margin:0;color:var(--color-text-muted);font-size:10px}.control-plan-badge{padding:4px 7px;color:var(--color-accent);border:1px solid rgba(184,138,59,.28);border-radius:999px;font-size:11px;font-weight:850;text-transform:uppercase}.control-group-items{display:grid}.control-item{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:0 16px;border-bottom:1px solid var(--color-line);font-size:12px;font-weight:700;text-decoration:none}.control-item:last-child{border-bottom:0}.control-item:hover{background:var(--color-accent-soft)}.control-item-arrow{color:var(--color-accent);font-size:17px}.control-item-lock{display:inline-flex;align-items:center;gap:5px;color:var(--color-accent)}.control-item-lock svg{width:13px;height:13px;fill:none;stroke:currentColor}.settings-section{scroll-margin-top:88px;margin-bottom:16px}/* Role-safe detailed operations. */
.ops-shell{max-width:var(--content-max)}.ops-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:16px;padding:20px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-lg);box-shadow:var(--shadow-1)}.ops-eyebrow{margin-bottom:5px;color:var(--color-accent);font-size:10px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.ops-hero h1{margin:0;font-size:clamp(28px,4vw,46px);line-height:1;letter-spacing:-.05em}.ops-hero p{max-width:64ch;margin:7px 0 0;color:var(--color-text-muted);font-size:12px}.ops-hero-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.ops-live{display:inline-flex;align-items:center;gap:7px;color:var(--color-success);font-size:10px;font-weight:850;text-transform:uppercase}.ops-live::before{content:"";width:7px;height:7px;background:currentColor;border-radius:50%;box-shadow:0 0 0 5px var(--color-success-soft)}.ops-tabs{display:flex;align-items:center;gap:5px;margin-bottom:14px;padding:4px;overflow-x:auto;background:var(--color-surface);border:1px solid var(--color-line);border-radius:14px;scrollbar-width:none}.ops-tabs::-webkit-scrollbar{display:none}.ops-tabs a,.ops-tabs button{flex:0 0 auto;min-height:44px;padding:0 14px;color:var(--color-text-muted);background:transparent;border:0;border-radius:10px;font-size:11px;font-weight:800;text-decoration:none}.ops-tabs a:hover,.ops-tabs button:hover{color:var(--color-text);background:var(--color-accent-soft)}.ops-tabs .active{color:var(--primitive-ink);background:var(--color-accent)}.ops-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}.ops-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,.8fr);gap:14px;align-items:start}.ops-grid-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.ops-panel{min-width:0}.panel-head{min-height:54px}.panel-head h2,.panel-head h3,.panel-head strong{margin:0;font-size:14px}.ops-inline-link{color:var(--color-accent);font-size:11px;font-weight:800;text-decoration:none}
.ops-action,.seat-action,.mark-paid-btn,.restore-btn,.bill-archive-btn,.inventory-po-action,.inv-count-btn,.inv-order-btn,.inv-receive-btn,.recipe-save-btn,.recipe-delete-btn,.loyalty-tier-remove{min-width:44px;min-height:44px;padding:0 11px;color:var(--color-text-secondary);background:var(--color-surface-raised);border:1px solid var(--color-line);border-radius:10px;font-size:11px;font-weight:800;cursor:pointer}.ops-action:hover,.seat-action:hover,.mark-paid-btn:hover{color:var(--color-accent);border-color:rgba(184,138,59,.35)}
.table-map,.ops-table-map,.yala-floor-map{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;padding:14px}.table-tile,.ops-table-tile,.yala-floor-tile,.fp-tile{position:relative;display:grid;align-content:space-between;min-height:112px;padding:13px;color:var(--color-text);background:var(--color-bg-subtle);border:1px solid var(--color-line);border-radius:var(--radius-sm);text-decoration:none;cursor:pointer;transition:border-color var(--motion-fast),transform var(--motion-fast),background var(--motion-fast)}.table-tile:hover,.ops-table-tile:hover,.yala-floor-tile:hover{transform:translateY(-2px);border-color:rgba(184,138,59,.36)}.table-tile.free,.ops-table-tile.avail,.yala-floor-tile.avail,.fp-tile.avail{background:var(--color-success-soft);border-color:rgba(79,111,90,.34)}.table-tile.busy,.table-tile.occupied,.ops-table-tile.occupied,.yala-floor-tile.occupied,.fp-tile.occupied{background:var(--color-warning-soft);border-color:rgba(183,121,47,.38)}.table-tile.reserved,.ops-table-tile.reserved{background:var(--color-accent-soft);border-color:rgba(184,138,59,.34)}.table-top,.ops-table-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.ops-tile-num,.fp-tile-name{font:800 20px/1 var(--font-display)}.ops-tile-detail,.table-detail,.fp-tile-cap{color:var(--color-text-secondary);font-size:11px}.ops-tile-note,.table-meta{color:var(--color-text-muted);font-size:10px}.floor-table{width:100%}.host-layout,.yala-floor-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.75fr);gap:14px}.host-reservations-panel,.cashier-bills-panel{min-width:0}.merge-box,.yala-merge-box{margin:14px;padding:13px;background:var(--color-bg-subtle);border:1px dashed var(--color-line-strong);border-radius:var(--radius-sm)}.merge-chip{display:inline-flex;align-items:center;min-height:30px;padding:0 9px;margin:3px;color:var(--color-accent);background:var(--color-accent-soft);border-radius:999px;font-size:10px;font-weight:800}
.kanban,.kitchen-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.kanban-col,.kitchen-col{min-width:0;padding:10px;background:var(--color-bg-subtle);border:1px solid var(--color-line);border-radius:var(--radius-md)}.kanban-head,.kitchen-col-header,.kitchen-display-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:42px;margin-bottom:8px;padding:0 5px}.kitchen-col-title{font:800 13px/1 var(--font-display)}.ticket,.kitchen-card{margin-bottom:8px;padding:13px;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-sm);box-shadow:var(--shadow-1)}.ticket.fresh,.kitchen-card.fresh{border-color:rgba(79,111,90,.42)}.ticket.hot,.kitchen-card.hot{border-color:rgba(198,83,69,.46)}.ticket-top,.kitchen-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:9px}.ticket-time{color:var(--color-text-muted);font-size:10px;font-variant-numeric:tabular-nums}.ticket-actions{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}.ticket-timing-label,.timing{color:var(--color-accent);font-size:10px;font-weight:800}.kitchen-card-items{display:grid;gap:5px;color:var(--color-text-secondary);font-size:12px}.kitchen-held-section{margin:12px;padding:12px;background:var(--color-bg-subtle);border:1px dashed var(--color-line-strong);border-radius:var(--radius-sm)}.kitchen-held-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;font-size:12px}.kitchen-held-waiting{color:var(--color-text-muted);font-size:10px}
.cashier-workspace,.yala-pos-layout{display:grid;gap:14px}.cashier-workspace-top{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:14px}.cashier-bills-head{display:grid;grid-template-columns:1fr minmax(150px,260px) auto;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--color-line)}.bill-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:12px}.bill-card{position:relative;min-width:0;padding:14px;color:var(--color-text);background:var(--color-bg-subtle);border:1px solid var(--color-line);border-radius:var(--radius-sm);cursor:pointer}.bill-card:hover,.bill-card.active{border-color:rgba(184,138,59,.38);background:var(--color-accent-soft)}.payment-summary,.total-display,.calc-display{padding:17px;background:var(--color-bg-subtle);border:1px solid var(--color-line);border-radius:var(--radius-md)}.payment-total,.total-display strong{color:var(--color-accent-strong);font:800 32px/1 var(--font-display);font-variant-numeric:tabular-nums}.payment-methods-yala,.calc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}.pay-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:8px 0;border-bottom:1px solid var(--color-line)}.pickup-handoff{display:grid;gap:8px;margin-top:10px}.pickup-confirmed{color:var(--color-success)}
/* Waiter ordering and timing controls. */
.new-order-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.75fr);gap:14px}.new-order-panel,.new-order-cart{min-width:0;overflow:clip;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md)}.new-order-tabs{display:flex;gap:5px;padding:10px;overflow-x:auto;border-bottom:1px solid var(--color-line);scrollbar-width:none}.new-order-tab{flex:0 0 auto;min-height:44px;padding:0 14px;color:var(--color-text-muted);background:transparent;border:1px solid var(--color-line);border-radius:999px;font-size:11px;font-weight:800}.new-order-tab.active{color:var(--primitive-ink);background:var(--color-accent);border-color:var(--color-accent)}.new-order-list{display:none}.new-order-list.active{display:grid}.new-order-lists{padding:5px 12px 12px}.new-order-item-row{display:flex;align-items:center;gap:10px;min-height:54px;padding:9px 5px;border-bottom:1px solid var(--color-line);cursor:pointer}.new-order-item-row:hover,.new-order-item-row.in-cart{background:var(--color-accent-soft)}.new-order-item-row-name{flex:1;min-width:0;font-weight:750}.new-order-item-row-price,.new-order-item-qty-badge{color:var(--color-accent);font-size:12px;font-weight:800}.new-order-cart{display:flex;flex-direction:column}.new-order-timing-default,.new-order-send{padding:13px;border-bottom:1px solid var(--color-line)}.new-order-cart-rows{flex:1;max-height:52dvh;overflow:auto;padding:5px 13px}.new-order-cart-row{padding:10px 0;border-bottom:1px solid var(--color-line)}.new-order-cart-row-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.new-order-cart-row-name{font-size:12px;font-weight:800}.new-order-cart-row-actions{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}.new-order-stepper{display:inline-flex;align-items:center;overflow:hidden;border:1px solid var(--color-line);border-radius:10px}.new-order-step-btn{display:grid;place-items:center;width:44px;height:44px;color:var(--color-text);background:var(--color-bg-subtle);border:0}.new-order-step-btn:disabled{opacity:.4;cursor:not-allowed}.new-order-step-count{min-width:34px;text-align:center;font-weight:850;font-variant-numeric:tabular-nums}.new-order-send{margin-top:auto;border-top:1px solid var(--color-line);border-bottom:0}.new-order-send .ops-btn{width:100%}
/* Inventory, loyalty, team and management. */
.inventory-watchlist,.inventory-table,.purchase-orders-table,.rank-list{display:grid;gap:8px;padding:12px}.inventory-table>div,.purchase-orders-table>div,.loyalty-row,.rank-list>div{display:grid;grid-template-columns:minmax(130px,1.2fr) repeat(3,minmax(90px,.7fr)) auto;align-items:center;gap:10px;min-height:50px;padding:9px 11px;background:var(--color-bg-subtle);border:1px solid var(--color-line);border-radius:11px;font-size:12px}.inventory-panel{min-width:0}.staff-role-group{margin-bottom:14px}.staff-role-header th{color:var(--color-text);background:var(--color-surface-soft);font-family:var(--font-display);font-size:12px}.staff-status-row.staff-status-present{background:var(--color-success-soft)}.staff-status-row.staff-status-late{background:var(--color-warning-soft)}.staff-status-row.staff-status-absent{background:var(--color-danger-soft)}.staff-duty-panel{grid-column:1/-1}.loyalty-row{grid-template-columns:1fr auto}
.yn-collapse{border-bottom:1px solid var(--color-line)}.yn-collapse:last-child{border-bottom:0}.yn-col-head,.yn-col-toggle-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 16px;color:var(--color-text);background:transparent;border:0;text-align:left;cursor:pointer}.yn-col-head:hover{background:var(--color-accent-soft)}.yn-col-title{flex:1;font:800 13px/1.2 var(--font-display)}.yn-col-badge{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;color:var(--color-text-muted);background:var(--color-surface-soft);border-radius:999px;font-size:10px;font-weight:800}.yn-col-chevron{width:16px;height:16px;color:var(--color-accent);transition:transform var(--motion-base)}.yn-collapse[data-open="false"] .yn-col-chevron{transform:rotate(-90deg)}.yn-col-body{min-width:0}/* Modal and bottom-sheet system. */
.ops-modal-overlay,.ysm-overlay,.forgot-pin-overlay,.role-modal{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(4,7,6,.66);backdrop-filter:blur(14px)}.ops-modal-card,.ysm-card,.yala-modal-card,.bug-modal-card,.forgot-pin-modal,.role-modal-card{position:relative;width:min(620px,100%);max-height:min(90dvh,860px);overflow:auto;padding:22px;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-line-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-sheet);animation:zaki-modal var(--motion-base) var(--ease-out)}@keyframes zaki-modal{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}.ops-modal-card{width:min(440px,100%)}.ops-modal-card h3,.ysm-title,.bug-modal-title{margin:0 0 5px;font-size:21px}.ops-modal-meta,.ysm-subtitle{color:var(--color-text-muted);font-size:12px}.ops-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}.modal-close,.ysm-close,.bug-modal-close,.fp-close-btn{display:grid;place-items:center;min-width:44px;min-height:44px;color:var(--color-text);background:var(--color-surface-raised);border:1px solid var(--color-line);border-radius:12px;cursor:pointer}.bug-modal-close{position:absolute;top:12px;right:12px;font-size:22px;font-weight:700;line-height:1;padding:0;text-align:center}.ysm-head,.forgot-pin-head{display:flex;justify-content:space-between;gap:12px;padding-bottom:15px;border-bottom:1px solid var(--color-line)}.ysm-tabs{display:flex;gap:4px;margin:12px 0;padding:3px;background:var(--color-bg-subtle);border-radius:12px}.ysm-tab{flex:1;min-height:44px;color:var(--color-text-muted);background:transparent;border:0;border-radius:9px;font-weight:800}.ysm-tab.active{color:var(--primitive-ink);background:var(--color-accent)}.ysm-body,.forgot-pin-body{padding-top:14px}.ysm-remaining{display:flex;align-items:center;justify-content:space-between;margin:10px 0;padding:12px;background:var(--color-bg-subtle);border:1px solid var(--color-line);border-radius:11px}.ysm-remaining strong{color:var(--color-accent);font:800 20px/1 var(--font-display)}.ysm-items-layout{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ysm-drop-zone{min-height:140px;padding:7px;background:var(--color-bg-subtle);border:2px dashed var(--color-line-strong);border-radius:12px}.ysm-drop-zone.drag-over{border-color:var(--color-accent);background:var(--color-accent-soft)}.ysm-zone-label{display:block;margin-bottom:5px;color:var(--color-text-muted);font-size:10px;font-weight:850;text-transform:uppercase}.ops-toast,#yn-toast{position:fixed;left:50%;bottom:calc(82px + env(safe-area-inset-bottom));z-index:1000;padding:11px 16px;color:var(--color-text);background:var(--color-surface-raised);border:1px solid rgba(184,138,59,.34);border-radius:999px;box-shadow:var(--shadow-sheet);opacity:0;pointer-events:none;transform:translate(-50%,16px);transition:opacity var(--motion-base),transform var(--motion-base)}.ops-toast.show,#yn-toast.show{opacity:1;transform:translate(-50%,0)}
/* Floor plan editor and reports. */
.fp-wrap,.rpt-wrap{width:100%;max-width:var(--content-max);margin:0 auto}.fp-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.fp-canvas-card{padding:12px;overflow:auto;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-lg)}.fp-svg{width:100%;min-width:700px;height:auto}.fp-legend{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}.fp-legend-item{display:inline-flex;align-items:center;gap:6px;color:var(--color-text-muted);font-size:10px}.fp-legend-swatch{width:10px;height:10px;border-radius:3px}.rpt-two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.rpt-chart-wrap{min-height:280px;padding:15px}.rpt-chart-title,.rpt-section-title{margin-bottom:12px;font:800 14px/1.2 var(--font-display)}.rpt-method-row{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:10px;min-height:44px}.rpt-method-label{color:var(--color-text-secondary);font-size:11px}.rpt-method-item{height:8px;background:var(--color-accent-soft);border-radius:999px}.rpt-staff-table{overflow-x:auto}
/* Login uses the mark directly without an image background. */
.login-shell,.login-wrap{display:grid;place-items:center;min-height:100dvh;padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));background:radial-gradient(circle at 14% 18%,rgba(184,138,59,.13),transparent 25rem),radial-gradient(circle at 88% 76%,rgba(79,111,90,.09),transparent 28rem),var(--color-bg)}.login-card{position:relative;width:min(100%,500px);padding:clamp(24px,4vw,42px);overflow:visible;color:var(--color-text);background:color-mix(in srgb,var(--color-surface) 95%,transparent);border:1px solid var(--color-line-strong);border-radius:var(--radius-xl);box-shadow:var(--shadow-2);backdrop-filter:blur(22px)}.login-actions{position:fixed;top:max(18px,env(safe-area-inset-top));right:18px;display:flex;gap:8px;z-index:2}.login-logo,.zaki-login-mark{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto 22px;color:var(--color-text);background:transparent;border:0;text-decoration:none}.login-logo-box{display:block;width:82px;height:82px;padding:0;overflow:visible;background:transparent!important;border:0!important;border-radius:0;box-shadow:none!important}.login-logo-box img,.zaki-login-mark img{width:82px;height:82px;object-fit:contain;background:transparent;border-radius:0}.login-logo-light{display:none}:root.light .login-logo-dark{display:none}:root.light .login-logo-light{display:block}.login-title{margin-bottom:7px;text-align:center;font-size:clamp(32px,6vw,48px);line-height:.98;letter-spacing:-.055em}.login-copy,.login-sub{margin-bottom:22px;color:var(--color-text-muted);text-align:center;font-size:13px}.login-form{display:grid;gap:14px}.zaki-login-field{display:grid;gap:7px}.zaki-input-shell{position:relative;display:flex;align-items:center}.zaki-input-icon{position:absolute;left:14px;z-index:1;color:var(--color-text-muted);pointer-events:none}.zaki-input-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7}.zaki-input-shell input{padding-left:46px!important}body.ar .zaki-input-icon{left:auto;right:14px}body.ar .zaki-input-shell input{padding-left:14px!important;padding-right:46px!important}.zaki-pin-tools{position:absolute;right:7px;display:flex;align-items:center}body.ar .zaki-pin-tools{right:auto;left:7px}.zaki-pin-tool{display:grid;place-items:center;min-width:40px;min-height:44px;color:var(--color-text-muted);background:transparent;border:0;border-radius:10px}.login-remember{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--color-text-secondary);font-size:12px}.login-remember input{width:19px;height:19px}.login-support,.login-foot{margin-top:18px;color:var(--color-text-muted);text-align:center;font-size:11px}.login-geo-msg{margin-top:8px;font-size:11px}
/* Guest preview and compatibility surfaces. */
.guest-preview-shell{width:min(100%,1100px);margin:0 auto;padding:24px}.guest-phone{width:min(100%,420px);margin:0 auto;overflow:hidden;background:var(--color-surface);border:1px solid var(--color-line);border-radius:30px;box-shadow:var(--shadow-2)}.guest-phone-top,.guest-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px;border-bottom:1px solid var(--color-line)}.guest-menu-list{display:grid;gap:10px;padding:12px}.guest-menu-card{display:grid;grid-template-columns:1fr 76px;gap:12px;padding:12px;background:var(--color-bg-subtle);border-radius:14px}.guest-menu-photo{width:76px;height:76px;object-fit:cover;border-radius:12px}.guest-cart,.guest-reservation-card{margin:12px;padding:14px;background:var(--color-bg-subtle);border-radius:14px}.guest-pay-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--color-line)}.guest-status-rail{height:4px;background:var(--color-accent)}.guest-bottom-nav{position:sticky;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);padding:8px;background:var(--color-surface);border-top:1px solid var(--color-line)}
.upgrade-lock{display:grid;place-items:center;min-height:300px;padding:30px;text-align:center;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-lg)}.upgrade-lock-icon{display:grid;place-items:center;width:52px;height:52px;margin-bottom:14px;color:var(--color-accent);background:var(--color-accent-soft);border-radius:16px}.upgrade-lock-title{margin-bottom:7px;font-size:22px}.upgrade-lock-body{max-width:50ch;color:var(--color-text-muted)}.upgrade-lock-cta{margin-top:16px}
@media (min-width:720px){.page,.container{padding-inline:24px}.nav-role-chip{display:inline-flex}}
@media (min-width:960px){.nav{inset:0 auto 0 0;display:flex;flex-direction:column;align-items:stretch;width:var(--rail-width);height:100dvh;padding:26px 16px 18px;background:radial-gradient(circle at 50% 0,rgba(184,138,59,.13),transparent 18rem),var(--primitive-ink);border-right:1px solid rgba(247,246,242,.10);border-bottom:0}.nav-left{display:grid;grid-template-columns:46px 1fr;align-items:center;gap:3px 11px;padding:0 6px 22px}.nav-logo-box,.nav-logo-box img{width:46px;height:46px}.nav-logo-box{grid-row:1/3}.nav-brand{font-size:24px}.nav-venue{max-width:155px;padding:0;color:rgba(247,246,242,.5);background:transparent;border:0;border-radius:0;font-size:10px}.nav-left>span[style*="font-size"]{display:none}.nav-role-chip{grid-column:2;width:max-content;margin-top:6px}.nav-center{position:static;display:flex;flex:1;flex-direction:column;align-items:stretch;gap:5px;min-height:0;padding:18px 0;background:transparent;border-top:1px solid rgba(247,246,242,.09);border-bottom:1px solid rgba(247,246,242,.09);box-shadow:none;backdrop-filter:none}.nav-tab{display:grid;grid-template-columns:24px 1fr auto;place-items:center start;gap:12px;min-height:48px;padding:0 13px;color:rgba(247,246,242,.62);border-radius:13px}.nav-tab::before{content:"";position:absolute;left:-16px;width:3px;height:0;background:var(--color-accent);border-radius:0 3px 3px 0;transition:height var(--motion-base) var(--ease-out)}.nav-tab.active::before{height:26px}.nav-tab.active{color:var(--primitive-mist);background:rgba(247,246,242,.08)}.nav-tab-label{font-size:13px}.nav-tab-lock{position:static;justify-self:end}
.zaki-tabs>span{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 8px;font-size:11px;font-weight:800;white-space:nowrap}.nav-right{flex-wrap:wrap;justify-content:flex-start;gap:7px;padding:18px 2px 0}.nav-right>.btn-ghost,.nav-right>.gear-btn{display:inline-flex}.nav-right>.btn-ghost{width:100%;justify-content:flex-start;color:rgba(247,246,242,.55)}.icon-btn,.lang-btn,.gear-btn,.ops-notify-btn,.staff-switcher-btn{color:rgba(247,246,242,.72);background:rgba(247,246,242,.05);border-color:rgba(247,246,242,.1)}.page,.container{max-width:none;margin-left:var(--rail-width);padding:26px 30px 42px;min-height:100dvh;width:calc(100% - var(--rail-width))}body.ar .page,body.ar .container{margin-right:0;margin-left:var(--rail-width)}.ops-notify-menu,.staff-switcher-menu{position:fixed;top:auto;right:auto;bottom:74px;left:18px;width:min(400px,calc(100vw - 36px))}.staff-switcher-menu{width:min(300px,calc(100vw - 36px))}.ops-toast,#yn-toast{bottom:26px}}
@media (min-width:960px) and (min-height:860px){.overview-page{height:100dvh;overflow:hidden}#tab-overview.yn-tab-panel.active{height:100%}.zaki-today-showcase{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;height:100%}.zaki-showcase-grid{min-height:0}.zaki-pulse-panel,.zaki-actions-panel{min-height:0}}
@media (max-width:1179px){.zaki-showcase-grid,.ops-layout,.host-layout,.yala-floor-layout,.cashier-workspace-top,.new-order-layout{grid-template-columns:1fr}.zaki-flow-panel{grid-template-columns:1fr}.zaki-workspace-actions,.zaki-workspace-grid,.control-groups{grid-template-columns:repeat(2,minmax(0,1fr))}.table-map,.ops-table-map,.yala-floor-map{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:960px) and (max-width:1179px){
  /* 22px -> 30px (2026-09-15, live QA on a 1024x768 tablet/laptop
     viewport): the rail-toggle button (#railToggleBtn, dashboard.css
     ~4399) is position:fixed;left:0 at every width >=960px, 44px wide.
     22px of page padding left ~22px of the button sitting on top of
     .zaki-arrivals-panel's own left edge -- visible as "still shows a
     small part of it" once the button's parent rail slid off-screen.
     30px matches the value the (min-height:860px) block further down
     already uses for the SAME element at the SAME width -- taller
     viewports in this width band were already getting 30px because that
     later, more specific-in-source-order rule wins there; this line only
     changes what a SHORTER viewport in the same width band gets, closing
     a gap in that override's own height floor (see the paired
     max-height:859px block a few lines below). */
  .overview-page{min-height:0;max-height:100dvh;padding:20px 30px}
  .zaki-showcase-topbar,.zaki-showcase-metrics{margin-bottom:10px}
  .zaki-showcase-card{min-height:110px;padding:14px}
  .zaki-showcase-grid{grid-template-rows:minmax(0,1fr) auto;gap:10px}
  .zaki-pulse-panel,.zaki-actions-panel,.zaki-flow-panel{padding:12px}
  .zaki-panel-head{min-height:44px;padding:0 0 8px}
  .zaki-pulse-rings{gap:8px}
  .zaki-pulse-card{min-height:58px;padding:10px 12px}
  .zaki-updated{display:none}
  .zaki-action-row,.zaki-action-row a{min-height:44px}
  .zaki-flow-panel{min-height:0;grid-template-columns:1fr}
  .zaki-flow-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
  .zaki-flow-slot,.zaki-flow-wait{min-width:0;padding:6px 4px;text-align:center;background:var(--color-bg-subtle);border:0;border-radius:9px}
  .zaki-flow-slot span,.zaki-flow-wait span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .zaki-flow-slot small,.zaki-flow-wait small{display:none}
  .zaki-flow-footer{padding-top:6px}
}
@media (max-width:780px){.nav-venue,.nav-role-chip,.nav-left>span[style*="font-size"],.nav-brand{display:none}.nav-right>.staff-switcher,.nav-right>.staff-switcher-btn-locked,.nav-right>.gear-btn,.nav-right>.btn-ghost{display:none}.page-header,.ops-hero,.zaki-showcase-topbar{align-items:flex-start;flex-direction:column}.zaki-showcase-status,.ops-hero-actions{justify-content:flex-start}.zaki-showcase-metrics,.stats-grid,.stats,.kpi-grid,.rpt-kpi-grid,.management-kpis,.ops-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.zaki-showcase-card{min-height:126px}.zaki-pulse-rings{grid-template-columns:repeat(2,minmax(0,1fr))}.zaki-pulse-card{width:100%}.zaki-flow-grid{grid-template-columns:repeat(3,minmax(70px,1fr))}.zaki-flow-slot:nth-child(3){border-right:0}.zaki-workspace-grid,.control-groups,.guests-grid,.ops-grid-two,.rpt-two-col,.kanban,.kitchen-board{grid-template-columns:1fr}.zaki-workspace-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.zaki-workspace-actions .zaki-action-card,.zaki-workspace-actions .zaki-feature-card{min-height:92px;padding:14px 36px 14px 14px}body.ar .zaki-workspace-actions .zaki-action-card,body.ar .zaki-workspace-actions .zaki-feature-card{padding:14px 14px 14px 36px}.zaki-workspace-actions .zaki-action-card strong,.zaki-workspace-actions .zaki-feature-card strong{font-size:13px}.zaki-workspace-actions .zaki-action-card span,.zaki-workspace-actions .zaki-feature-card span{font-size:10px;line-height:1.35}.table-map,.ops-table-map,.yala-floor-map{grid-template-columns:repeat(2,minmax(0,1fr))}.bill-grid{grid-template-columns:1fr}.cashier-bills-head{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}.inventory-table>div,.purchase-orders-table>div{grid-template-columns:1fr 1fr}.login-card{padding:24px}}
@media (max-width:520px){.nav{min-height:62px;padding-inline:12px}.nav-left{gap:0}.nav-logo-box,.nav-logo-box img{width:44px;height:44px}.nav-right{gap:5px}.nav-right .icon-btn,.nav-right .lang-btn,.nav-right .ops-notify-btn{min-width:44px;min-height:44px;padding:0 9px}.page,.container{padding:82px 12px calc(88px + env(safe-area-inset-bottom))}.page-title{font-size:30px}.zaki-showcase-topbar h1{font-size:40px}.zaki-showcase-metrics,.stats-grid,.stats,.kpi-grid,.rpt-kpi-grid,.management-kpis,.ops-kpis{gap:8px}.zaki-showcase-card,.stat-card,.stat,.kpi,.rpt-kpi,.ops-kpi{padding:14px}.zaki-showcase-card strong{font-size:30px}.zaki-flow-grid{grid-template-columns:repeat(2,minmax(70px,1fr))}.zaki-flow-slot{border-right:0;border-bottom:1px solid var(--color-line)}.table-map,.ops-table-map,.yala-floor-map{grid-template-columns:repeat(2,minmax(0,1fr));padding:9px}.table-tile,.ops-table-tile,.yala-floor-tile{min-height:102px;padding:11px}.ysm-overlay,.ops-modal-overlay,.forgot-pin-overlay,.role-modal{align-items:flex-end;padding:0}.ysm-card,.ops-modal-card,.forgot-pin-modal,.role-modal-card{width:100%;max-height:92dvh;border-radius:24px 24px 0 0;padding-bottom:max(22px,env(safe-area-inset-bottom))}.ysm-items-layout{grid-template-columns:1fr}.login-shell,.login-wrap{align-items:center;padding:78px 12px 12px}.login-card{border-radius:24px}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media (forced-colors: active){.nav-tab.active,.btn-primary,.btn-g,.ops-btn.primary{border:2px solid ButtonText}:focus-visible{outline:3px solid Highlight}}
/* Compact labels keep a full iOS-sized interactive hit area. */
.overview-more-link,.zaki-actions-panel>.zaki-panel-head>a,.zaki-tabs>a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 8px}
label:has(input[type="checkbox"]){min-height:44px}
#send_confirmation+label{display:flex;align-items:center;min-height:44px}
.ops-inline-link,.settings-inline-link{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding-inline:6px}
.ui-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.empty-icon .ui-icon{width:30px;height:30px}.upgrade-lock-icon .ui-icon{width:24px;height:24px}.staff-switcher-btn-lock .ui-icon,.ui-icon-inline{width:12px;height:12px}.vip-crown{display:inline-grid;place-items:center;color:var(--color-accent);vertical-align:middle}.vip-crown .ui-icon{width:15px;height:15px}.setup-success-icon{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 18px;color:var(--color-accent);background:var(--color-accent-soft);border-radius:20px}.setup-success-icon .ui-icon{width:30px;height:30px}
.notify-signal-list .signal-row{grid-template-columns:34px minmax(0,1fr) auto;align-items:start}.signal-row.unread{background:var(--color-success-soft);border-inline-start:3px solid var(--color-success)}.notification-type{display:grid;place-items:center;width:34px;height:34px;color:var(--color-accent-strong);background:var(--color-accent-soft);border-radius:10px}.notification-type-icon{width:18px;height:18px}.notification-copy{display:grid;gap:5px;min-width:0}.notification-row-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}.notification-row-head strong{color:var(--color-text);font-size:12px;line-height:1.35;min-width:0}.notification-body,.notification-age{color:var(--color-text-muted);font-size:11px}.notification-age{white-space:nowrap}.notification-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.notification-click-row{cursor:pointer;transition:background var(--motion-fast) var(--ease-out),border-color var(--motion-fast) var(--ease-out),transform var(--motion-fast) var(--ease-out)}.notification-click-row:hover{background:var(--color-surface-raised);border-color:var(--color-accent-soft);transform:translateY(-1px)}.notification-action{min-height:44px;padding:0 12px;font-size:11px}.notification-mark-all{display:inline-grid;place-items:center;min-height:44px;padding:0 4px;color:var(--color-accent-strong);background:transparent;border:0;cursor:pointer;font-size:11px;font-weight:750}
.notification-source-chip{display:inline-block;margin-inline-end:6px;padding:1px 7px;color:var(--color-accent-strong);background:var(--color-accent-soft);border-radius:999px;font-size:10px;font-weight:850;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.notify-sources{margin:0 10px 6px;padding:2px 0;border-bottom:1px solid var(--color-line)}.notify-sources-heading{display:flex;align-items:center;gap:8px;min-height:44px}.notify-sources-disclosure{flex:1;min-width:0}.notify-sources-disclosure summary{padding:8px 2px;color:var(--color-text-muted);font-size:10px;font-weight:850;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}.notify-source-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 2px;font-size:12px}.notify-source-row>span{font-weight:800}.notify-source-toggle,.notify-mute-all{position:relative;min-height:40px;padding:0 8px;color:var(--color-accent-strong);background:transparent;border:1px solid var(--color-line);border-radius:8px;font-size:10px;font-weight:800;cursor:pointer;transition:color var(--motion-fast),background var(--motion-fast),border-color var(--motion-fast)}.notify-source-toggle{min-width:56px}.notify-source-toggle::before,.notify-mute-all::before{content:"";position:absolute;inset:-4px}.notify-source-toggle:hover,.notify-mute-all:hover{background:var(--color-accent-soft);border-color:rgba(184,138,59,.4)}.notify-source-toggle:focus-visible,.notify-mute-all:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}.notify-mute-all{min-width:108px;color:var(--color-text-secondary);border-radius:999px;white-space:nowrap}.notify-mute-all:disabled,.notify-source-toggle:disabled{cursor:wait;opacity:.55}
@media(max-width:520px){.notify-signal-list .signal-row{grid-template-columns:34px minmax(0,1fr)}.notification-actions{grid-column:2}.notification-action{width:100%}}/* Centered utility shells: venue switcher, onboarding and admin access. */
.orders-tab-bar{margin-bottom:20px}.tab-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-inline-start:6px;padding:0 6px;color:var(--color-text-secondary);background:var(--color-surface-soft);border-radius:999px;font-size:10px;font-weight:800}
.zaki-centered-shell{display:grid;place-items:center;min-height:100dvh;padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));background:radial-gradient(circle at 14% 16%,rgba(184,138,59,.13),transparent 26rem),radial-gradient(circle at 88% 82%,rgba(79,111,90,.08),transparent 30rem),var(--color-bg)}
.venue-picker-shell,.admin-login-card{width:min(100%,520px)}.setup-shell{width:min(100%,520px)}.shell-brand{display:flex;align-items:center;gap:12px;margin-bottom:7px;color:var(--color-text);font:800 24px/1 var(--font-display)}.shell-brand img{width:48px;height:48px;object-fit:contain}.shell-subtitle{margin-bottom:24px;color:var(--color-text-muted);font-size:13px}.venue-picker-shell .shell-subtitle{text-align:center}.shell-primary{width:100%;min-height:48px;margin-top:8px}.shell-alert{margin-bottom:16px;padding:11px 14px;border-radius:12px;font-size:12px}.shell-alert-error{color:var(--color-danger);background:var(--color-danger-soft);border:1px solid color-mix(in srgb,var(--color-danger) 30%,transparent)}
.venue-picker-shell{padding:clamp(22px,4vw,34px);background:var(--color-surface);border:1px solid var(--color-line-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-2)}.venue-option{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:72px;margin-bottom:10px;padding:13px 15px;background:var(--color-bg-subtle);border:1px solid var(--color-line);border-radius:14px;cursor:pointer;transition:border-color var(--motion-fast),background var(--motion-fast),transform var(--motion-fast)}.venue-option:hover{border-color:var(--color-line-strong);transform:translateY(-1px)}.venue-option.is-selected,.venue-option:has(input:checked){background:var(--color-accent-soft);border-color:rgba(184,138,59,.48)}.venue-option-input{position:absolute;opacity:0;pointer-events:none}.venue-option-copy{display:grid;flex:1;gap:6px;min-width:0;text-align:center}.venue-option-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.venue-option-check{display:grid;place-items:center;width:32px;height:32px;color:var(--primitive-ink);background:var(--color-accent);border-radius:10px;opacity:0}.venue-option.is-selected .venue-option-check,.venue-option:has(input:checked) .venue-option-check{opacity:1}.venue-option-check .ui-icon{width:17px;height:17px}
.setup-progress{display:flex;gap:8px;margin-bottom:28px}.setup-progress-bar{position:relative;flex:1;height:4px;background:var(--color-line);border-radius:999px;overflow:hidden}.setup-progress-bar::after{content:"";position:absolute;inset:0;width:0;background:var(--color-accent);border-radius:999px;transition:width .5s cubic-bezier(.4,0,.2,1)}.setup-progress-bar.is-complete::after{width:100%}.setup-progress-bar.is-current::after{width:100%;animation:yn-step-pulse 1.8s ease-in-out infinite}@keyframes yn-step-pulse{0%,100%{opacity:.35}50%{opacity:1}}.setup-step-label{margin-bottom:8px;color:var(--color-text-muted);font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.setup-title{margin-bottom:6px}.setup-description{margin-bottom:24px}.setup-hours-row{display:grid;grid-template-columns:minmax(110px,1fr) 120px auto 120px;align-items:center;gap:10px;margin-bottom:10px}.setup-day-toggle{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-weight:650}.setup-day-toggle input{width:18px;height:18px;min-height:0;accent-color:var(--color-accent)}.setup-time-input{width:120px}.setup-time-separator{color:var(--color-text-muted);font-size:12px}.setup-success{padding:20px 0;text-align:center}.setup-success-copy{margin-bottom:24px;color:var(--color-text-secondary);font-size:14px;line-height:1.7}.setup-share-link{margin-bottom:20px;padding:14px;color:var(--color-accent-strong);background:var(--color-bg-subtle);border:1px solid var(--color-line);border-radius:11px;font:13px/1.5 var(--font-mono);word-break:break-all}.setup-actions{display:flex;gap:10px;margin-top:8px}.setup-primary{flex:1;min-height:48px}
.admin-login-card{width:min(100%,380px);padding:clamp(24px,4vw,36px);background:var(--color-surface);border:1px solid var(--color-line-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-2)}.admin-brand-badge{margin-inline-start:auto;font-size:10px}
.badge-blue{color:var(--color-accent-strong);background:var(--color-accent-soft);border:1px solid rgba(184,138,59,.28)}.tog-group{display:inline-flex;overflow:hidden;border:1px solid var(--color-line);border-radius:11px}.tog-btn{min-height:44px;padding:0 12px;color:var(--color-text-muted);background:transparent;border:0;border-inline-end:1px solid var(--color-line);cursor:pointer;font-size:10px;font-weight:800;letter-spacing:.03em;transition:background var(--motion-fast),color var(--motion-fast)}.tog-btn:last-child{border-inline-end:0}.tog-btn:hover{color:var(--color-text);background:var(--color-surface-raised)}.tog-on.tog-active{color:var(--color-accent-strong);background:var(--color-accent-soft)}.tog-default.tog-active{color:var(--color-text);background:var(--color-surface-soft)}.tog-off.tog-active{color:var(--color-danger);background:var(--color-danger-soft)}
@media(max-width:620px){.zaki-centered-shell{align-items:start;padding-inline:12px}.venue-picker-shell,.admin-login-card{margin-top:56px}.setup-hours-row{grid-template-columns:1fr 1fr}.setup-day-toggle{grid-column:1/-1}.setup-time-input{width:100%}.setup-time-separator{display:none}.setup-actions{flex-direction:column}.setup-actions .btn{width:100%}.tog-group{min-width:240px}.tog-btn{flex:1}}/* Reports and guest feedback. */
.rpt-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:28px}.rpt-presets{display:flex;flex-wrap:wrap;gap:6px}.rpt-preset{display:inline-flex;align-items:center;min-height:44px;padding:0 15px;color:var(--color-text-secondary);border:1px solid var(--color-line);border-radius:999px;text-decoration:none;transition:background var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast)}.rpt-preset:hover,.rpt-preset.active{color:var(--color-accent-strong);background:var(--color-accent-soft);border-color:rgba(184,138,59,.48)}.rpt-custom{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.rpt-custom input[type=date]{min-height:44px;padding:0 11px;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-line);border-radius:11px}.rpt-export-btns{display:flex;gap:8px;margin-inline-start:auto}.rpt-section{margin-bottom:32px}.rpt-section-title{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:16px 18px 0;color:var(--color-accent-strong);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.rpt-section-title::after{content:"";flex:1;height:1px;background:var(--color-line)}.rpt-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:18px}.rpt-kpi{padding:17px 18px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-sm);box-shadow:var(--shadow-1)}.rpt-kpi-label{margin-bottom:6px;color:var(--color-text-muted);font-size:10px;font-weight:750;letter-spacing:.06em;text-transform:uppercase}.rpt-kpi-value{color:var(--color-text);font:800 26px/1 var(--font-display)}.rpt-kpi-value.green{color:var(--color-success)}.rpt-kpi-value.gold{color:var(--color-accent-strong)}.rpt-kpi-value.muted{color:var(--color-text-secondary);font-size:20px}.rpt-kpi-note{margin-top:6px;color:var(--color-text-muted);font-size:10px;line-height:1.4}.rpt-chart-wrap{min-height:0;margin-bottom:12px;padding:17px 18px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-sm);box-shadow:var(--shadow-1)}.rpt-chart-title{margin-bottom:10px;color:var(--color-text-muted);font-size:10px;font-weight:750;letter-spacing:.06em;text-transform:uppercase}.rpt-method-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}.rpt-method-item{height:auto;min-height:82px;padding:13px 15px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-sm)}.rpt-method-label{display:block;margin-bottom:4px;color:var(--color-text-muted);font-size:10px;letter-spacing:.05em;text-transform:uppercase}.rpt-method-item strong{color:var(--color-text);font-size:18px}.rpt-staff-table{width:100%;border-collapse:collapse;font-size:13px}.rpt-staff-table th{padding:9px 8px;color:var(--color-text-muted);border-bottom:1px solid var(--color-line);font-size:10px;font-weight:700;letter-spacing:.05em;text-align:left;text-transform:uppercase}.rpt-staff-table td{padding:10px 8px;color:var(--color-text-secondary);border-bottom:1px solid var(--color-line)}.rpt-staff-table tr:last-child td{border-bottom:0}.rpt-warn{margin-bottom:14px;padding:11px 14px;color:var(--color-warning);background:var(--color-warning-soft);border:1px solid color-mix(in srgb,var(--color-warning) 28%,transparent);border-radius:11px;font-size:12px;line-height:1.5}.rpt-two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}.fb-star{color:var(--color-accent-strong);font-size:14px;letter-spacing:1px}.fb-star-empty{color:var(--color-line-strong)}.fb-phone{color:var(--color-text-secondary);font:12px/1.4 var(--font-mono)}.fb-empty{padding:48px 24px;color:var(--color-text-muted);background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-sm);text-align:center}.fb-empty-title{margin-bottom:6px;color:var(--color-text);font:800 16px/1.2 var(--font-display)}
/* Interactive floor plan. */
.fp-zone-indoor{fill:var(--color-surface);stroke:var(--color-line);stroke-width:.5}.fp-zone-outdoor{fill:var(--color-surface-soft);stroke:var(--color-line);stroke-width:.5}.fp-wall-line{stroke:var(--color-line);stroke-width:1.5;stroke-dasharray:4 4}.fp-zone-lbl{fill:var(--color-text-muted);font:900 6px/1 var(--font-body);letter-spacing:.7px}.fp-avail circle,.fp-avail.fp-bar rect{fill:var(--color-success-soft);stroke:var(--color-success);stroke-width:1.5}.fp-occupied circle,.fp-occupied.fp-bar rect{fill:var(--color-danger-soft);stroke:var(--color-danger);stroke-width:1.5}.fp-tile-name{fill:var(--color-text);font:800 5.5px/1 var(--font-display);dominant-baseline:central;text-anchor:middle}.fp-tile-cap{fill:var(--color-text-muted);font:600 4.5px/1 var(--font-body);dominant-baseline:central;text-anchor:middle}.fp-tile[data-resource-id]{cursor:pointer;outline:none}.fp-tile[data-resource-id]:focus-visible{filter:drop-shadow(0 0 3px var(--color-focus)) drop-shadow(0 0 7px rgba(184,138,59,.34))}.fp-tile.fp-toggling{opacity:.45;pointer-events:none}.fp-legend-swatch.avail{background:var(--color-success-soft);border:1.5px solid var(--color-success)}.fp-legend-swatch.occupied{background:var(--color-danger-soft);border:1.5px solid var(--color-danger)}.fp-list-wrap{overflow-x:auto}.fp-list-wrap table{width:100%;border-collapse:collapse}.fp-list-wrap th,.fp-list-wrap td{padding:11px 14px;border-bottom:1px solid var(--color-line);font-size:13px;text-align:left}.fp-list-wrap th{color:var(--color-text-muted);background:var(--color-surface-raised);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.fp-list-wrap tr:last-child td{border-bottom:0}
@media print{.rpt-controls,.nav,#main-content .page-header .btn{display:none!important}.rpt-wrap{padding:0}}
@media(max-width:780px){.rpt-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.rpt-kpi-value{font-size:20px}.rpt-two-col{grid-template-columns:1fr}.rpt-export-btns{width:100%;margin-inline-start:0}.rpt-export-btns .btn{flex:1}.fp-wrap{padding:20px 16px 80px}.rpt-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:100%}.rpt-presets a{width:100%;padding:0 8px}.rpt-custom{width:100%;flex-wrap:nowrap}.rpt-custom input[type=date]{flex:1;min-width:0;padding:0 6px}.rpt-custom span{flex:0 0 auto}.filter-bar>div{width:100%}.filter-bar>div>.form-input,.filter-bar>div>.form-select,.filter-bar>div>input,.filter-bar>div>select{width:100%!important}}
/* Feature modules: Zaki editor, InstaPay and booking verification. */
/* routes/zaki_editor.py */
.faq-row{display:flex;gap:8px;margin-bottom:8px}
.faq-row input{flex:1}
/* routes/dashboard_instapay.py */
.ip-wrap{display:flex;flex-direction:column;gap:14px;max-width:640px}
.ip-card{background:var(--color-surface);border:1px solid var(--color-line);border-radius:14px;padding:16px;display:flex;gap:14px}
.ip-thumb{width:88px;height:88px;border-radius:10px;background:var(--color-bg-subtle);flex:0 0 auto;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ip-thumb img{width:100%;height:100%;object-fit:cover}
.ip-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.ip-amount{font-family:"DM Mono",monospace;font-size:18px;font-weight:700;color:var(--color-accent-strong)}
.ip-meta{font-size:12px;color:var(--color-text-muted)}
.ip-actions{display:flex;gap:8px;margin-top:6px}
.ip-actions .btn{min-height:44px;font-size:13px}
.ip-reject-row{display:none;gap:8px;margin-top:8px}
.ip-reject-row.show{display:flex}
.ip-reject-row input{flex:1;background:var(--color-bg-subtle);border:1px solid var(--color-line);border-radius:8px;color:var(--color-text);padding:8px 10px;font-size:12px}
.ip-empty{color:var(--color-text-muted);text-align:center;padding:40px}
#ip-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:100;display:none;align-items:center;justify-content:center}
#ip-modal-overlay.open{display:flex}
#ip-modal-img{max-width:90vw;max-height:90vh;border-radius:8px}
/* routes/dashboard_booking_verification.py */
.bv-wrap{display:flex;flex-direction:column;gap:14px;max-width:640px}
.bv-card{background:var(--color-surface);border:1px solid var(--color-line);border-radius:14px;padding:16px;display:flex;gap:14px}
.bv-thumb{width:88px;height:88px;border-radius:10px;background:var(--color-bg-subtle);flex:0 0 auto;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer}
.bv-thumb img{width:100%;height:100%;object-fit:cover}
.bv-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.bv-name{font-family:var(--font-display,"Plus Jakarta Sans",sans-serif);font-size:16px;font-weight:700;color:var(--color-text)}
.bv-handle{font-family:"DM Mono",monospace;font-size:13px;color:var(--color-accent-strong)}
.bv-meta{font-size:12px;color:var(--color-text-muted)}
.bv-actions{display:flex;gap:8px;margin-top:6px}
.bv-actions .btn{min-height:44px;font-size:13px}
.bv-reject-row{display:none;gap:8px;margin-top:8px}
.bv-reject-row.show{display:flex}
.bv-reject-row input{flex:1;background:var(--color-bg-subtle);border:1px solid var(--color-line);border-radius:8px;color:var(--color-text);padding:8px 10px;font-size:12px}
.bv-empty{color:var(--color-text-muted);text-align:center;padding:40px}
#bv-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:100;display:none;align-items:center;justify-content:center}
#bv-modal-overlay.open{display:flex}
#bv-modal-img{max-width:90vw;max-height:90vh;border-radius:8px}
/* routes/dashboard_menu.py */
@media print{.no-print{display:none}.card{box-shadow:none;border:none}}
/* Migrated from an inline <style> tag (menu_qr_page(), historically -- the
class actually lives on menu_list()'s <body>; the CSS was landing in the
wrong function's output before this migration, so it never applied). */
body.resources-page{overflow-y:auto!important;overflow-x:hidden}
/* Migrated from an inline <style> tag (resources_qr(), the single-QR print
page). Also historically mismatched: resources_list() (the listing page)
carried this class on its own <body> instead of resources_qr() carrying it
-- fixed alongside this migration, so a busy resources LIST page is no
longer clipped to a 110mm print box while the single-QR page finally gets
its intended print layout. */
.qr-print-heading{display:none}
.qr-print-footer{display:none}
@media print{
  @page{size:110mm 110mm;margin:0}
  html,.resources-qr-page{width:110mm!important;height:110mm!important;overflow:hidden!important;background:#fff!important;color:#111!important}
  .resources-qr-page .nav,.resources-qr-page .zaki-global-actions,.resources-qr-page #railToggleBtn,.resources-qr-page #railScrim,.resources-qr-page #zaki-ask-panel,.resources-qr-page .page-header,.resources-qr-page .no-print,.resources-qr-page .badge,.resources-qr-page .card-head,.resources-qr-page [style*="word-break"]{display:none!important}
  .resources-qr-page .page{display:grid!important;place-items:center!important;width:110mm!important;height:110mm!important;min-height:0!important;margin:0!important;padding:0!important}
  .resources-qr-page #qr-print-card{border:0!important;box-shadow:none!important;background:#fff!important;color:#111!important;width:100%!important;max-width:none!important}
  .resources-qr-page #qr-print-card .card-body{display:flex!important;flex-direction:column!important;align-items:center!important;min-height:96mm!important;padding:7mm 0 0!important}
  .resources-qr-page .qr-print-heading{display:grid!important;gap:2mm;margin:0 0 9mm!important;padding:0 6mm!important;font-size:5mm!important;font-weight:800!important;line-height:1.2!important;overflow:visible!important;white-space:normal!important}
  .resources-qr-page .qr-print-heading strong{font-size:6.5mm!important;overflow:visible!important;white-space:normal!important}
  .resources-qr-page #qr-print-card .card-body>div[style*="background"]{margin:0!important;padding:0!important;border-radius:0!important}
  .resources-qr-page .qr-print-footer{display:block!important;margin-top:auto!important;padding:0 0 4mm!important;font-size:2.6mm!important;font-weight:800!important;letter-spacing:.02em!important}
}
/* Per-dish Choices & Extras panel (item edit form) */
.choice-group{border:1px solid var(--color-line);border-radius:12px;padding:14px;margin-bottom:12px;background:var(--color-bg-subtle)}
.choice-group-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.choice-group-head strong{font-size:14px}
.choice-group-rule{display:block;margin-top:2px;font-size:11px;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em}
.choice-group-actions{display:flex;gap:6px;flex-wrap:wrap;flex:0 0 auto}
.choice-rows{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.choice-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;background:var(--color-surface)}
.choice-name{font-weight:600;font-size:13px}
.choice-meta{flex:1 1 auto;font-size:11px;color:var(--color-text-muted)}
.choice-group .btn,.choice-row .btn{min-height:34px;padding:0 10px;font-size:12px}
/* Square icon buttons: reorder arrows in the item table + the panel's × */
.menu-reorder-btn,.choice-group .group-del-btn,.choice-row .choice-del-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;padding:0;line-height:1}
.choice-group .group-del-btn,.choice-row .choice-del-btn{width:34px;min-width:34px;height:34px;min-height:34px;font-size:15px}
.menu-reorder-btn{width:44px;min-width:44px;height:44px;min-height:44px;font-size:15px}
.choices-modal-overlay{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.55)}
.choices-modal-overlay[hidden]{display:none}
.choices-modal{width:100%;max-width:440px;max-height:88dvh;overflow-y:auto;padding:20px;border-radius:16px;background:var(--color-surface-raised);border:1px solid var(--color-line)}
.choices-modal h3{margin:0 0 14px;font-size:16px}
.choices-modal .form-group{margin-bottom:12px}
.choices-modal .cm-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choices-modal .cm-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.choices-modal .cm-check{display:flex;align-items:center;gap:8px;font-size:13px}
.choices-modal .cm-check input{width:auto;min-height:0}

.mark-paid-btn.is-success{color:var(--primitive-mist);background:var(--color-success);border-color:var(--color-success)}

/* Compact Today: every live summary remains visible without page scrolling. */
.zaki-flow-panel{grid-column:1/-1}
@media (min-width:781px) and (max-width:1179px){
  .overview-page{height:100dvh;overflow:hidden;padding-top:78px;padding-bottom:78px}
  #tab-overview.yn-tab-panel.active{height:100%}
  .zaki-today-showcase{display:grid;grid-template-rows:auto auto minmax(0,1fr);height:100%}
  .zaki-showcase-topbar{margin-bottom:12px}
  .zaki-showcase-metrics{margin-bottom:10px}
  .zaki-showcase-grid{grid-template-columns:minmax(0,1.45fr) minmax(260px,.75fr);grid-template-rows:minmax(0,1fr) auto;min-height:0;margin-bottom:0}
  .zaki-pulse-panel,.zaki-actions-panel{min-height:0}
  .zaki-flow-panel{grid-column:1/-1}
  .zaki-pulse-card{min-height:60px}
}
@media (min-width:960px) and (max-width:1179px){
  /* 22px -> 30px (2026-09-15, live QA on a 1024x768 tablet/laptop
     viewport): the rail-toggle button (#railToggleBtn, dashboard.css
     ~4399) is position:fixed;left:0 at every width >=960px, 44px wide.
     22px of page padding left ~22px of the button sitting on top of
     .zaki-arrivals-panel's own left edge -- visible as "still shows a
     small part of it" once the button's parent rail slid off-screen.
     30px matches the value the (min-height:860px) block further down
     already uses for the SAME element at the SAME width -- taller
     viewports in this width band were already getting 30px because that
     later, more specific-in-source-order rule wins there; this line only
     changes what a SHORTER viewport in the same width band gets, closing
     a gap in that override's own height floor (see the paired
     max-height:859px block a few lines below). */
  .overview-page{min-height:0;max-height:100dvh;padding:20px 30px}
  .zaki-showcase-topbar,.zaki-showcase-metrics{margin-bottom:10px}
  .zaki-showcase-card{min-height:110px;padding:14px}
  .zaki-showcase-grid{grid-template-rows:minmax(0,1fr) auto;gap:10px}
  .zaki-pulse-panel,.zaki-actions-panel,.zaki-flow-panel{padding:12px}
  .zaki-panel-head{min-height:44px;padding:0 0 8px}
  .zaki-pulse-rings{gap:8px}
  .zaki-pulse-card{min-height:58px;padding:10px 12px}
  .zaki-updated{display:none}
  .zaki-action-row,.zaki-action-row a{min-height:44px}
  .zaki-flow-panel{min-height:0;grid-template-columns:1fr}
  .zaki-flow-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
  .zaki-flow-slot,.zaki-flow-wait{min-width:0;padding:6px 4px;text-align:center;background:var(--color-bg-subtle);border:0;border-radius:9px}
  .zaki-flow-slot span,.zaki-flow-wait span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .zaki-flow-slot small,.zaki-flow-wait small{display:none}
  .zaki-flow-footer{padding-top:6px}
}
/* Automation card, short-viewport half (root-caused 2026-09-16, replacing
   the 2026-09-15 stacked-value band-aid this replaces -- user explicitly
   asked for the WIDE 3-across laptop look preserved here, just smaller,
   not a second redesign of the card's own internals).
   Note on the line numbers cited in this block's own comments: this file's
   other breakpoints (e.g. the "Annotation correction pass" / "Task 8"
   comments elsewhere) already drift out of date as the file grows around
   them -- deliberately NOT repeating that mistake here by citing exact
   line numbers; every reference below is by selector/rule name only, grep
   for it directly rather than trusting a line number.
   Root cause: .zaki-arrivals-panel has an unconditional grid-row:span 2
   base rule. The (min-height:860px) reference band resets that to
   grid-row:1/2 and explicitly places Automation at grid-column:1 (the
   wide ~1.65fr column, shared with Arrivals). Below that height, NOTHING
   resets the span-2, so Arrivals' auto-placed span occupies col1 across
   both rows, pushing Automation (the 3rd DOM child in .zaki-showcase-grid)
   into row2/col2 by plain grid auto-placement -- confirmed live, ~290px
   wide, the same width as the narrow Table Status column. That narrow
   width is *why* the 2026-09-15 fix's first attempt at forcing the
   existing 3-across card grid in here produced ~88px cards and a
   truncated "Revenu fro automa" label: the card grid was right, the
   PANEL's column was wrong.
   Fix: mirror the reference band's own two placement rules (freeing
   row2/col1 for Automation) at this narrower height, then re-apply the
   exact same 3-across restoration this codebase already uses for the
   identical <1100px collapse at the reference band (search for
   "min-width:960px) and (min-height:860px) and (max-width:1100px)") plus
   the same per-card column tuning (search for "Annotation correction
   pass") -- same look, same ratios, reused verbatim rather than
   re-invented, just rendering inside a somewhat narrower wide column than
   an unconstrained desktop gets.
   Positioned HERE (after the general (min-width:960px) and
   (max-width:1179px) block above, not up near the phone-narrow-fix this
   replaces) deliberately -- every property below needs to WIN against that
   general block's own .zaki-showcase-grid/.overview-page rules at equal
   selector specificity, and source order (not media-query nesting) is what
   decides ties. A first draft of this fix sat BEFORE that general block
   and every un-!important property in it was silently overridden --
   confirmed live (grid-template-rows stayed the general block's
   minmax(0,1fr) auto, collapsing row1 to 16.5px and visibly overlapping
   Arrivals/Table Status with Automation) before moving it down here.
   tests/test_dashboard_tablet_automation_wide_column.py pins this ordering
   requirement directly (asserts this block's start index exceeds the
   general block's), so a future "let's sort the media queries" edit can't
   silently reopen it the same way. */
@media (min-width:960px) and (max-width:1099px) and (max-height:859px){
  /* Page-level scroll, closed the same way the (min-height:860px) reference
     band already closes it (search for "dashboard-main-overview{height"):
     main#main-content has its own padding-top:86px (the fixed search/
     notifications strip) but no height cap at this narrower height, so
     #tab-overview's height:100dvh (768px at 1024x768) stacked ON TOP of
     that 86px padding instead of netting against it -- confirmed live, an
     86px page-level overflow, docScrollHeight 854 vs innerHeight 768,
     matching the padding value exactly. Capping main-content itself to
     100dvh/hidden makes the 86px padding come out of that budget, and the
     two 100%-height children below then net correctly against the
     remainder. Table Status's own .zaki-command-grid already scrolls
     internally (search for "Today fit pass") for exactly this kind of
     overflow -- the intent here is the PAGE never scrolls, not that
     nothing inside it can. */
  main#main-content.dashboard-main-overview{height:100dvh;max-height:100dvh;overflow:hidden}
  #tab-overview.yn-tab-panel.active{height:100%;overflow:hidden}
  .overview-page{height:100%;min-height:0;max-height:100%;overflow:hidden}
  /* Capping the page (above) also caps .zaki-showcase-grid's own available
     height -- its inherited grid-template-rows:minmax(0,1fr) auto (from the
     general block above) then let the "1fr" row (Arrivals + Table Status)
     collapse to near-0 once Automation (row2, "auto", content-driven
     ~161px) and Service Flow (row3, implicit "auto", ~205px natural)
     claimed their own space first -- confirmed live, row1 shrank to 16.5px
     and Arrivals/Table Status's own content visibly overflowed their
     boxes. A floor (matching the reference band's own minmax(160px,1fr)
     pattern, sized down since this band's own worst case -- 1024x768,
     confirmed live -- has less total height to give than the reference
     band's 860px floor) guarantees room for a header plus a couple of
     rows before their own internal lists take over scrolling. At
     1024x768 that still leaves less than Automation+Service Flow's
     natural combined height. What actually prevents Service Flow from
     visually overlapping Automation is align-self:start + overflow-y:auto
     below (see that rule's own comment) -- the compaction further below
     (same values the reference band already applies to itself at its own
     tight corner, reused verbatim) exists to shrink how much of Service
     Flow's content needs that internal scroll in the first place, not to
     prevent the overlap by itself. Table Status's .zaki-command-grid
     already scrolls internally at the reference band; Arrivals' list needs
     no band-scoped rule of its own -- it already scrolls unconditionally
     via the file's own later .zaki-arrivals-list rule (round-4 re-review
     found and removed a band-scoped duplicate of it here that had gone
     fully inert the moment that later rule was added, plus the inaccurate
     comment claiming this band needed its own). */
  .zaki-showcase-grid{grid-template-rows:minmax(110px,1fr) auto auto;min-height:0;overflow:visible}
  /* Explicit placement for all four panels, not just Arrivals/Automation --
     leaving Table Status and Service Flow on "auto" (indefinite) placement
     produced a genuinely confusing result under live testing (Service
     Flow's rendered box started mid-way through Automation's own row and
     overlapped it, ~90px off from where its track's line boundaries
     actually sat) that didn't match a simple mental model of the
     auto-placement algorithm. Removing the ambiguity by placing every
     panel explicitly, mirroring the reference band's own fully-explicit
     approach (it also spans Table Status across both of ITS rows rather
     than leaving it on row1 alone).
     !important required on Table Status: an unconditional-on-height
     "@media(max-width:1179px){.zaki-readiness-panel{grid-column:auto;
     grid-row:auto}}" elsewhere in this file resets it back to auto and
     sits LATER in the file than even this repositioned block -- confirmed
     live, without !important the span silently reverted to a single row
     again. Service Flow has no equivalent competing reset today, so it's
     left without !important; if that ever changes, the fix is the same. */
  .zaki-readiness-panel{grid-column:2!important;grid-row:1/span 2!important}
  /* align-self:start (matching the reference band's own identical fix and
     its own comment on why): the base .zaki-service-flow-panel rule
     (unconditional) sets align-self:end. When this panel's real content is
     taller than its own row3 track (it was, here: 211px content vs a
     squeezed ~112px track), :end anchors the box's BOTTOM to the track's
     bottom edge, so the overflow bleeds UPWARD -- confirmed live, the
     rendered box's top ended up 89px above the track's actual start line,
     overlapping Automation's row entirely. :start anchors the top edge
     instead, so any overflow bleeds downward past the grid's own bottom
     edge, clipped by .overview-page's overflow:hidden -- the same "much
     safer failure mode" the reference band already documents.
     !important on align-self and overflow-y: that same base rule sits
     AFTER even this repositioned block and its plain overflow:hidden
     shorthand re-sets overflow-y specifically -- confirmed live, without
     !important both properties silently reverted to the base rule's
     values and the overlap came right back. height:100% carries no
     !important -- nothing else declares "height" on this selector inside
     any media query that can match here, so there's nothing to beat. */
  .zaki-service-flow-panel{grid-column:1/-1;grid-row:3;align-self:start!important;min-height:0;height:100%;overflow-y:auto!important}
  .zaki-readiness-panel{min-height:0;display:flex;flex-direction:column;overflow:hidden}
  .zaki-arrivals-panel{min-height:0;overflow:hidden}
  .zaki-command-grid{overflow-y:auto;min-height:0}
  /* !important required on all four below: their real competitors are
     unconditional base rules further down the file (2026-09-16 re-review
     found their line-number references had already drifted stale within
     this same commit's own history -- deliberately not repeating that
     mistake, grep for the selectors instead) that this repositioned block
     still sits before -- confirmed live, without !important these were
     silently losing the cascade and doing nothing, while an earlier draft
     of this comment claimed they helped prevent the Automation overlap
     (they don't -- see the align-self/overflow-y rule above for what
     actually does). Of the two selectors below, only .zaki-flow-stage-row
     has a competing margin-bottom declaration to beat -- .zaki-flow-kpi-row
     has none, so its own !important here is inert, kept only because the
     two share one rule and splitting them for one inert keyword isn't
     worth it. */
  .zaki-service-flow-head{margin-bottom:6px!important}
  .zaki-flow-stage-row,.zaki-flow-kpi-row{margin-bottom:6px!important}
  .zaki-flow-stage{min-height:48px!important;padding:8px 10px!important}
  .zaki-flow-kpi{min-height:42px!important;padding:8px 10px!important}
  /* Round-6 review: the base (unconditional) .zaki-flow-kpi span rule is
     white-space:nowrap + text-overflow:ellipsis -- fine for short English
     labels, but Arabic labels are typically wider and the reference band
     (min-height:860px) compensates with its own body.ar override letting
     them wrap instead of truncating. This band's own tighter min-height:
     42px squeeze (vs the reference band's untouched 62px) never got that
     same compensation, copied here with the reference band's own final
     (pass-2) line-height value. min-height is deliberately NOT set on the
     span itself (unlike the reference band's 18px) -- .zaki-flow-kpi's own
     min-height is not a max-height, so a wrapped 2-line label can simply
     make its own KPI cell taller without needing a separate floor, and
     .zaki-service-flow-panel above already scrolls internally for exactly
     this kind of overflow. */
  body.ar .zaki-flow-kpi span{white-space:normal;line-height:1.35;overflow:visible;text-overflow:clip}
  /* Round-7 review: the reference band ships this span rule paired with
     a body.ar .zaki-flow-kpi strong rule -- round 6 copied only the span
     half. strong carries real Arabic text on some KPI cards (not just
     numbers -- e.g. "يحتاج انتباه"/"على المسار"/"لا انتظار"), which the
     base rule's white-space:nowrap;text-overflow:ellipsis can truncate.
     Copied verbatim from the reference band's own settled (pass-1 +
     pass-2) values -- strong's font-size is untouched by either band, so
     no scaling is needed. */
  body.ar .zaki-flow-kpi strong{align-self:center;margin-top:0;padding-bottom:3px;line-height:1.35;letter-spacing:0;overflow:visible;text-overflow:clip}
  /* !important required: the unconditional (unscoped) .zaki-arrivals-panel
     {grid-row:span 2} further down this file still comes AFTER even this
     repositioned block in source order. */
  .zaki-arrivals-panel{grid-row:1/2!important}
  .zaki-automation-panel{grid-column:1;grid-row:2}
  .zaki-automation-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .zaki-automation-action{
    grid-template-columns:40px minmax(0,1fr) minmax(62px,max-content)!important;
    min-height:82px!important;padding:12px 14px!important;gap:10px!important;
  }
  /* Only font-size/line-height/letter-spacing actually contest a DIFFERENT
     value at this band (their competitor is the base rule) -- display/
     min-height/overflow/text-overflow (strong) and min-width/text-align
     (b) have no competing declaration here at all (their would-be
     competitors are scoped to min-width:1180px and max-width:600px,
     neither of which overlaps 960-1099px), and white-space/justify-self
     below (strong/b) DO have a competing declaration but it already says
     the identical value -- all copied verbatim from the reference band's
     own rule without checking necessity at THIS band; trimmed to only
     what's load-bearing here (2026-09-16 re-review). */
  .zaki-automation-action strong{display:block;min-height:0;font-size:11px!important;line-height:1.16!important;letter-spacing:0!important;overflow:visible;text-overflow:clip;white-space:normal}
  .zaki-automation-action b{min-width:62px;justify-self:end;text-align:end;font-size:22px!important;line-height:1!important;letter-spacing:0!important}
  /* No grid-template-columns override here (2026-09-16 re-review: a prior
     draft repeated it with !important, byte-identical to the LTR rule
     above, which already applies regardless of direction -- redundant).
     direction:rtl is the only thing this selector needs to add. */
  body.ar .zaki-automation-action{direction:rtl}
  body.ar .zaki-automation-action span:nth-child(2){align-self:center;text-align:right}
  /* Round-6 review: this band's strong{font-size:11px!important;
     line-height:1.16!important} above is byte-identical to the reference
     band's own pass-2 tightening (min-height:860px, "Annotation correction
     pass 2") -- which ships its own RTL compensation two lines below it
     (body.ar .zaki-automation-action strong{min-height:34px!important;
     line-height:1.25!important}) that never got copied here. Same values
     apply directly since the LTR values being compensated for are
     identical. Round-7 review: min-height's !important is dropped here
     (unlike the reference band's copy) -- there it beats a competing
     min-height:0!important on the LTR pass-1 rule; here the LTR strong
     rule's own min-height:0 (line above) carries no !important, so this
     body.ar rule's higher selector specificity alone is already enough
     to win without needing !important too. line-height:1.25!important
     IS still required -- it beats this same band's own
     line-height:1.16!important a few lines up, at equal specificity,
     decided by source order. */
  body.ar .zaki-automation-action strong{min-height:34px;line-height:1.25!important}
}
/* The earlier short-viewport containment band stopped at 1099px, leaving
   1180x820 (iPad Air landscape) without a height budget at all. Keep the
   same Today shell contained at wider short viewports; data-heavy panels
   own internal scrolling rather than extending the document. */
@media (min-width:1100px) and (max-height:859px){
  main#main-content.dashboard-main-overview{height:100dvh;max-height:100dvh;overflow:hidden}
  #tab-overview.yn-tab-panel.active{height:100%;overflow:hidden}
  .overview-page{height:100%;min-height:0;max-height:100%;overflow:hidden}
  /* Every other band that caps this page's height also turns
     .zaki-today-showcase into a grid (display:grid;grid-template-rows:auto
     auto minmax(0,1fr), mirroring the (min-width:781px) and
     (max-width:1179px) band a few rules up) so .zaki-showcase-grid's own
     row can actually claim the leftover space. This band skipped that --
     above 1179px wide it's the ONLY band in scope, so .zaki-today-showcase
     stayed a plain block, .zaki-showcase-grid's minmax(110px,1fr) row
     resolved against content instead of the viewport, and the overflow
     was clipped with no way to scroll by the overflow:hidden two lines up. */
  .zaki-today-showcase{display:grid;grid-template-rows:auto auto minmax(0,1fr);height:100%;min-height:0}
  .zaki-showcase-grid{grid-template-rows:minmax(110px,1fr) auto auto;min-height:0;overflow:visible}
  .zaki-arrivals-panel{grid-column:1;grid-row:1/2!important;min-height:0;overflow:hidden}
  .zaki-readiness-panel{grid-column:2!important;grid-row:1/span 2!important;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  .zaki-command-grid{min-height:0;overflow-y:auto}
  .zaki-automation-panel{grid-column:1;grid-row:2;min-height:0}
  .zaki-service-flow-panel{grid-column:1/-1;grid-row:3;align-self:start!important;min-height:0;height:100%;overflow-y:auto!important}
}
@media (max-width:780px){
.zaki-tabs>span{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 8px;font-size:11px;font-weight:800;white-space:nowrap}
  .overview-page{height:100dvh;overflow:hidden;padding:70px 10px calc(72px + env(safe-area-inset-bottom))}
  #tab-overview.yn-tab-panel.active{height:100%}
  .zaki-today-showcase{display:grid;grid-template-rows:auto auto minmax(0,1fr);height:100%;min-height:0}
  .zaki-showcase-topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;margin-bottom:8px}
  .zaki-showcase-topbar>div:first-child{min-width:0}
  .zaki-showcase-topbar h1{font-size:34px}
  .zaki-showcase-topbar .page-sub{font-size:10px;white-space:nowrap}
  .zaki-showcase-status{justify-content:flex-end;flex-wrap:nowrap}
  .zaki-showcase-status .zaki-weather-pill,.zaki-showcase-status .zaki-time-pill,.zaki-showcase-status .zaki-theme-toggle{display:none}
  .zaki-today-primary{min-height:44px;padding:0 12px;font-size:11px;white-space:nowrap}
  .zaki-showcase-metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:8px}
  .zaki-showcase-card{grid-template-columns:24px minmax(0,1fr);grid-template-rows:auto 1fr;align-content:stretch;gap:4px;min-height:86px;padding:8px;border-radius:14px}
  .zaki-showcase-card::after{inset-inline:9px;height:2px}
  .zaki-card-icon{width:24px;height:24px;border-radius:7px}
  .zaki-card-icon svg{width:14px;height:14px}
  .zaki-card-title{align-self:center;font-size:11px;line-height:1.1}
  .zaki-showcase-card strong{grid-column:1/-1;align-self:end;font-size:24px}
  .zaki-showcase-card small{display:none}
  .zaki-showcase-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-rows:minmax(0,1fr) auto;gap:8px;min-height:0;margin:0}
  .zaki-pulse-panel,.zaki-actions-panel,.zaki-flow-panel{min-width:0;padding:9px;border-radius:15px}
  .zaki-panel-head{min-height:28px;padding:0 0 6px;gap:5px}
  .zaki-panel-head h2{font-size:11px;line-height:1.15}
  .zaki-panel-head>a,.zaki-tabs{font-size:11px}
  .zaki-pulse-rings{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  .zaki-pulse-card{min-height:52px;padding:8px 9px;border-radius:12px;gap:8px}
  .zaki-pulse-card::before{width:8px;height:8px;box-shadow:0 0 0 4px var(--color-success-soft)}
  .zaki-pulse-card.amber::before{box-shadow:0 0 0 4px var(--color-accent-soft)}
  .zaki-pulse-card.danger::before{box-shadow:0 0 0 4px var(--color-danger-soft)}
  .zaki-pulse-label{font-size:11px}
  .zaki-pulse-card small{font-size:11px}
  .zaki-pulse-card strong{font-size:19px}
  .zaki-updated{display:none}
  .zaki-action-row,.zaki-action-row a{min-height:44px;padding:0 2px;font-size:10px}
  .zaki-action-row strong{font-size:11px}
  .zaki-flow-panel{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:4px}
  .zaki-flow-panel .zaki-panel-head{padding-bottom:2px}
  .zaki-flow-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:3px}
  .zaki-flow-slot,.zaki-flow-wait{min-width:0;padding:5px 2px;text-align:center;background:var(--color-bg-subtle);border:0;border-radius:8px}
  .zaki-flow-slot span,.zaki-flow-wait span{overflow:hidden;font-size:11px;line-height:1.1;text-overflow:ellipsis;white-space:nowrap}
  .zaki-flow-slot strong,.zaki-flow-wait strong{margin:3px 0;font-size:16px}
  .zaki-flow-slot small,.zaki-flow-wait small{display:none}
  .zaki-flow-footer{padding-top:4px;font-size:11px}
}
.zaki-tabs>span{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 8px;font-size:11px;font-weight:800;white-space:nowrap}
@media (max-width:780px) and (max-height:720px){
  .overview-page{padding-top:66px;padding-bottom:68px}
  .zaki-showcase-topbar{margin-bottom:4px}
  .zaki-showcase-topbar h1{font-size:30px}
  .zaki-showcase-metrics{margin-bottom:6px}
  .zaki-showcase-card{min-height:78px}
  .zaki-showcase-grid{gap:6px}
  .zaki-pulse-panel,.zaki-actions-panel,.zaki-flow-panel{padding:7px}
  .zaki-pulse-card{min-height:52px}
  .zaki-flow-slot,.zaki-flow-wait{padding-block:3px}
}
@media (min-width:960px) and (min-height:860px){
  main#main-content.dashboard-main-overview{height:100dvh;max-height:100dvh;overflow:hidden;padding-bottom:22px!important}
  #tab-overview.yn-tab-panel.active{height:100%;overflow:hidden}
  .overview-page{min-height:0;height:100%;max-height:100%;overflow:hidden;padding:0 30px 22px}
  .zaki-today-showcase{grid-template-rows:auto auto 1fr;min-height:0;height:100%}
  .zaki-showcase-topbar{margin-bottom:12px}
  .zaki-showcase-topbar h1{font-size:clamp(32px,4vw,50px)}
  .zaki-showcase-metrics{gap:10px;margin-bottom:10px}
  .zaki-showcase-card{min-height:104px;padding:14px 15px;border-radius:14px}
  .zaki-showcase-card strong{font-size:clamp(26px,2.5vw,34px)}
  .zaki-showcase-grid{grid-template-rows:auto auto;align-content:start;overflow:hidden}.zaki-showcase-grid{gap:10px;margin-bottom:0}
  .zaki-pulse-panel,.zaki-actions-panel,.zaki-flow-panel{min-height:0;padding:12px;border-radius:16px;align-self:start}
  .zaki-panel-head{min-height:44px;padding:0 0 8px}
  .zaki-pulse-rings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .zaki-pulse-card{min-height:64px;border-radius:14px;padding:11px 13px}
  .zaki-pulse-label{font-size:11px;line-height:1.2}
  .zaki-pulse-card small{font-size:11px;line-height:1.3}
  .zaki-pulse-card strong{font-size:25px}
  .zaki-updated{display:none}
  .zaki-flow-panel{grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:6px}
  .zaki-flow-panel .zaki-panel-head{padding-bottom:4px}
  .zaki-flow-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
  .zaki-flow-slot,.zaki-flow-wait{min-width:0;min-height:62px;padding:7px 8px;text-align:center;background:var(--color-bg-subtle);border:0;border-radius:10px}
  .zaki-flow-slot span,.zaki-flow-wait span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .zaki-flow-slot small,.zaki-flow-wait small{display:none}
  .zaki-flow-footer{padding-top:6px}
}

/* Guest Flow should read as a compact arrival timeline, not a second card grid. */
@media (min-width:960px) and (min-height:860px){
  .zaki-flow-panel{position:relative;overflow:hidden;padding:12px 14px 10px}
  .zaki-flow-panel .zaki-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:8px}
  .zaki-flow-grid{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;align-items:stretch;isolation:isolate;padding-top:4px}
  .zaki-flow-grid::before{content:"";position:absolute;left:calc(8.333% + 20px);right:calc(8.333% + 20px);top:22px;height:1px;background:var(--color-line);z-index:0}
  .zaki-flow-slot,.zaki-flow-wait{position:relative;z-index:1;display:grid;align-content:start;gap:3px;min-width:0;min-height:72px;padding:18px 10px 8px;text-align:left;background:transparent;border:0;border-right:1px solid var(--color-line);border-radius:0}
  .zaki-flow-slot::before,.zaki-flow-wait::before{content:"";position:absolute;top:15px;left:10px;width:9px;height:9px;border:2px solid var(--color-accent);border-radius:50%;background:var(--color-surface);box-shadow:0 0 0 4px var(--color-bg-subtle)}
  .zaki-flow-slot span,.zaki-flow-wait span{padding-left:18px;overflow:hidden;color:var(--color-text-muted);font-size:11px;font-weight:850;line-height:1.2;text-align:left;text-overflow:ellipsis;white-space:nowrap}
  .zaki-flow-slot strong,.zaki-flow-wait strong{margin:2px 0 0;padding-left:18px;font-size:20px;text-align:left}
  .zaki-flow-slot small,.zaki-flow-wait small{display:block;padding-left:18px;color:var(--color-text-muted);font-size:10px;line-height:1.15}
  .zaki-flow-wait{margin-left:8px;padding:12px 12px 8px;background:var(--color-accent-soft);border:1px solid rgba(184,138,59,.28);border-radius:12px}
  .zaki-flow-wait::before{top:14px;left:12px;background:var(--color-accent)}
  .zaki-flow-footer{justify-content:flex-start;gap:6px;padding-top:6px;border-top:0;font-size:11px}
  .zaki-arrivals-panel>.zaki-flow-footer{display:inline-flex;width:auto;max-width:100%;justify-content:flex-start;align-items:center;gap:4px;margin-top:-18px;margin-left:0;margin-right:auto;padding-top:0;border-top:0;white-space:nowrap;position:relative;z-index:2}
}

/* Guests workspace: restyle legacy booking panels into the Zaki product language. */
.zaki-guests-workspace .guests-grid{grid-template-columns:repeat(2,minmax(320px,1fr));gap:16px;align-items:stretch}
.zaki-guests-workspace .guests-grid>.card,.zaki-guests-workspace .guests-grid>.zaki-feature-card{position:relative;min-height:250px;padding:0;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--color-surface-raised) 42%,transparent),var(--color-surface));border:1px solid var(--color-line);border-radius:22px;box-shadow:var(--shadow-1)}
.zaki-guests-workspace .guests-grid>.zaki-feature-card::after{content:none}
.zaki-guests-workspace .guests-grid>.zaki-feature-card>.card{height:100%;margin:0;background:transparent;border:0;box-shadow:none;border-radius:0}
.zaki-guests-workspace .guests-grid .card-head{min-height:64px;padding:16px 18px;background:linear-gradient(180deg,var(--color-surface-raised),transparent);border-bottom:1px solid var(--color-line)}
.zaki-guests-workspace .guests-grid .card-title{font-size:15px;letter-spacing:-.025em}
.zaki-guests-workspace .guests-grid .yn-col-body,.zaki-guests-workspace .guests-grid .card>div:not(.card-head){min-height:170px}
.zaki-guests-workspace .guests-grid .table-wrap{height:100%;background:transparent}
.zaki-guests-workspace .guests-grid table{background:transparent}
.zaki-guests-workspace .guests-grid th{background:transparent}
.zaki-guests-workspace .guests-grid .empty{place-items:start;align-content:center;justify-items:start;min-height:170px;padding:28px 30px;text-align:left;background:radial-gradient(circle at 0 0,var(--color-accent-soft),transparent 15rem)}
.zaki-guests-workspace .guests-grid .empty-icon{display:grid;place-items:center;width:42px;height:42px;margin:0 0 14px;color:var(--color-accent-strong);background:var(--color-accent-soft);border:1px solid rgba(184,138,59,.24);border-radius:14px;font-size:0}
.zaki-guests-workspace .guests-grid .empty-icon .ui-icon{width:21px;height:21px}
.zaki-guests-workspace .guests-grid .empty p{max-width:34ch;margin:0;color:var(--color-text-secondary);font-size:13px;font-weight:700;line-height:1.45}
.zaki-guests-workspace .guests-grid .badge{min-height:28px;padding-inline:10px}
.zaki-guests-workspace .guests-grid .btn-ghost{background:var(--color-bg-subtle);border:1px solid var(--color-line)}
@media (max-width:780px){.zaki-guests-workspace .guests-grid{grid-template-columns:1fr}.zaki-guests-workspace .guests-grid>.card,.zaki-guests-workspace .guests-grid>.zaki-feature-card{min-height:220px}}

/* Guests workspace previews stay compact; detailed pages hold the full tables. */
.zaki-guests-workspace .guests-grid>.card,.zaki-guests-workspace .guests-grid>.zaki-feature-card{max-height:360px;overflow:hidden}
.zaki-guests-workspace .guests-grid .table-wrap{max-height:296px;overflow:auto;overscroll-behavior:contain}
.zaki-guests-workspace .guests-grid .table-wrap::-webkit-scrollbar{width:8px;height:8px}
.zaki-guests-workspace .guests-grid .table-wrap::-webkit-scrollbar-thumb{background:var(--color-line-strong);border-radius:999px}

/* Guests command center: the page stays still; each preview panel owns its scroll. */
@media (min-width:960px) and (min-height:860px){
  #tab-bookings.yn-tab-panel.active{height:100dvh;overflow:hidden}
  .zaki-guests-workspace{min-height:0;height:100dvh;max-height:100dvh;overflow:hidden;padding:22px 30px;grid-template-rows:auto auto minmax(0,1fr);gap:10px}
  .zaki-guests-workspace .page-header{min-height:62px;margin:0}
  .zaki-guests-workspace .page-title{font-size:clamp(30px,3.3vw,44px)}
  .zaki-guests-workspace .zaki-page-kicker{margin-bottom:3px}
  .zaki-guests-workspace .page-sub{font-size:12px}
  .zaki-guests-workspace .zaki-workspace-actions{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
  .zaki-guests-workspace .zaki-action-card{min-height:74px;padding:12px 32px 12px 12px;border-radius:14px}
  .zaki-guests-workspace .zaki-action-card strong{font-size:12px}
  .zaki-guests-workspace .zaki-action-card span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:10px;line-height:1.25}
  .zaki-guests-workspace .zaki-action-card::after{top:12px;right:12px;font-size:15px}
  .zaki-guests-workspace .guests-grid{min-height:0;overflow:hidden;grid-template-rows:repeat(2,minmax(0,1fr));gap:10px}
  .zaki-guests-workspace .guests-grid>.card,.zaki-guests-workspace .guests-grid>.zaki-feature-card{height:100%;max-height:none;min-height:0;border-radius:16px}
  .zaki-guests-workspace .guests-grid>.zaki-feature-card>.card{min-height:0}
  .zaki-guests-workspace .guests-grid .card-head{min-height:50px;padding:10px 12px}
  .zaki-guests-workspace .guests-grid .card-title{font-size:13px}
  .zaki-guests-workspace .guests-grid .yn-col-body,.zaki-guests-workspace .guests-grid .card>div:not(.card-head){min-height:0;height:calc(100% - 50px);overflow:hidden}
  .zaki-guests-workspace .guests-grid .table-wrap{height:100%;max-height:none;overflow:auto;overscroll-behavior:contain}
  .zaki-guests-workspace .guests-grid .card>div.table-wrap:not(.card-head),.zaki-guests-workspace .guests-grid .yn-col-body>.table-wrap{height:100%;max-height:none;overflow:auto;overscroll-behavior:contain}
  .zaki-guests-workspace .guests-grid .empty{min-height:0;height:100%;padding:18px 20px}
  .zaki-guests-workspace .guests-grid .empty-icon{width:34px;height:34px;margin-bottom:10px;border-radius:12px}
  .zaki-guests-workspace .guests-grid .empty-icon .ui-icon{width:18px;height:18px}
  .zaki-guests-workspace .guests-grid .empty p{font-size:12px}
  .zaki-panel-head-actions{display:flex;align-items:center;gap:8px}
  .zaki-guests-workspace .guests-grid .btn-ghost,.zaki-panel-open-link{min-height:44px;padding:0 10px;font-size:11px;border-radius:10px}
}
/* Role modal visibility: closed modals must not trap the waiter screen. */
.role-modal{display:none}
.role-modal.is-open{display:flex}
/* Kitchen timing legend: keep statuses separated and readable. */
.role-kitchen .kitchen-display-head{display:grid;grid-template-columns:auto auto auto;justify-content:space-between;align-items:center;column-gap:16px;row-gap:8px}
.role-kitchen .kitchen-display-head>span{justify-self:end;white-space:nowrap}
.role-kitchen .kitchen-color-code{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;flex-wrap:wrap}
.role-kitchen .kitchen-color-code span{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:999px;white-space:nowrap;line-height:1}
.role-kitchen .kitchen-color-code span:before{margin-right:0;flex:0 0 7px}
@media(max-width:760px){.role-kitchen .kitchen-display-head{grid-template-columns:1fr;align-items:start}.role-kitchen .kitchen-display-head>span{justify-self:start;white-space:normal}.role-kitchen .kitchen-color-code{display:grid;grid-template-columns:1fr;justify-content:stretch;width:100%;gap:7px}.role-kitchen .kitchen-color-code span{width:100%;justify-content:flex-start;min-height:34px}}
/* Control and operator guide layout polish. */
#tab-settings.yn-tab-panel.active{max-width:100%;overflow-x:hidden}
#tab-settings .page-header,#tab-settings .section-label,#tab-settings form,#tab-settings .settings-section{min-width:0;max-width:100%}
#tab-settings .control-groups{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));align-items:start;max-width:100%}
#tab-settings .control-group{min-width:0}
#tab-settings .control-group-head{grid-template-columns:42px minmax(0,1fr) auto}
#tab-settings .control-group-head p,#tab-settings .control-item span:first-child{overflow-wrap:anywhere}
@media(min-width:960px){#tab-settings.yn-tab-panel.active{max-width:calc(100vw - var(--rail-width) - 60px)}}
.cmd-list{display:grid;gap:10px;padding:14px!important}
.cmd-block{display:grid;grid-template-columns:minmax(132px,180px) minmax(0,1fr);align-items:start;gap:12px;min-width:0;padding:14px 16px;background:var(--color-bg-subtle);border:1px solid var(--color-line);border-radius:14px}
.cmd-head{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.cmd-name{display:inline-flex;align-items:center;min-height:44px;max-width:100%;padding:0 10px;color:var(--color-accent-strong);background:var(--color-accent-soft);border:1px solid rgba(184,138,59,.26);border-radius:999px;font:800 12px/1 var(--font-mono);white-space:nowrap}
.cmd-desc{min-width:0;color:var(--color-text-secondary);font-size:13px;line-height:1.45}
.cmd-block[style*="opacity"]{background:color-mix(in srgb,var(--color-bg-subtle) 72%,transparent)}
@media(max-width:720px){.cmd-block{grid-template-columns:1fr}.cmd-desc{font-size:12px}}
@media(min-width:960px){:root.light .nav{background:radial-gradient(circle at 50% 0,rgba(184,138,59,.10),transparent 18rem),var(--color-surface)}:root.light .nav{border-right-color:rgba(17,23,22,.10);box-shadow:0 20px 60px rgba(17,23,22,.08)}:root.light .nav-center{border-top-color:rgba(17,23,22,.09);border-bottom-color:rgba(17,23,22,.09)}:root.light .nav-tab{color:var(--color-text-secondary)}:root.light .nav-tab.active{color:var(--color-text);background:rgba(184,138,59,.12)}:root.light .nav-venue,:root.light .nav-right>.btn-ghost{color:var(--color-text-muted)}:root.light .icon-btn,:root.light .lang-btn,:root.light .gear-btn,:root.light .ops-notify-btn,:root.light .staff-switcher-btn{color:var(--color-text-secondary);background:rgba(17,23,22,.045);border-color:rgba(17,23,22,.10)}} .nav-logo-light{display:none}:root.light .nav-logo-dark{display:none}:root.light .nav-logo-light{display:block}.nav-logo-on-rail{border-radius:12px}


/* Zaki polish foundation: shared readable spacing for staff operations. */
.ops-shell{width:100%;max-width:var(--content-max);margin:0 auto}
.ops-hero{align-items:center;margin-bottom:18px;padding:22px 24px;background:linear-gradient(180deg,var(--color-surface),color-mix(in srgb,var(--color-surface) 88%,var(--color-accent-soft)));border-radius:var(--radius-lg)}
.ops-hero h1{font-size:clamp(30px,4vw,48px);letter-spacing:-.055em}
.ops-hero p{font-size:13px;line-height:1.5}
.ops-tabs{display:flex;align-items:center;gap:8px;margin-bottom:16px;padding:6px;background:color-mix(in srgb,var(--color-surface) 92%,var(--color-bg-subtle));border:1px solid var(--color-line);border-radius:16px;box-shadow:var(--shadow-1)}
.ops-tabs a,.ops-tabs button{flex:0 0 auto;min-height:44px;padding:0 14px;color:var(--color-text-secondary);border-radius:12px;font-size:12px;font-weight:800;letter-spacing:-.01em;transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast)}
.ops-tabs .active{color:var(--primitive-ink);background:linear-gradient(180deg,#d8ad5b,var(--color-accent));box-shadow:0 8px 20px rgba(184,138,59,.20)}
.ops-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.ops-kpi{min-height:104px;padding:16px;background:linear-gradient(180deg,var(--color-surface),var(--color-bg-subtle));border:1px solid var(--color-line);border-radius:var(--radius-md);box-shadow:var(--shadow-1)}
.ops-kpi span{font-size:12px;line-height:1.35}
.ops-kpi strong{font-size:clamp(25px,2.5vw,34px)}
.ops-kpi small{display:block;margin-top:7px;color:var(--color-text-muted);font-size:12px;line-height:1.35}
.ops-panel{min-width:0;overflow:hidden;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md);box-shadow:var(--shadow-1)}
.panel-head{min-height:58px;padding:14px 16px;background:linear-gradient(180deg,var(--color-surface-raised),transparent);border-bottom:1px solid var(--color-line)}
.panel-head h2,.panel-head h3,.panel-head strong{font-size:15px;line-height:1.2;letter-spacing:-.025em}
.ops-table-wrap table{font-size:13px}
.ops-table-wrap td{min-height:48px;padding:13px 14px}
.empty-slim{min-height:96px;color:var(--color-text-muted);background:radial-gradient(circle at 50% 0,var(--color-accent-soft),transparent 18rem)}
.role-kitchen .kitchen-display-head{grid-template-columns:minmax(0,1fr) auto auto;column-gap:14px;padding:0 12px}
.role-kitchen .kitchen-color-code{justify-content:flex-start;gap:8px}
.role-kitchen .kitchen-color-code span{min-height:34px;padding:0 12px;background:var(--color-bg-subtle);border:1px solid var(--color-line)}
@media(max-width:780px){.ops-hero{padding:18px}.ops-tabs{gap:6px}.ops-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.ops-layout,.host-layout,.yala-floor-layout{grid-template-columns:1fr}.ops-kpi{min-height:96px}}


/* IA-first dashboard refresh: Operations primary nav and bottom-left account/settings zone. */
.nav-account-zone{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:10px;row-gap:1px;min-width:0}.nav-account-zone>.staff-switcher,.nav-account-zone>.staff-switcher-btn-locked{grid-column:1/3;margin-bottom:8px}.nav-account-zone>.staff-switcher .staff-switcher-btn{width:100%;justify-content:flex-start}.nav-account-identity{display:contents;color:inherit;text-decoration:none}.nav-account-avatar{grid-column:1;grid-row:1/3;align-self:center;display:inline-grid;place-items:center;width:44px;height:44px;overflow:hidden}.nav-account-avatar-img{width:42px;height:42px;border-radius:50%;object-fit:cover;display:block}.nav-account-avatar-initials{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--color-accent-soft);color:var(--color-accent-strong);font-size:15px;font-weight:900}.nav-account-name{grid-column:2;grid-row:1;align-self:end;overflow:hidden;color:var(--color-text);font:800 12px/1.1 var(--font-display);text-overflow:ellipsis;white-space:nowrap;text-decoration:none}.nav-account-branch{grid-column:2;grid-row:2;align-self:start;overflow:hidden;color:var(--color-text-muted);font-size:10px;font-weight:750;text-overflow:ellipsis;white-space:nowrap;text-transform:none;text-decoration:none}.nav-account-links{display:grid;gap:5px;grid-column:1/3}.nav-account-link{display:flex;align-items:center;min-height:44px;padding:0 10px;color:var(--color-text-secondary);background:var(--color-bg-subtle);border:1px solid var(--color-line);border-radius:12px;font-size:11px;font-weight:800;text-decoration:none}.nav-account-link:hover{color:var(--color-accent-strong);background:var(--color-accent-soft);border-color:rgba(184,138,59,.32)}.nav[data-role="owner"] .nav-center .nav-tab[data-destination="operations"],.nav[data-role="manager"] .nav-center .nav-tab[data-destination="operations"]{display:grid}
.zaki-arrivals-panel,.zaki-readiness-panel,.zaki-bills-panel,.zaki-automation-panel{padding:17px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md);box-shadow:var(--shadow-1)}.zaki-arrivals-panel{grid-row:span 2}.zaki-arrivals-list{position:relative;display:grid;gap:0;isolation:isolate}.zaki-arrivals-list::before{content:"";position:absolute;left:18px;top:18px;bottom:18px;width:1px;background:var(--color-line);z-index:0}.zaki-arrival-row{position:relative;z-index:1;display:grid;grid-template-columns:70px minmax(0,1fr);gap:12px;min-height:58px;padding:8px 0;color:var(--color-text);text-decoration:none}.zaki-arrival-row::before{content:"";position:absolute;left:14px;top:21px;width:9px;height:9px;border:2px solid var(--color-accent);border-radius:50%;background:var(--color-surface);box-shadow:0 0 0 4px var(--color-bg-subtle)}.zaki-arrival-time,.zaki-arrival-main{display:grid;align-content:center;gap:2px;min-width:0}.zaki-arrival-time{padding-left:32px}.zaki-arrival-time strong,.zaki-arrival-main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zaki-arrival-timesmall,.zaki-arrival-metasmall{display:block;color:var(--color-text-muted);font-size:10px;line-height:1.15}.zaki-arrival-time small,.zaki-arrival-main small{color:var(--color-text-muted);font-size:10px}.zaki-arrival-empty{display:grid;place-items:center;min-height:150px;color:var(--color-text-muted);font-size:12px;text-align:center}.zaki-command-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.zaki-command-card{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;min-height:68px;padding:12px 13px;color:var(--color-text);background:linear-gradient(180deg,var(--color-surface-raised),var(--color-bg-subtle));border:1px solid var(--color-line);border-radius:16px;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:transform var(--motion-fast),border-color var(--motion-fast),background var(--motion-fast)}.zaki-command-card::before{content:"";width:10px;height:10px;border-radius:999px;background:var(--color-success);box-shadow:0 0 0 5px var(--color-success-soft)}.zaki-command-card.amber::before{background:var(--color-accent);box-shadow:0 0 0 5px var(--color-accent-soft)}.zaki-command-card.danger::before{background:var(--color-danger);box-shadow:0 0 0 5px var(--color-danger-soft)}.zaki-command-card:hover{border-color:rgba(184,138,59,.34);background:var(--color-surface-raised);transform:translateY(-1px)}.zaki-command-copy{display:grid;gap:2px;min-width:0}.zaki-command-label{overflow:hidden;color:var(--color-text-secondary);font-size:11px;font-weight:850;letter-spacing:.045em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.zaki-command-card small{overflow:hidden;color:var(--color-text-muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.zaki-command-card strong{color:var(--color-text);font:800 25px/1 var(--font-display);font-variant-numeric:tabular-nums}.zaki-bills-list{display:grid}.zaki-bill-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;min-height:50px;color:var(--color-text-secondary);border-bottom:1px solid var(--color-line);text-decoration:none}.zaki-bill-row:last-child{border-bottom:0}.zaki-bill-row span{display:grid;gap:1px;min-width:0}.zaki-bill-row strong,.zaki-bill-row small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zaki-bill-row small{color:var(--color-text-muted);font-size:10px}.zaki-bill-row b{color:var(--color-accent-strong);font-size:12px;font-variant-numeric:tabular-nums}.zaki-automation-panel{display:grid;grid-template-rows:auto 1fr auto}.zaki-automation-shell{display:grid;min-height:100%}.zaki-automation-box{display:grid;gap:22px;min-height:212px;padding:22px 20px;background:#202020;border:2px solid rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}.zaki-automation-eyebrow{display:flex;align-items:center;gap:12px;color:#f2f0eb;font-family:"Consolas","Aptos Mono","Courier New",monospace;font-size:18px;font-weight:700;text-transform:uppercase}.zaki-automation-eyebrow span{font-size:20px;line-height:1}.zaki-automation-lines{display:grid;gap:14px;color:#f2f0eb;font-family:"Consolas","Aptos Mono","Courier New",monospace;font-size:17px;line-height:1.35}.zaki-automation-lines span{display:block}
@media(min-width:960px){.nav-left{display:none}.nav-account-zone{order:3;z-index:120;margin-top:auto;padding-top:12px;border-top:1px solid var(--color-line)}.nav-right{order:4}.nav-center{order:2}}
@media(max-width:780px){.nav-account-zone{display:none}.nav[data-role="owner"] .nav-center .nav-tab[data-destination="operations"],.nav[data-role="manager"] .nav-center .nav-tab[data-destination="operations"]{display:grid}.zaki-arrivals-panel,.zaki-readiness-panel,.zaki-bills-panel,.zaki-automation-panel{min-width:0;padding:9px;border-radius:15px}.zaki-command-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.zaki-command-card{min-height:52px;padding:8px 9px;border-radius:12px;gap:8px}.zaki-command-card::before{width:8px;height:8px;box-shadow:0 0 0 4px var(--color-success-soft)}.zaki-command-label{font-size:11px}.zaki-command-card small{font-size:11px}.zaki-command-card strong{font-size:19px}.zaki-arrival-row{grid-template-columns:58px minmax(0,1fr);min-height:48px}.zaki-arrivals-list::before{left:13px}.zaki-arrival-row::before{left:9px}.zaki-arrival-time{padding-left:24px}}
@media(min-width:960px) and (min-height:860px){.zaki-command-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.zaki-command-card{min-height:64px;border-radius:14px;padding:11px 13px}.zaki-command-label{font-size:11px;line-height:1.2}.zaki-arrivals-list{position:relative;display:grid;gap:0;}.zaki-arrivals-list::before{content:"";position:absolute;left:18px;top:18px;bottom:18px;width:1px;background:var(--color-line);z-index:0}.zaki-arrival-row{position:relative;z-index:1;display:grid;grid-template-columns:70px minmax(0,1fr);gap:12px}.zaki-arrival-row::before{content:"";position:absolute;left:14px;top:21px;width:9px;height:9px;border:2px solid var(--color-accent);border-radius:50%;background:var(--color-surface);box-shadow:0 0 0 4px var(--color-bg-subtle)}.zaki-arrival-timesmall,.zaki-arrival-metasmall{display:block;}}


/* Browser feedback pass: cleaner type, top alerts, useful Today lower band, and fit-safe workspaces. */
body,.nav-tab,.btn,.icon-btn,.lang-btn,input,button,select,textarea,table{font-family:var(--font-body)}
h1,h2,h3,.syne,.page-title,.login-title,.card-title,.zaki-panel-head h2{font-family:var(--font-display);font-weight:760;letter-spacing:-.035em}
.zaki-showcase-topbar h1,.page-title{font-weight:780;letter-spacing:-.045em}
.nav-account-name,.zaki-showcase-card strong,.zaki-command-card strong,.zaki-brief-card strong,.zaki-flow-stage strong,.zaki-flow-kpi strong{font-family:var(--font-display);font-weight:760}

.zaki-global-actions{position:fixed;top:max(18px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));z-index:260;display:flex;align-items:center;gap:8px;pointer-events:none}
.zaki-global-actions>.ops-notify{pointer-events:auto;position:relative}
.zaki-global-actions .ops-notify-btn{color:var(--color-text-secondary);background:color-mix(in srgb,var(--color-surface) 82%,transparent);border-color:var(--color-line-strong);box-shadow:var(--shadow-1);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.zaki-global-actions .ops-notify-btn:hover,.zaki-global-actions .ops-notify-btn.active{color:var(--color-accent-strong);background:var(--color-accent-soft)}
.zaki-global-actions .ops-notify-menu{position:fixed;top:72px;right:18px;bottom:auto;left:auto;width:min(400px,calc(100vw - 36px));max-height:min(70dvh,520px)}
.nav-right>.ops-notify{display:none!important}
.nav-settings-shortcut svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-account-links:empty{display:none}

.zaki-brief-panel{grid-column:1/-1;padding:14px 16px;background:linear-gradient(135deg,var(--color-surface),color-mix(in srgb,var(--color-accent-soft) 44%,var(--color-surface)));border:1px solid var(--color-line);border-radius:var(--radius-md);box-shadow:var(--shadow-1)}
.zaki-brief-panel .zaki-panel-head{padding-bottom:10px}
.zaki-brief-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.zaki-brief-card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:2px 12px;min-height:74px;padding:13px 14px;color:var(--color-text);background:color-mix(in srgb,var(--color-surface-raised) 76%,transparent);border:1px solid var(--color-line);border-radius:16px;text-decoration:none;transition:transform var(--motion-fast),border-color var(--motion-fast),background var(--motion-fast)}
.zaki-brief-card:hover{transform:translateY(-1px);border-color:rgba(184,138,59,.34);background:var(--color-surface-raised)}
.zaki-brief-card span{overflow:hidden;color:var(--color-text-secondary);font-size:11px;font-weight:850;letter-spacing:.045em;text-transform:uppercase;text-overflow:ellipsis;white-space:nowrap}
.zaki-brief-card strong{grid-row:1/3;grid-column:2;color:var(--color-text);font-size:clamp(24px,2.4vw,34px);font-variant-numeric:tabular-nums}
.zaki-brief-card small{overflow:hidden;color:var(--color-text-muted);font-size:11px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.zaki-brief-card.danger strong{color:var(--color-danger)}

.zaki-guests-workspace .guests-grid{grid-template-columns:1fr!important;grid-template-rows:minmax(0,1fr)!important}
.zaki-guests-workspace .guests-grid>.card:first-child{min-height:0;max-height:none;height:100%}
.zaki-guests-workspace .guests-grid>.card:first-child .yn-col-body{height:calc(100% - 50px);overflow:hidden}
.zaki-guests-workspace .guests-grid>.card:first-child .table-wrap{height:100%;max-height:none;overflow:auto}
.zaki-guests-workspace .guests-grid>.card:not(:first-child),.zaki-guests-workspace .guests-grid>.zaki-feature-card{display:none!important}

#tab-ops.yn-tab-panel.active,#tab-settings.yn-tab-panel.active{max-width:100%;overflow-x:hidden}
.ops-shell{width:100%;max-width:none;min-width:0;margin:0;overflow-x:hidden;padding:22px 30px 42px}
.ops-shell *{box-sizing:border-box;min-width:0}
.ops-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;overflow:hidden}
.ops-hero h1{max-width:100%;overflow:hidden;text-overflow:ellipsis;text-wrap:balance;font-size:clamp(30px,3.1vw,44px);letter-spacing:-.04em}
.ops-hero p{max-width:72ch;overflow-wrap:anywhere}
.ops-hero-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.ops-tabs{max-width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.ops-layout,.host-layout,.rpt-two-col,.ops-grid-two,.management-grid,.cashier-workspace-top{grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));max-width:100%}
.ops-kpis,.rpt-kpi-grid,.management-kpis{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));max-width:100%}
.ops-panel,.card,.settings-section{max-width:100%}
.table-wrap,.ops-table-wrap{max-width:100%;overflow:auto;overscroll-behavior:contain}
@media(min-width:960px){.zaki-global-actions{right:30px}.ops-shell{max-width:calc(100vw - var(--rail-width));margin-left:var(--rail-width)}body.ar .ops-shell{margin-left:var(--rail-width);margin-right:0}}
@media(max-width:780px){.zaki-global-actions{top:10px;right:10px}.zaki-global-actions .ops-notify-menu{top:62px;right:10px}.zaki-brief-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ops-hero{grid-template-columns:1fr}.ops-shell{padding:70px 12px calc(72px + env(safe-area-inset-bottom));margin:0;width:100%}.zaki-brief-panel{display:none}}
@media(min-width:960px) and (min-height:860px){.zaki-today-showcase{grid-template-rows:auto auto minmax(0,1fr)}.zaki-showcase-grid{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1.65fr) minmax(300px,.85fr);overflow:hidden}.zaki-brief-panel{align-self:end}.zaki-arrivals-panel{grid-row:1/2}.zaki-readiness-panel,.zaki-bills-panel{min-height:0}.zaki-arrival-empty{min-height:120px}.zaki-bills-list{min-height:92px}}


/* Second browser feedback pass: make completed IA changes visible and rail-aware. */
.staff-switcher-btn{display:inline-flex;align-items:center;gap:7px;width:auto;min-width:44px;padding-inline:10px}
.staff-switcher-initials{display:grid;place-items:center;min-width:22px;height:22px;color:var(--color-accent-strong);background:var(--color-accent-soft);border-radius:999px;font-size:10px;font-weight:900}
.staff-switcher-label{font-size:11px;font-weight:850;letter-spacing:-.01em}
@media(min-width:960px){.ops-shell.page{width:calc(100% - var(--rail-width));max-width:calc(100vw - var(--rail-width));margin-left:var(--rail-width);margin-right:0}.zaki-global-actions{right:30px}}
@media(max-width:780px){.staff-switcher-label{display:none}.ops-shell.page{width:100%;max-width:100%;margin:0}}
.zaki-guests-workspace .guests-grid{grid-template-columns:1fr!important;grid-template-rows:minmax(0,1fr)!important}
.zaki-guests-workspace .guests-grid>.card{display:block!important}
.zaki-guests-workspace .guests-grid>.card:not(#yn-col-bookings-today),.zaki-guests-workspace .guests-grid>.zaki-feature-card{display:none!important}

/* Today bottom rail: service flow inspired by the provided reference, using real Zaki workspaces. */
.zaki-service-flow-panel{grid-column:1/-1;align-self:end;padding:15px 16px 16px;overflow:hidden;background:linear-gradient(160deg,var(--color-surface),color-mix(in srgb,var(--color-accent-soft) 28%,var(--color-surface)) 62%,var(--color-bg-subtle));border:1px solid var(--color-line);border-radius:var(--radius-md);box-shadow:var(--shadow-1)}
.zaki-service-flow-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.zaki-service-flow-head h2{margin:0;color:var(--color-text);font:760 18px/1.05 var(--font-display);letter-spacing:-.035em}
.zaki-flow-view{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 13px;color:var(--color-text-secondary);background:color-mix(in srgb,var(--color-surface-raised) 68%,transparent);border:1px solid var(--color-line);border-radius:999px;font-size:12px;font-weight:800;text-decoration:none;white-space:nowrap;transition:background var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast)}
.zaki-flow-view:hover{color:var(--color-accent-strong);background:var(--color-accent-soft);border-color:rgba(184,138,59,.32)}
.zaki-flow-stage-row{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px;isolation:isolate}
.zaki-flow-stage-row::before{content:"";position:absolute;left:7%;right:7%;top:31px;height:1px;background:linear-gradient(90deg,transparent,var(--color-line-strong),transparent);z-index:0}
.zaki-flow-stage{position:relative;z-index:1;display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:11px;min-height:68px;padding:11px 13px;color:var(--color-text);background:var(--color-surface-raised);border:1px solid var(--color-line);border-radius:18px;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.045);transition:transform var(--motion-fast),border-color var(--motion-fast),background var(--motion-fast)}
.zaki-flow-stage:hover{transform:translateY(-1px);background:var(--color-surface-raised);border-color:rgba(184,138,59,.32)}
.zaki-flow-stage-icon{display:grid;place-items:center;width:44px;height:44px;color:var(--color-accent-strong);background:var(--color-accent-soft);border:1px solid rgba(184,138,59,.24);border-radius:16px}
.zaki-flow-stage-icon .ui-icon{width:22px;height:22px}
.zaki-flow-stage.seated .zaki-flow-stage-icon{color:var(--color-success);background:var(--color-success-soft);border-color:color-mix(in srgb,var(--color-success) 24%,transparent)}
.zaki-flow-stage.ready .zaki-flow-stage-icon{color:var(--color-text-secondary);background:var(--color-bg-subtle)}
.zaki-flow-stage.completed .zaki-flow-stage-icon{color:var(--color-success);background:var(--color-success-soft);border-color:color-mix(in srgb,var(--color-success) 24%,transparent)}
.zaki-flow-stage span:not(.zaki-flow-stage-icon),.zaki-flow-kpi{min-width:0}
.zaki-flow-stage small,.zaki-flow-kpi span{display:block;overflow:hidden;color:var(--color-text-muted);font-size:11px;font-weight:850;letter-spacing:.02em;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
.zaki-flow-stage strong{display:block;margin-top:3px;color:var(--color-text);font-size:clamp(22px,2.2vw,31px);font-variant-numeric:tabular-nums;line-height:.95}
.zaki-flow-kpi-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.zaki-flow-kpi{display:grid;align-content:center;min-height:62px;padding:12px 14px;color:var(--color-text);background:color-mix(in srgb,var(--color-surface-raised) 58%,transparent);border:1px solid var(--color-line);border-radius:15px;text-decoration:none;transition:transform var(--motion-fast),border-color var(--motion-fast),background var(--motion-fast)}
.zaki-flow-kpi:hover{transform:translateY(-1px);background:var(--color-surface-raised);border-color:rgba(184,138,59,.28)}
.zaki-flow-kpi strong{margin-top:5px;overflow:hidden;color:var(--color-text);font-size:clamp(17px,1.55vw,22px);font-variant-numeric:tabular-nums;line-height:1.05;text-overflow:ellipsis;white-space:nowrap}

.zaki-flow-kpi.performance.ok strong{color:var(--color-success)}
.zaki-flow-kpi.performance.warn strong{color:var(--color-danger)}
@media(max-width:780px){.zaki-service-flow-panel{padding:10px;border-radius:16px}.zaki-service-flow-head{margin-bottom:8px}.zaki-service-flow-head h2{font-size:15px}.zaki-flow-view{min-height:34px;padding-inline:10px;font-size:11px}.zaki-flow-stage-row,.zaki-flow-kpi-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.zaki-flow-stage-row::before{display:none}.zaki-flow-stage{grid-template-columns:34px minmax(0,1fr);min-height:56px;padding:8px;border-radius:13px}.zaki-flow-stage-icon{width:32px;height:32px;border-radius:11px}.zaki-flow-stage-icon .ui-icon{width:17px;height:17px}.zaki-flow-stage small,.zaki-flow-kpi span{font-size:10px}.zaki-flow-stage strong{font-size:20px}.zaki-flow-kpi{min-height:54px;padding:9px 10px;border-radius:13px}.zaki-flow-kpi strong{font-size:16px}}
@media(min-width:960px) and (min-height:860px){.zaki-service-flow-panel{align-self:end}.zaki-service-flow-head{margin-bottom:10px}.zaki-flow-stage{min-height:64px}.zaki-flow-kpi{min-height:58px}.zaki-flow-stage strong{font-size:26px}.zaki-flow-kpi strong{font-size:18px}}

/* Global notification clearance: fixed alerts should never cover page actions. */
:root{--zaki-global-actions-clearance:76px}
.zaki-showcase-topbar,.page-header,.ops-hero{padding-right:var(--zaki-global-actions-clearance)}
.zaki-showcase-status,.zaki-header-actions,.ops-hero-actions,.page-header>.btn,.page-header>.ops-btn{margin-right:0}
.zaki-global-actions{width:44px;min-height:44px;justify-content:flex-end}
.zaki-global-actions::before{content:"";position:fixed;top:0;right:0;width:calc(var(--zaki-global-actions-clearance) + max(18px,env(safe-area-inset-right)));height:76px;pointer-events:none;z-index:-1}
body.ar .zaki-showcase-topbar,body.ar .page-header,body.ar .ops-hero{padding-right:var(--zaki-global-actions-clearance);padding-left:0}
@media(min-width:960px){:root{--zaki-global-actions-clearance:82px}.zaki-showcase-topbar,.page-header,.ops-hero{padding-right:var(--zaki-global-actions-clearance)}}
@media(max-width:780px){:root{--zaki-global-actions-clearance:62px}.zaki-showcase-topbar,.page-header,.ops-hero{padding-right:var(--zaki-global-actions-clearance)}.zaki-showcase-status,.ops-hero-actions{max-width:calc(100vw - var(--zaki-global-actions-clearance) - 24px)}}
@media(max-width:520px){:root{--zaki-global-actions-clearance:58px}.zaki-showcase-topbar,.page-header,.ops-hero{padding-right:var(--zaki-global-actions-clearance)}}

/* Today fit pass: Floor Readiness should occupy the full right rail space.
   2026-09-13 (user-caught, "today page is ruined"): grid-column/grid-row
   placement for .zaki-readiness-panel/.zaki-bills-panel used to live HERE
   too, at the same (min-width:960px) and (min-height:860px) breakpoint as
   the block below (line ~4030) -- two separate rule blocks, written at
   different times, both targeting the SAME four panels' grid position at
   the SAME breakpoint. Same specificity, so whichever comes later in the
   file wins per property -- the block below won for column/row, landing
   Automation Today directly on top of Table Status (both at grid-column:2,
   grid-row:1) since the later block's author didn't know Table Status
   already had an explicit position to avoid. Position now lives ONLY in
   the block below; this one keeps just Table Status's internal layout
   (still real, still needed, never touched by the other block). */
@media(min-width:960px) and (min-height:860px){
  .zaki-showcase-grid{grid-auto-flow:row;align-items:stretch}
  .zaki-readiness-panel{display:grid;grid-template-rows:auto minmax(0,1fr);align-self:stretch;min-height:0}
  .zaki-readiness-panel .zaki-command-grid{height:100%;grid-template-rows:repeat(2,minmax(0,1fr));align-content:stretch;overflow-y:auto}
  .zaki-readiness-panel .zaki-command-card{min-height:0;height:100%;align-content:center}
}
@media(max-width:1179px){.zaki-readiness-panel{grid-column:auto;grid-row:auto}.zaki-readiness-panel .zaki-command-grid{height:auto}}

/* Guests tab: the main workspace is always Today's Bookings, not a hidden feature card. */
.zaki-guests-workspace .guests-grid>#yn-col-bookings-today{display:block!important;min-height:0;max-height:none;height:100%;overflow:hidden}
.zaki-guests-workspace .guests-grid>#yn-col-bookings-today .yn-col-body{display:block!important;height:calc(100% - 50px);overflow:hidden}
.zaki-guests-workspace .guests-grid>#yn-col-bookings-today .table-wrap{height:100%;max-height:none;overflow:auto;overscroll-behavior:contain}
.zaki-guests-workspace .guests-grid>#yn-col-bookings-today .empty{height:100%;min-height:260px;align-content:center;justify-items:start}
.zaki-guests-workspace .guests-grid>.card:not(#yn-col-bookings-today),.zaki-guests-workspace .guests-grid>.zaki-feature-card:not(#yn-col-bookings-today){display:none!important}



/* Kitchen display legend: keep timing chips visually separated in the panel header. */
.role-kitchen .kitchen-display-head{grid-template-columns:minmax(160px,1fr) minmax(360px,auto) minmax(190px,1fr);column-gap:18px;align-items:center}
.role-kitchen .kitchen-display-head .kitchen-color-code{display:inline-flex!important;align-items:center;justify-content:center!important;justify-self:center;gap:12px!important;min-width:0;padding:0 10px;white-space:nowrap}
.role-kitchen .kitchen-display-head .kitchen-color-code span{display:inline-flex!important;align-items:center;gap:7px;min-height:34px;margin:0!important;padding:0 12px;background:var(--color-bg-subtle);border:1px solid var(--color-line);border-radius:999px;line-height:1;white-space:nowrap}
.role-kitchen .kitchen-display-head .kitchen-color-code span+span{margin-left:0!important}
.role-kitchen .kitchen-display-head>span:last-child{justify-self:end;white-space:nowrap}
@media(max-width:980px){.role-kitchen .kitchen-display-head{grid-template-columns:1fr;justify-items:start}.role-kitchen .kitchen-display-head .kitchen-color-code{justify-self:start;justify-content:flex-start!important;flex-wrap:wrap;padding:0}.role-kitchen .kitchen-display-head>span:last-child{justify-self:start;white-space:normal}}


/* Orders history tabs: inset the switcher so pills do not touch the card edge. */
.orders-tab-bar{width:auto;margin:0 0 20px;padding:12px 14px;display:inline-flex;align-items:center;gap:8px;background:transparent;border:0;border-bottom:1px solid var(--color-line);border-radius:0;box-shadow:none}
.orders-tab-bar .tab-link{min-height:44px;padding:0 14px;color:var(--color-text-secondary);background:var(--color-bg-subtle);border:1px solid var(--color-line);border-radius:12px;font-size:12px;font-weight:850;text-decoration:none;white-space:nowrap}
.orders-tab-bar .tab-link.active{color:var(--primitive-ink);background:linear-gradient(180deg,#d8ad5b,var(--color-accent));border-color:transparent;box-shadow:0 8px 20px rgba(184,138,59,.20)}
.orders-tab-bar .tab-badge{min-width:22px;height:22px;margin-inline-start:7px;background:color-mix(in srgb,var(--color-surface) 78%,transparent);border:1px solid var(--color-line);font-size:10px}
.orders-tab-bar .tab-link.active .tab-badge{color:var(--primitive-ink);background:rgba(255,255,255,.32);border-color:rgba(17,16,13,.12)}
@media(max-width:620px){.orders-tab-bar{display:flex;width:100%;overflow-x:auto;padding:10px 12px}.orders-tab-bar .tab-link{flex:0 0 auto}}


/* Team workspace: attendance status first, management as a bottom action. */
.ticket.warm,.kitchen-card.warm{border-color:rgba(183,121,47,.75);animation:kitchen-ticket-breathe 2.8s ease-in-out infinite}.ticket.hot,.kitchen-card.hot{border-color:rgba(198,83,69,.9);animation:kitchen-ticket-blink .72s steps(2,end) infinite}@keyframes kitchen-ticket-breathe{0%,100%{box-shadow:var(--shadow-1)}50%{box-shadow:0 0 0 3px rgba(183,121,47,.16),var(--shadow-1)}}@keyframes kitchen-ticket-blink{0%,100%{box-shadow:var(--shadow-1);background:var(--color-surface)}50%{box-shadow:0 0 0 3px rgba(198,83,69,.28),var(--shadow-1);background:var(--color-danger-soft)}}@media (prefers-reduced-motion:reduce){.ticket.warm,.kitchen-card.warm,.ticket.hot,.kitchen-card.hot{animation:none}.ticket.warm,.kitchen-card.warm{box-shadow:0 0 0 2px rgba(183,121,47,.18)}.ticket.hot,.kitchen-card.hot{box-shadow:0 0 0 2px rgba(198,83,69,.24)}}
.zaki-team-page{gap:14px}
.zaki-team-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.zaki-team-metric{position:relative;display:grid;align-content:space-between;min-height:116px;padding:16px 18px;overflow:hidden;color:var(--color-text);background:linear-gradient(180deg,var(--color-surface),var(--color-bg-subtle));border:1px solid var(--color-line);border-radius:var(--radius-md);box-shadow:var(--shadow-1)}
.zaki-team-metric::before{content:"";position:absolute;left:18px;right:18px;bottom:0;height:3px;background:var(--color-success);border-radius:3px 3px 0 0;transform-origin:left}
.zaki-team-metric.late::before{background:var(--color-accent)}
.zaki-team-metric.absent::before{background:var(--color-danger)}
.zaki-team-metric span{color:var(--color-text-secondary);font-size:12px;font-weight:850;letter-spacing:.035em;text-transform:uppercase}
.zaki-team-metric strong{margin-top:10px;color:var(--color-text);font:800 clamp(34px,4vw,48px)/.9 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.055em}
.zaki-team-metric small{margin-top:8px;color:var(--color-text-muted);font-size:11px;line-height:1.35}
.zaki-team-table-card{overflow:hidden}
.zaki-team-actions{grid-template-columns:minmax(0,420px);max-width:420px;margin-top:0}
.zaki-team-actions .zaki-staff-management-card{min-height:96px}
@media(max-width:780px){.zaki-team-metrics{grid-template-columns:1fr}.zaki-team-actions{max-width:none;grid-template-columns:1fr}.zaki-team-metric{min-height:104px}}

/* Attendance panel: Today/History toggle, table, shared Adjust dialog. */
.att-toggle{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--color-line);border-radius:999px;background:var(--color-surface);width:max-content}
.att-toggle a{padding:7px 18px;border-radius:999px;font-size:13px;font-weight:750;color:var(--color-text-secondary);text-decoration:none;transition:background .12s,color .12s}
.att-toggle a:hover{color:var(--color-text)}
.att-toggle a.active{background:var(--color-accent);color:#1c140a}
.att-muted{color:var(--color-text-muted)}
.att-act-btn{min-height:40px;padding:0 14px;font-size:12px;font-weight:700}
.att-scroll>.card{margin-bottom:0}
.att-scroll .card-head{display:flex;align-items:baseline;gap:10px}
.att-scroll .card-head .card-meta{color:var(--color-text-muted);font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.att-modal{width:min(440px,calc(100vw - 32px));padding:22px;border:1px solid var(--color-line);border-radius:var(--radius-lg,18px);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-2,0 24px 60px rgba(0,0,0,.4))}
.att-modal::backdrop{background:rgba(0,0,0,.55)}
.att-modal-title{margin:0 0 6px;font:800 18px/1.25 var(--font-display);letter-spacing:-.02em}
.att-modal-note{margin:0 0 14px;color:var(--color-text-muted);font-size:13px;line-height:1.5}
.att-modal textarea.form-input{width:100%;min-height:76px;resize:vertical}
.att-modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
@media(prefers-reduced-motion:no-preference){.att-modal[open]{animation:attModalIn .14s ease-out}}
@keyframes attModalIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}


/* Reports overview totals: stack label, value, and note with calm KPI spacing. */
.yala-management-view .total-display{display:grid;grid-template-rows:auto 1fr auto;align-content:space-between;gap:10px;min-height:112px;padding:18px 20px;background:linear-gradient(180deg,var(--color-surface),var(--color-bg-subtle))}
.yala-management-view .total-display span,.yala-management-view .total-display small{display:block;color:var(--color-text-muted);font-size:12px;line-height:1.35}
.yala-management-view .total-display span{font-weight:800;letter-spacing:.01em}
.yala-management-view .total-display strong{display:block;margin:0;color:var(--color-accent-strong);font:800 clamp(28px,2.8vw,38px)/1 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.yala-management-view .ops-layout>.total-display{min-width:0}
@media(max-width:780px){.yala-management-view .total-display{min-height:104px;padding:16px}}


/* Inventory workspace: prioritize the working table, then side actions. */
.yala-inventory-layout{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
.yala-inventory-layout .inventory-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}
.inventory-command-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(360px,.85fr);gap:14px;align-items:start}
.inventory-main-stack,.inventory-side-stack{display:grid;gap:14px;min-width:0}
.inventory-all-panel .ops-table-wrap,.inventory-watchlist-panel .ops-table-wrap{max-height:460px;overflow:auto;overscroll-behavior:contain}
.inventory-side-stack .panel-head{min-height:58px;padding:13px 16px}
.inventory-side-stack .panel-head>div{min-width:0;justify-content:flex-end;flex-wrap:wrap}
.inventory-side-stack .panel-head span:not(.yn-col-badge){max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inventory-side-stack .ops-table-wrap{max-height:320px;overflow:auto;overscroll-behavior:contain}
.inventory-side-stack .ops-btn{min-height:40px}
.inventory-panel table th{white-space:nowrap}
.inventory-panel table td{vertical-align:middle}
@media(min-width:1400px){.inventory-command-layout{grid-template-columns:minmax(0,1.45fr) minmax(390px,.8fr)}}
@media(max-width:1100px){.inventory-command-layout{grid-template-columns:1fr}.yala-inventory-layout .inventory-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.inventory-side-stack .ops-table-wrap,.inventory-all-panel .ops-table-wrap{max-height:none}}
@media(max-width:620px){.yala-inventory-layout .inventory-kpis{grid-template-columns:1fr}.inventory-side-stack .panel-head span:not(.yn-col-badge){max-width:none;white-space:normal}.inventory-command-layout{gap:12px}}


/* Loyalty workspace: make the customer table primary and insights secondary. */
.yala-loyalty-layout{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
.yala-loyalty-layout .loyalty-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}
.loyalty-command-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);gap:14px;align-items:start}
.loyalty-main-stack,.loyalty-side-stack{display:grid;gap:14px;min-width:0}
.loyalty-customers-panel .ops-table-wrap{max-height:520px;overflow:auto;overscroll-behavior:contain}
.loyalty-customers-panel table th{white-space:nowrap}
.loyalty-side-stack .rank-list{gap:10px;padding:12px}
.loyalty-side-stack .rank-list>div{grid-template-columns:minmax(120px,.9fr) minmax(0,1.1fr);min-height:58px;padding:12px 14px}
.loyalty-side-stack .rank-list strong{font-size:13px;line-height:1.25}
.loyalty-side-stack .rank-list span{font-size:12px;line-height:1.45;color:var(--color-text-secondary)}
.loyalty-side-stack .panel-head{min-height:58px;padding:13px 16px}
@media(min-width:1400px){.loyalty-command-layout{grid-template-columns:minmax(0,1.35fr) minmax(380px,.7fr)}}
@media(max-width:1100px){.loyalty-command-layout{grid-template-columns:1fr}.yala-loyalty-layout .loyalty-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.loyalty-customers-panel .ops-table-wrap{max-height:none}}
@media(max-width:620px){.yala-loyalty-layout .loyalty-kpis{grid-template-columns:1fr}.loyalty-side-stack .rank-list>div{grid-template-columns:1fr}.loyalty-command-layout{gap:12px}}


/* Menu workspace: make pricing the main working table and guidance secondary. */
.yala-menu-layout{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
.yala-menu-layout .menu-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}
.menu-command-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);gap:14px;align-items:start}
.menu-main-stack,.menu-side-stack{display:grid;gap:14px;min-width:0}
.menu-pricing-panel .ops-table-wrap{max-height:560px;overflow:auto;overscroll-behavior:contain}
.menu-pricing-panel table th{white-space:nowrap}
.menu-side-stack .rank-list{gap:10px;padding:12px}
.menu-side-stack .rank-list>div{grid-template-columns:minmax(130px,.9fr) minmax(0,1.1fr);min-height:58px;padding:12px 14px}
.menu-side-stack .rank-list strong{font-size:13px;line-height:1.25}
.menu-side-stack .rank-list span{font-size:12px;line-height:1.45;color:var(--color-text-secondary)}
.menu-side-stack .panel-head{min-height:58px;padding:13px 16px}
@media(min-width:1400px){.menu-command-layout{grid-template-columns:minmax(0,1.35fr) minmax(380px,.7fr)}}
@media(max-width:1100px){.menu-command-layout{grid-template-columns:1fr}.yala-menu-layout .menu-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.menu-pricing-panel .ops-table-wrap{max-height:none}}
@media(max-width:620px){.yala-menu-layout .menu-kpis{grid-template-columns:1fr}.menu-side-stack .rank-list>div{grid-template-columns:1fr}.menu-command-layout{gap:12px}}


/* Automation workspace: a flat list of sections (range presets, KPIs, panels), not a main+side pairing -- single column throughout. */
.yala-automation-layout{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
/* A source that failed to load renders this in place of a figure -- muted, so it never reads as a number (or as a 0). */
.automation-unavailable{color:var(--color-text-muted);font-weight:600}


/* Settings Control page: keep every control inside the rail-safe content frame. */
.zaki-settings-page{display:grid;gap:16px;min-width:0;width:100%;max-width:100%;box-sizing:border-box}
#tab-settings.yn-tab-panel.active{width:100%;max-width:100%;overflow-x:hidden}
#tab-settings .zaki-settings-page{padding:26px 30px 42px;margin:0 0 0 var(--rail-width);width:calc(100% - var(--rail-width));max-width:calc(100vw - var(--rail-width));overflow-x:hidden}
#tab-settings .zaki-settings-page *{box-sizing:border-box;min-width:0}
#tab-settings .page-header{margin:0;max-width:min(920px,100%)}
#tab-settings .page-sub{max-width:68ch;overflow-wrap:anywhere;line-height:1.45}
#tab-settings .section-label{margin:6px 0 0;color:var(--color-accent-strong)}
#tab-settings .control-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px;align-items:start;width:100%;max-width:100%}
#tab-settings .control-group{min-width:0;overflow:hidden}
#tab-settings .control-group-head{grid-template-columns:42px minmax(0,1fr) auto;min-height:86px;padding:14px 16px}
#tab-settings .control-group-head h2{font-size:14px;line-height:1.2}
#tab-settings .control-group-head p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35;overflow-wrap:anywhere}
#tab-settings .control-item{min-height:46px;padding:0 16px;gap:12px}
#tab-settings .control-item span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tab-settings form{display:grid;gap:16px;width:100%;max-width:100%;margin:0}
#tab-settings .settings-section{margin:0;max-width:100%}
#tab-settings .settings-section-body{padding:16px}
#tab-settings .form-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
#tab-settings .form-input,#tab-settings .form-select,#tab-settings textarea{width:100%;max-width:100%}
@media(min-width:1400px){#tab-settings .control-groups{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){#tab-settings .zaki-settings-page{margin:0;width:100%;max-width:100%;padding:76px 14px calc(82px + env(safe-area-inset-bottom))}.zaki-settings-page{gap:14px}}
@media(max-width:620px){#tab-settings .control-groups{grid-template-columns:1fr}#tab-settings .control-group-head{grid-template-columns:38px minmax(0,1fr);align-items:start}#tab-settings .control-plan-badge{grid-column:2;justify-self:start}#tab-settings .control-item span:first-child{white-space:normal}.settings-section-head{align-items:flex-start;flex-direction:column}}


/* Sidebar utility row: keep the language toggle on-row in Arabic. */
@media(min-width:960px){
  .nav-right{display:grid;grid-template-columns:44px 44px 44px minmax(62px,1fr);gap:5px;align-items:center;width:100%;padding-inline:0}
  .nav-right>.icon-btn,.nav-right>.gear-btn,.nav-right>.ops-notify,.nav-right>.staff-switcher,.nav-right>.staff-switcher-btn,.nav-right>.staff-switcher-btn-locked{width:44px;min-width:44px;max-width:44px}
  .nav-right>.icon-btn,.nav-right>.gear-btn,.nav-right>.staff-switcher-btn,.nav-right>.staff-switcher-btn-locked{padding:0}
  .nav-right .lang-btn{width:100%;min-width:0;padding:0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
  .nav-right>.btn-ghost,.nav-right>.nav-logout{grid-column:1/-1;width:100%;margin-top:4px}
  body.ar .nav-right{grid-template-columns:44px 44px 44px minmax(62px,1fr)}
  body.ar .nav-right .lang-btn{width:100%;min-width:0;padding:0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}


/* Floor host workspace: reservations first, availability as the primary working panel. */
.yala-host-floor-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:14px;align-items:start}
.host-main-stack,.host-side-stack{display:grid;gap:14px;min-width:0;align-content:start}
.host-availability-panel .table-map.compact{max-height:560px;overflow:auto;overscroll-behavior:contain}
.host-waitlist-panel .yn-col-body{max-height:360px;overflow:auto;overscroll-behavior:contain}
.host-waitlist-panel[data-open="false"] .yn-col-body{display:none!important}
@media(max-width:1179px){.yala-host-floor-layout{grid-template-columns:1fr}.host-availability-panel .table-map.compact,.host-waitlist-panel .yn-col-body{max-height:none}}


/* Payments workspace: make the checkout surface breathe and align bill totals cleanly. */
.yala-pos-layout .cashier-workspace-top{grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);align-items:stretch;gap:14px}
.yala-pos-layout .cashier-workspace-top>.ops-tabs{align-self:stretch;min-height:100%;align-content:center;justify-content:start;padding:18px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md);box-shadow:var(--shadow-1)}
.yala-payment-panel{display:grid;grid-template-rows:auto auto auto auto auto;align-content:start;gap:0;overflow:hidden;padding:0;background:linear-gradient(180deg,var(--color-surface),color-mix(in srgb,var(--color-bg-subtle) 72%,var(--color-surface)));border-radius:var(--radius-md)}
.yala-payment-head{min-height:58px;padding:16px 18px;border-bottom:1px solid var(--color-line)}
.yala-payment-head span{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 11px;color:var(--color-text-secondary);background:var(--color-bg-subtle);border:1px solid var(--color-line);border-radius:999px;font-size:12px;font-weight:750}
.yala-payment-items{margin:0;border-bottom:1px solid var(--color-line)}
.yala-payment-items table{min-width:0;width:100%;border-collapse:separate;border-spacing:0}
.yala-payment-items th,.yala-payment-items td{height:50px;padding:0 18px;vertical-align:middle}
.yala-payment-items th:nth-child(2),.yala-payment-items td:nth-child(2){width:86px;text-align:center}
.yala-payment-items th:nth-child(3),.yala-payment-items td:nth-child(3){width:120px;text-align:right;font-variant-numeric:tabular-nums}
.yala-payment-items th:last-child,.yala-payment-items td:last-child{width:44px;padding:0 8px;text-align:center}
.yala-payment-panel .yala-loyalty{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;margin:0;padding:16px 18px;background:transparent;border:0;border-bottom:1px solid var(--color-line)}
.yala-payment-panel .yala-loyalty>div{display:grid;gap:4px;min-width:0}
.yala-payment-panel .yala-loyalty strong,.yala-payment-panel .yala-loyalty span{display:block;line-height:1.35}
.yala-payment-panel .yala-loyalty label{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin:0;padding:0 12px;white-space:nowrap;background:var(--color-bg-subtle);border:1px solid var(--color-line);border-radius:999px}
.yala-payment-panel .payment-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 18px 0;padding:0;background:transparent;border:0;border-radius:0}
.yala-payment-panel .payment-summary>div{display:grid;gap:5px;min-height:66px;padding:13px 14px;background:var(--color-bg-subtle);border:1px solid var(--color-line);border-radius:15px}
.yala-payment-panel .payment-summary span{color:var(--color-text-muted);font-size:11px;font-weight:850;letter-spacing:.025em;line-height:1.2}
.yala-payment-panel .payment-summary strong{color:var(--color-text);font-size:17px;font-variant-numeric:tabular-nums;line-height:1.1}
.yala-payment-panel .payment-summary .payment-total{grid-column:1/-1;grid-template-columns:1fr auto;align-items:end;min-height:74px;background:linear-gradient(135deg,var(--color-accent-soft),var(--color-bg-subtle));border-color:rgba(184,138,59,.28)}
.yala-payment-panel .payment-summary .payment-total strong{color:var(--color-accent-strong);font:800 clamp(30px,3vw,42px)/.95 var(--font-display);letter-spacing:-.045em}
.yala-payment-panel .payment-methods-yala{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:14px 18px 18px;padding:0;border:0}
.yala-payment-panel .payment-methods-yala .ops-btn{min-height:46px;justify-content:center}
.yala-payment-panel .archive-row{margin:-4px 18px 18px;padding-top:0;text-align:right}
@media(max-width:1180px){.yala-pos-layout .cashier-workspace-top{grid-template-columns:1fr}.yala-pos-layout .cashier-workspace-top>.ops-tabs{min-height:auto;padding:10px;overflow-x:auto}.yala-payment-panel .payment-summary{grid-template-columns:1fr 1fr}.yala-payment-panel .payment-summary .payment-total{grid-column:1/-1}}
@media(max-width:620px){.yala-payment-panel .yala-loyalty{grid-template-columns:1fr}.yala-payment-panel .payment-summary,.yala-payment-panel .payment-methods-yala{grid-template-columns:1fr}.yala-payment-items th,.yala-payment-items td{padding:0 12px}.yala-payment-head{padding:14px}.yala-payment-panel .payment-summary,.yala-payment-panel .payment-methods-yala{margin-inline:14px}}


/* POS mode workspace: tabs are the tool header, selected tool owns the full panel. */
.yala-pos-mode-workspace{display:grid;grid-template-columns:1fr!important;gap:0;align-items:stretch;overflow:hidden;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md);box-shadow:var(--shadow-1)}
.yala-pos-mode-workspace>.cashier-mode-tabs{display:flex;width:100%;min-height:62px;align-items:center;justify-content:flex-start;gap:8px;padding:10px 12px;background:linear-gradient(180deg,var(--color-surface-raised),var(--color-surface));border:0;border-bottom:1px solid var(--color-line);border-radius:0;box-shadow:none;overflow-x:auto;scrollbar-width:thin}
.yala-pos-mode-workspace>.cashier-mode-tabs a{flex:0 0 auto;min-height:44px;padding:0 15px;border-radius:13px;white-space:nowrap}
.yala-pos-mode-workspace>.ops-panel{width:100%;min-height:360px;margin:0;border:0;border-radius:0;box-shadow:none;background:transparent}
.yala-pos-mode-workspace>.yala-payment-panel{min-height:390px;background:linear-gradient(180deg,var(--color-surface),color-mix(in srgb,var(--color-bg-subtle) 64%,var(--color-surface)))}
.yala-pos-mode-workspace>.yala-calculator,.yala-pos-mode-workspace>.ops-panel.wide{padding:0}
.yala-pos-mode-workspace>.yala-calculator .panel-head,.yala-pos-mode-workspace>.ops-panel.wide>.panel-head{min-height:58px;padding:16px 18px;border-bottom:1px solid var(--color-line)}
.yala-pos-mode-workspace>.yala-payment-panel .yala-payment-items{border-top:0}
@media(max-width:620px){.yala-pos-mode-workspace>.cashier-mode-tabs{min-height:58px;padding:8px}.yala-pos-mode-workspace>.cashier-mode-tabs a{min-height:42px;padding-inline:12px}.yala-pos-mode-workspace>.ops-panel{min-height:300px}}


/* Floor plan fit pass: keep the spatial map inside the visible app viewport. */
.fp-wrap.floor-plan-page{max-width:none;width:100%;min-height:100dvh;margin:0;padding:26px 30px 42px;overflow-x:hidden}
.floor-plan-page .page-header{align-items:flex-start;margin-bottom:12px;padding-right:var(--zaki-global-actions-clearance)}
.floor-plan-page .fp-legend{justify-content:flex-end;margin-top:0;padding-right:4px}
.floor-plan-page .fp-canvas-card{height:min(68dvh,calc(100dvh - 170px));min-height:420px;display:grid;place-items:center;overflow:hidden;padding:12px;background:linear-gradient(180deg,var(--color-surface),color-mix(in srgb,var(--color-surface-soft) 60%,var(--color-surface)));border-radius:var(--radius-lg)}
.floor-plan-page .fp-svg{display:block;width:100%;min-width:0;height:100%;max-height:100%;object-fit:contain}
.floor-plan-page .card{margin-top:14px!important}
@media(min-width:960px){.fp-wrap.floor-plan-page{width:calc(100% - var(--rail-width));margin-left:var(--rail-width);margin-right:0}.floor-plan-page .fp-canvas-card{height:min(70dvh,calc(100dvh - 172px))}body.ar .fp-wrap.floor-plan-page{margin-left:var(--rail-width);margin-right:0}}
@media(max-width:780px){.fp-wrap.floor-plan-page{padding:72px 12px calc(86px + env(safe-area-inset-bottom))}.floor-plan-page .page-header{display:grid;gap:10px;padding-right:var(--zaki-global-actions-clearance)}.floor-plan-page .fp-legend{justify-content:flex-start}.floor-plan-page .fp-canvas-card{height:auto;min-height:0;overflow:auto}.floor-plan-page .fp-svg{height:auto;aspect-ratio:300/215}}
@media(max-height:760px) and (min-width:960px){.floor-plan-page .fp-canvas-card{height:min(62dvh,calc(100dvh - 156px));min-height:330px}.floor-plan-page .page-title{font-size:clamp(28px,3vw,40px)}}

/* Dark mode neutral ink pass: backgrounds stay in Zaki ink/brass neutrals; green remains semantic only. */

/* Waiter order search and kitchen notes */
.new-order-menu-head{align-items:center}
.new-order-menu-tools{display:flex;align-items:end;justify-content:flex-end;gap:10px;flex-wrap:wrap;min-width:min(520px,100%)}
.new-order-menu-search,.new-order-table-select,.new-order-note-field{display:grid;gap:5px;color:var(--color-text-muted);font-size:10px;font-weight:850;letter-spacing:.055em;text-transform:uppercase}
.new-order-menu-search{min-width:min(240px,100%);flex:1 1 220px}.new-order-table-select{min-width:110px}
.new-order-menu-search input,.new-order-note-field input,.new-order-note-field textarea{min-height:42px;padding:10px 12px;color:var(--color-text);background:var(--color-bg-subtle);border:1px solid var(--color-line);border-radius:12px;font-size:12px;font-weight:650;letter-spacing:0;text-transform:none;outline:0}
.new-order-note-field textarea{min-height:68px;resize:vertical;line-height:1.35}
.new-order-menu-search input:focus,.new-order-note-field input:focus,.new-order-note-field textarea:focus{border-color:var(--color-accent);box-shadow:0 0 0 4px var(--color-accent-soft);background:var(--color-surface)}
.new-order-search-empty{margin:8px 0}.new-order-list[hidden],.new-order-tab[hidden]{display:none!important}
.new-order-item-note-field{margin-top:8px}.new-order-item-note-field span,.new-order-order-note span{font-size:10px}
.new-order-note-status{min-height:14px;color:var(--color-text-muted);font-size:10px;font-weight:800;letter-spacing:0;text-transform:none}.new-order-note-status[data-tone="ok"]{color:var(--color-success)}.new-order-note-status[data-tone="err"]{color:var(--color-danger)}.new-order-note-status[data-tone="busy"]{color:var(--color-accent)}
.new-order-order-note{padding:13px;border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line)}
.new-order-order-note .new-order-note-field{width:100%}
@media(max-width:720px){.new-order-menu-tools{width:100%;justify-content:stretch}.new-order-menu-search,.new-order-table-select{min-width:100%}}
.ticket-order-note,.ticket-item-note{display:grid;gap:4px;margin:0 0 10px;padding:10px 11px;background:color-mix(in srgb,var(--color-accent-soft) 45%,var(--color-surface));border:1px solid color-mix(in srgb,var(--color-accent) 24%,var(--color-line));border-radius:12px}
.ticket-item-row{display:flex;align-items:flex-start;gap:6px;flex-wrap:wrap}.ticket-item-quantity{flex:0 0 auto}.ticket-item-name{min-width:0;flex:1 1 120px}.ticket-item-state{margin-inline-start:auto;white-space:nowrap;text-align:end}
.ticket-item-done{appearance:auto;width:19px;height:19px;flex:0 0 auto;margin:1px 2px 0 0;accent-color:var(--color-success);cursor:pointer}
.ticket-item-done:disabled{cursor:default;opacity:.82}
.ticket-progress{margin:0 0 10px;color:var(--color-accent-strong);font-size:12px;font-weight:800}
.ticket-completed{margin-top:12px;padding-top:10px;border-top:1px dashed var(--color-line)}
.ticket-completed-title{margin-bottom:6px;color:var(--color-success);font-size:12px;font-weight:850;text-transform:uppercase;letter-spacing:.04em}
.ticket-completed ul{opacity:.78}
.ticket-title-actions{display:flex;align-items:center;gap:9px}.ticket-actions .ops-action[data-kitchen-start="1"],.ticket-title-actions .ops-action[data-kitchen-start="1"]{display:inline-flex;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:0 13px;margin:0;text-align:center;line-height:1}.ticket-actions .ops-action{min-height:44px;padding:0 12px;text-align:center;line-height:1}.ticket-actions .ops-action[data-pickup-role="kitchen"]{animation:kitchen-confirm-pulse 1.5s ease-in-out infinite}@keyframes kitchen-confirm-pulse{50%{transform:scale(1.035);box-shadow:0 0 0 5px rgba(184,138,59,.15)}}
.ticket-actions .ops-action[data-kitchen-done="1"]{justify-content:center;min-width:90px}
.ticket-actions .ops-action[data-kitchen-done="1"] svg{display:none}
.pickup-confirmation-copy{display:grid;gap:3px;padding:6px 0}.pickup-confirmation-copy strong{font-size:13px}.pickup-confirmation-copy span{color:var(--color-text-muted);font-size:11px;font-weight:700}.kitchen-pin-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;min-width:44px;min-height:44px;padding:0;color:var(--color-text-muted);background:transparent;border:1px solid var(--color-line);border-radius:10px;cursor:pointer;transition:color var(--motion-fast),background var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast)}.kitchen-pin-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.kitchen-pin-btn:active{transform:scale(.96)}.kitchen-pin-btn[aria-pressed="true"]{color:var(--primitive-ink);background:var(--color-accent);border-color:var(--color-accent)}.kitchen-ticket-list{display:grid;align-content:start;gap:8px}.kitchen-ticket-list .ticket{margin-bottom:0}.kitchen-fullscreen-btn{margin-inline-start:auto;white-space:nowrap}
.kitchen-panel:fullscreen{display:flex;flex-direction:column;width:100vw;height:100dvh;max-width:none;padding:16px;background:var(--color-bg);border:0;border-radius:0}.kitchen-panel:fullscreen .kitchen-display-head{flex:0 0 auto;padding:0 4px 12px;background:transparent;border:0}.kitchen-panel:fullscreen .kitchen-color-code,.kitchen-panel:fullscreen .kitchen-display-head>span{display:none}.kitchen-panel:fullscreen .kitchen-board{flex:1 1 auto;min-height:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;overflow:hidden}.kitchen-panel:fullscreen .kanban-col{display:flex;flex-direction:column;min-height:0;padding:12px}.kitchen-panel:fullscreen .kitchen-ticket-list{flex:1 1 auto;min-height:0;overflow-y:auto;padding-inline-end:4px;scrollbar-gutter:stable}.kitchen-panel:fullscreen .ticket{margin-bottom:0}@media(max-width:800px){.kitchen-panel:fullscreen{padding:10px}.kitchen-panel:fullscreen .kitchen-board{grid-template-columns:1fr;gap:8px;overflow-y:auto}.kitchen-panel:fullscreen .kanban-col{min-height:28dvh}.kitchen-panel:fullscreen .kitchen-ticket-list{overflow-y:auto}}
@media(prefers-reduced-motion:reduce){.ticket-actions .ops-action[data-pickup-role="kitchen"]{animation:none}}
.ticket-order-note span,.ticket-item-note span{color:var(--color-accent-strong);font-size:10px;font-weight:850;letter-spacing:.05em;text-transform:uppercase}
.ticket-order-note strong,.ticket-item-note strong{color:var(--color-text);font-size:12px;line-height:1.4}
.ticket-diet-alert{display:grid;gap:4px;margin:0 0 10px;padding:10px 11px;background:var(--color-danger-soft);border:1px solid color-mix(in srgb,var(--color-danger) 40%,var(--color-line));border-radius:12px}
.ticket-diet-alert>span{color:var(--color-danger);font-size:10px;font-weight:850;letter-spacing:.05em;text-transform:uppercase}
.ticket-diet-alert>strong{color:var(--color-text);font-size:12px;line-height:1.4}
.ticket-diet-alert ul{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:3px}
.ticket-diet-alert li{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;line-height:1.4}
.ticket-diet-alert li span{color:var(--color-danger);font-weight:700}
.ticket-item-note{margin-top:7px;padding:8px 10px;background:var(--color-bg-subtle)}
.waiter-pickup-board{padding:14px}.waiter-pickup-ticket-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}.waiter-pickup-ticket-grid .ticket{margin:0;min-height:100%}.pickup-ticket-items{display:grid;gap:8px;margin:12px 0 0;padding:12px;border:1px solid var(--color-line);border-radius:12px}.pickup-ticket-items legend{padding:0 4px;color:var(--color-text-muted);font-size:10px;font-weight:850;letter-spacing:.06em;text-transform:uppercase}.pickup-ticket-item{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 9px;border:1px solid var(--color-line);border-radius:10px;cursor:pointer;transition:border-color var(--motion-fast),background var(--motion-fast)}.pickup-ticket-item:hover{border-color:var(--color-accent);background:var(--color-accent-soft)}.pickup-ticket-item input{width:20px;height:20px;accent-color:var(--color-success);flex:none}.pickup-ticket-item span{display:grid;gap:2px;min-width:0}.pickup-ticket-item strong{font-size:12px}.pickup-ticket-item small,.pickup-ticket-items p{margin:0;color:var(--color-text-muted);font-size:11px}.pickup-ticket-item input:checked+span strong{color:var(--color-success);text-decoration:line-through}.ticket.pickup-complete{opacity:.58;transition:opacity var(--motion-fast)}
.orders-back-link{min-height:44px}.order-row-actions,.order-correction-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.order-cancel-dialog{width:min(100% - 32px,520px);padding:0;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-line);border-radius:16px;box-shadow:var(--shadow-3)}.order-cancel-dialog::backdrop{background:rgba(0,0,0,.62)}.order-cancel-card{display:grid;gap:12px;padding:20px}.order-cancel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.order-cancel-head h2{margin:0;font-size:21px}.order-cancel-copy{margin:0;color:var(--color-text-secondary);font-size:13px;line-height:1.5}.order-cancel-toggle{display:flex;align-items:center;gap:10px;min-height:44px;font-size:13px;font-weight:700}.order-cancel-toggle input{width:18px;height:18px;accent-color:var(--color-accent)}.order-cancel-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}.order-cancel-actions .btn{min-height:44px}.order-cancel-error{min-height:18px;margin:0;color:var(--color-danger);font-size:12px;font-weight:700}.order-item-cancel-list{display:grid;gap:8px;margin:0;padding:0;border:0}.order-item-cancel-list legend{padding:0;color:var(--color-text-muted);font-size:11px;font-weight:850;text-transform:uppercase}.order-item-cancel-option{display:flex;align-items:center;gap:10px;min-height:48px;padding:9px 10px;border:1px solid var(--color-line);border-radius:10px;cursor:pointer}.order-item-cancel-option.is-locked{opacity:.56;cursor:not-allowed}.order-item-cancel-option input{width:18px;height:18px;accent-color:var(--color-danger)}.order-item-cancel-option span{display:grid;gap:2px}.order-item-cancel-option small{color:var(--color-text-muted);font-size:11px}
.order-cancel-reasons{display:flex;gap:8px;flex-wrap:wrap;margin:0;padding:0;border:0}.order-cancel-reasons legend{width:100%;padding:0;color:var(--color-text-muted);font-size:11px;font-weight:850;text-transform:uppercase}.order-cancel-reason-chip{min-height:44px;padding:8px 12px;border:1px solid var(--color-line);border-radius:999px;background:var(--color-bg-subtle);color:var(--color-text);font:inherit;font-size:12px;font-weight:750;cursor:pointer;transition:background var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast)}.order-cancel-reason-chip:hover,.order-cancel-reason-chip:focus-visible{border-color:var(--color-danger);background:color-mix(in srgb,var(--color-danger) 12%,var(--color-surface));outline:none}.order-cancel-reason-chip[aria-pressed="true"]{border-color:var(--color-danger);background:var(--color-danger);color:#fff}
.order-cancel-head .modal-close{display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;line-height:1;font-size:22px;text-align:center}
.order-cancel-reason-chip:hover,.order-cancel-reason-chip:focus-visible{border-color:var(--color-accent);background:var(--color-accent-soft);color:var(--color-text);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 18%,transparent)}
.order-cancel-reason-chip[aria-pressed="true"]{border-color:var(--color-accent);background:linear-gradient(180deg,color-mix(in srgb,var(--color-accent) 82%,#fff),var(--color-accent));color:var(--primitive-ink);box-shadow:none}
.order-item-cancel-option input{accent-color:var(--color-accent)}
.order-item-cancel-choice{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer}
.order-item-cancel-counter{display:flex;align-items:center;gap:4px;flex-shrink:0;border:1px solid var(--color-line);border-radius:10px;padding:2px}
.order-item-cancel-counter button{display:grid;place-items:center;width:36px;height:36px;padding:0;background:transparent;border:0;color:var(--color-text);font-size:22px;cursor:pointer}
.order-item-cancel-counter button:disabled{opacity:.35;cursor:default}
.order-item-cancel-counter output{min-width:22px;text-align:center;font-weight:750}
.order-item-cancel-option.is-started{border-color:color-mix(in srgb,var(--color-accent) 56%,var(--color-line));background:var(--color-accent-soft)}
.order-item-cancel-option.is-served{opacity:.58}
.order-item-started-confirmation{display:grid;gap:9px;padding:12px;border:1px solid color-mix(in srgb,var(--color-accent) 58%,var(--color-line));border-radius:12px;background:var(--color-accent-soft)}
.order-item-started-confirmation strong{color:var(--color-accent-strong);font-size:13px}.order-item-started-confirmation p{margin:0;color:var(--color-text-secondary);font-size:12px;line-height:1.45}.order-item-started-confirmation ul{display:grid;gap:4px;margin:0;padding-left:19px;font-size:12px}.order-item-started-actions{display:flex;flex-wrap:wrap;gap:8px}.order-item-started-actions .btn{min-height:40px}
@media(max-width:720px){.waiter-pickup-board{padding:10px}.waiter-pickup-ticket-grid{grid-template-columns:1fr}.page-header:has(.orders-back-link){align-items:flex-start}.order-cancel-actions{flex-direction:column-reverse}.order-cancel-actions .btn{width:100%}}



/* Ali annotation pass - dashboard surface cleanup, 2026-08-06 */
.global-search-btn-label { display: none; }
@media (min-width: 960px) {
  .zaki-app-rail .nav-right > .global-search {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 380;
    width: min(540px, calc(100vw - var(--rail-width, 250px) - 330px));
    min-width: 320px;
  }
  .zaki-app-rail .global-search-btn {
    width: 100%;
    height: 46px;
    border-radius: 999px;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 18px;
    background: linear-gradient(135deg, rgba(238,237,231,.1), rgba(184,138,59,.16));
    border-color: rgba(238,237,231,.18);
    color: var(--text, #eeede7);
    box-shadow: 0 18px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  }
  .zaki-app-rail .global-search-btn-label {
    display: inline;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(238,237,231,.68);
    font-size: 13px;
    letter-spacing: .01em;
  }
  .zaki-app-rail .global-search-panel {
    position: fixed;
    top: 70px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(580px, calc(100vw - var(--rail-width, 250px) - 260px));
  }
}
.nav-settings-shortcut,
.nav-settings-shortcut.icon-btn,
.zaki-app-rail .icon-btn {
  overflow: visible;
}
.nav-settings-shortcut svg,
.zaki-app-rail .icon-btn svg {
  flex: 0 0 auto;
}
.ops-notify-btn .notify-count,
.notify-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #d7ad57;
  color: #12100d;
  border: 1px solid rgba(18,16,13,.55);
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 0 0 4px rgba(184,138,59,.18);
}
.ops-notify-btn.has-alerts {
  animation: zaki-bell-pulse 1.35s ease-in-out infinite;
  box-shadow: 0 0 0 1px rgba(184,138,59,.55), 0 0 30px rgba(184,138,59,.38);
}
@keyframes zaki-bell-pulse {
  0%, 100% { transform: rotate(0deg); filter: drop-shadow(0 0 0 rgba(184,138,59,0)); }
  20% { transform: rotate(-9deg); }
  42% { transform: rotate(8deg); filter: drop-shadow(0 0 12px rgba(184,138,59,.7)); }
  64% { transform: rotate(-4deg); }
}
.zaki-automation-box {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(184,138,59,.18);
  border-radius: 20px;
  background: radial-gradient(circle at top left, rgba(184,138,59,.16), transparent 38%), rgba(238,237,231,.035);
  font-family: inherit;
  color: var(--text, #eeede7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.zaki-automation-eyebrow {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(238,237,231,.86);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
}
.zaki-automation-box .auto-metric {
  min-height: 86px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(18,16,13,.62);
  border: 1px solid rgba(238,237,231,.1);
}
.zaki-automation-box .auto-metric strong {
  display: block;
  font-family:var(--font-display,"Plus Jakarta Sans",sans-serif);
  font-size: clamp(28px, 4vw, 46px);
  line-height: .92;
  color: #eeede7;
}
.zaki-automation-box .auto-metric span {
  display: block;
  margin-top: 8px;
  color: rgba(238,237,231,.58);
  font-size: 12px;
}
.zaki-command-card-static,
.zaki-flow-stage,
.zaki-flow-kpi {
  cursor: default !important;
}
.zaki-command-card-static:hover,
.zaki-flow-stage:hover,
.zaki-flow-kpi:hover {
  transform: none !important;
}
.table-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.table-actions .ops-btn,
.table-actions .merge-clear {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
}
.merge-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.merge-target-select {
  min-height: 34px;
  max-width: 110px;
  padding: 0 8px;
  color: var(--color-text);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.host-reservations-walkin-wrap {
  --walkin-btn-width: 128px;
  display: inline-flex;
  flex: 0 0 auto;
  width: var(--walkin-btn-width);
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
.host-reservations-walkin-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 0;
  width: var(--walkin-btn-width);
  height: 44px;
  padding: 0 12px !important;
  border-radius: 14px !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
.host-reservations-walkin-btn svg,
.host-reservations-walkin-btn .ui-icon {
  width: 18px !important;
  height: 18px !important;
}
.host-reservations-walkin-btn span {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  color: inherit;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap !important;
}
.claim-disabled {
  opacity: .62;
  cursor: not-allowed;
}
.new-order-menu-head {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end !important;
  gap: 16px !important;
}
.new-order-menu-tools {
  display: grid !important;
  grid-template-columns: minmax(150px, 180px) minmax(180px, 1fr) minmax(120px, 160px);
  gap: 12px !important;
  width: 100%;
  min-width: 0;
}
.new-order-menu-tools .ops-field,
.new-order-menu-tools input,
.new-order-menu-tools select {
  min-width: 0;
  width: 100%;
}
.new-order-menu-picker{margin:0;min-width:0}.new-order-menu-select{display:grid;gap:5px;color:var(--color-text-muted);font-size:10px;font-weight:850;letter-spacing:.055em;text-transform:uppercase}.new-order-menu-select select{min-height:42px;padding:10px 12px;color:var(--color-text);background:var(--color-bg-subtle);border:1px solid var(--color-line);border-radius:12px;font:inherit;letter-spacing:0;text-transform:none;cursor:pointer}.new-order-menu-select select:focus{border-color:var(--color-accent);box-shadow:0 0 0 4px var(--color-accent-soft);outline:0}
.ops-workspace-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:6px;background:color-mix(in srgb,var(--color-surface) 92%,var(--color-bg-subtle));border:1px solid var(--color-line);border-radius:16px;box-shadow:var(--shadow-1)}.ops-workspace-bar .ops-tabs{flex:1 1 auto;min-width:0;margin:0;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}.ops-workspace-actions{flex:0 0 auto;margin-left:auto}.ops-workspace-actions .ops-btn{min-height:44px}
.role-kitchen .kitchen-display-head .kitchen-color-code {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(135px, 1fr));
  gap: 10px !important;
  align-items: center;
  white-space: normal !important;
}
.role-kitchen .kitchen-color-code span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(238,237,231,.05);
  border: 1px solid rgba(238,237,231,.1);
}
.yala-payment-panel .payment-methods-yala {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.yala-payment-panel .payment-methods-yala .ops-btn {
  min-height: 54px !important;
  padding: 0 14px !important;
  border-radius: 16px !important;
  font-size: 13px !important;
  justify-content: center !important;
  gap: 8px !important;
}
.yala-payment-panel .payment-methods-yala .ops-btn svg,
.yala-payment-panel .payment-methods-yala .ops-btn .ui-icon {
  width: 18px !important;
  height: 18px !important;
  transform: none !important;
}
.cashier-mode-tabs a,
.cashier-mode-tabs .cashier-mode-tab {
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.cashier-mode-tabs a:not(.active):hover,
.cashier-mode-tabs .cashier-mode-tab:not(.active):hover {
  background: rgba(238,237,231,.08);
  color: #eeede7;
}
.ops-pin-btn {
  gap: 8px !important;
  min-width: 78px;
  justify-content: center;
}
.ops-pin-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(184,138,59,.14);
}
.ops-filter-row,
.bill-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(238,237,231,.11);
  border-radius: 18px;
  background: rgba(238,237,231,.035);
}
.ops-filter-row .ops-chip,
.bill-filters .ops-chip,
.bill-filters a,
.bill-filters button {
  border-radius: 999px !important;
  border: 1px solid rgba(238,237,231,.12) !important;
  background: rgba(18,16,13,.7) !important;
  color: rgba(238,237,231,.72) !important;
  min-height: 34px;
  padding: 0 12px !important;
}
.ops-filter-row .active,
.bill-filters .active {
  background: linear-gradient(135deg, #cfa85a, #a9792f) !important;
  color: #12100d !important;
}
.inventory-command-layout {
  grid-template-columns: minmax(0, 1fr) !important;
}
.inventory-side-stack {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.inventory-watchlist-panel {
  grid-column: 1 / -1;
  order: 3;
}
#yn-col-inv-po { grid-column: 1 / -1; order: 1; }
#yn-col-inv-recipes { grid-column: 1 / -1; order: 4; }
.inventory-side-stack .ops-table-wrap {
  max-height: none !important;
}
.inventory-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}
.inventory-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: min(320px, 45vw);
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(238,237,231,.12);
  background: rgba(18,16,13,.68);
  color: rgba(238,237,231,.52);
}
.inventory-search span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(184,138,59,.9);
}
.inventory-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #eeede7;
}
.fp-canvas-card {
  overflow: hidden;
}
.floor-plan-page .fp-svg,
.fp-svg {
  max-width: 100%;
  height: auto;
  overflow: visible;
}
#tab-settings .zaki-settings-page {
  gap: 20px;
}
#tab-settings .zaki-settings-page .page-header {
  max-width: 920px;
  margin-bottom: 4px;
}
#tab-settings .control-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
#tab-settings .control-group {
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(238,237,231,.06), rgba(18,16,13,.76));
}
#tab-settings .control-group-head {
  min-height: auto;
  padding-bottom: 12px;
}
#tab-settings .control-group-title h2 {
  font-size: clamp(18px, 2vw, 24px);
}
#tab-settings .control-link {
  min-height: 48px;
}
@media (max-width: 1100px) {
  #tab-settings .control-groups,
  .inventory-side-stack {
    grid-template-columns: 1fr 1fr;
  }
  .zaki-automation-box,
  .yala-payment-panel .payment-methods-yala {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 720px) {
  .new-order-menu-head,
  .new-order-menu-tools,
  #tab-settings .control-groups,
  .inventory-side-stack,
  .zaki-automation-box,
  .yala-payment-panel .payment-methods-yala {
    grid-template-columns: 1fr !important;
  }
  .inventory-search {
    min-width: 100%;
  }
  .ops-workspace-bar{align-items:stretch;flex-wrap:wrap}.ops-workspace-bar .ops-tabs{flex-basis:100%}.ops-workspace-actions{width:100%;margin-left:0}.ops-workspace-actions .ops-btn{width:100%;justify-content:center}
}


/* Ali follow-up: keep global search clear of the Today title, 2026-08-07 */
@media (min-width: 960px) {
  .zaki-app-rail .nav-right > .global-search {
    top: max(18px, env(safe-area-inset-top));
    left: calc(var(--rail-width, 250px) + clamp(360px, 43vw, 650px));
    transform: none;
    width: clamp(300px, 34vw, 520px);
    min-width: 0;
  }
  .zaki-app-rail .global-search-panel {
    top: 74px;
    left: calc(var(--rail-width, 250px) + clamp(360px, 43vw, 650px));
    transform: none;
    width: clamp(340px, 38vw, 560px);
  }
  .zaki-showcase-topbar > div:first-child {
    max-width: min(34vw, 390px);
  }
  /* Superseded at every width by the "Global search canonical placement"
     !important block further down (dashboard.css:1701+) -- these two
     rules never win the cascade today. Given a body:not(.rail-open)
     sibling anyway (audit finding, not a live bug): relying on a
     later block to keep a --rail-width-dependent rule harmless is
     fragile, and this is cheap insurance against that ordering
     changing later. */
  body:not(.rail-open) .zaki-app-rail .nav-right > .global-search {
    left: clamp(360px, 43vw, 650px);
  }
  body:not(.rail-open) .zaki-app-rail .global-search-panel {
    left: clamp(360px, 43vw, 650px);
  }
}
@media (min-width: 960px) and (max-width: 1180px) {
  .zaki-app-rail .nav-right > .global-search,
  .zaki-app-rail .global-search-panel {
    left: calc(var(--rail-width, 250px) + 310px);
    width: min(360px, calc(100vw - var(--rail-width, 250px) - 560px));
  }
  /* Superseded, same as above -- kept in sync for the same reason. */
  body:not(.rail-open) .zaki-app-rail .nav-right > .global-search,
  body:not(.rail-open) .zaki-app-rail .global-search-panel {
    left: 310px;
    width: min(360px, calc(100vw - 560px));
  }
}


/* Ali follow-up adjustment: position search in the header gap, not over the title/actions */
@media (min-width: 960px) {
  .zaki-app-rail .nav-right > .global-search {
    left: calc(var(--rail-width, 250px) + 270px);
    width: min(430px, calc(100vw - var(--rail-width, 250px) - 670px));
    max-width: 430px;
  }
  .zaki-app-rail .global-search-panel {
    left: calc(var(--rail-width, 250px) + 270px);
    width: min(500px, calc(100vw - var(--rail-width, 250px) - 610px));
    max-width: 500px;
  }
  /* Superseded at every width by the canonical !important block
     (dashboard.css:1701+) -- see the note on the identical pattern
     above. Kept conditional anyway for the same defense-in-depth
     reason. */
  body:not(.rail-open) .zaki-app-rail .nav-right > .global-search {
    left: 270px;
    width: min(430px, calc(100vw - 670px));
  }
  body:not(.rail-open) .zaki-app-rail .global-search-panel {
    left: 270px;
    width: min(500px, calc(100vw - 610px));
  }
}
@media (min-width: 960px) and (max-width: 1180px) {
  .zaki-app-rail .nav-right > .global-search {
    left: calc(var(--rail-width, 250px) + 250px);
    width: 300px;
  }
  .zaki-app-rail .global-search-panel {
    left: calc(var(--rail-width, 250px) + 250px);
    width: 360px;
  }
  .zaki-app-rail .global-search-btn-label {
    max-width: 210px;
  }
  /* Superseded, same as above. */
  body:not(.rail-open) .zaki-app-rail .nav-right > .global-search {
    left: 250px;
  }
  body:not(.rail-open) .zaki-app-rail .global-search-panel {
    left: 250px;
  }
}


/* Ali floor-plan rebuild: room-scale map, no zoomed/overlapping legacy coordinates */
.floor-plan-page .fp-canvas-card {
  height: auto !important;
  min-height: 0 !important;
  padding: 18px !important;
  overflow: visible !important;
  display: block !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(184,138,59,.14), transparent 32%),
    linear-gradient(180deg, rgba(238,237,231,.055), rgba(18,16,13,.78)) !important;
  border: 1px solid rgba(238,237,231,.12);
  box-shadow: 0 24px 70px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06);
}
.floor-plan-page .fp-svg {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 960 / 560 !important;
  overflow: visible !important;
}
.fp-map-bg {
  fill: rgba(18,16,13,.62);
  stroke: rgba(238,237,231,.08);
  stroke-width: 1.5;
}
.fp-zone-indoor,
.fp-zone-outdoor {
  stroke: rgba(238,237,231,.16);
  stroke-width: 1.8;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.16));
}
.fp-zone-indoor {
  fill: rgba(238,237,231,.035);
}
.fp-zone-outdoor {
  fill: rgba(184,138,59,.075);
}
.fp-zone-grid {
  fill: url(#fp-grid);
  opacity: .18;
  pointer-events: none;
}
.fp-grid-line {
  fill: none;
  stroke: rgba(238,237,231,.22);
  stroke-width: .8;
}
.fp-wall-line {
  stroke: rgba(238,237,231,.18) !important;
  stroke-width: 5 !important;
  stroke-dasharray: 16 16 !important;
  stroke-linecap: round;
}
.fp-zone-lbl {
  fill: rgba(238,237,231,.64) !important;
  font: 900 22px/1 var(--font-body) !important;
  letter-spacing: 5px !important;
}
.fp-zone-note {
  fill: rgba(238,237,231,.38);
  font: 700 13px/1 var(--font-body);
  letter-spacing: .02em;
}
.fp-tile[data-resource-id] {
  cursor: pointer;
  outline: none;
  transition: opacity .18s ease, filter .18s ease, transform .18s ease;
}
.fp-tile[data-resource-id]:hover {
  filter: drop-shadow(0 0 18px rgba(184,138,59,.38));
}
.fp-table circle:first-child,
.fp-bar rect {
  stroke-width: 4 !important;
}
.fp-table-inner {
  fill: rgba(18,16,13,.52) !important;
  stroke: rgba(238,237,231,.1) !important;
  stroke-width: 1 !important;
}
.fp-avail circle:first-child,
.fp-avail.fp-bar rect {
  fill: rgba(79,111,90,.25) !important;
  stroke: #7fb093 !important;
}
.fp-occupied circle:first-child,
.fp-occupied.fp-bar rect {
  fill: rgba(190,91,86,.24) !important;
  stroke: #ee7771 !important;
}
.fp-tile-name {
  fill: #f7f6f2 !important;
  font: 900 20px/1 var(--font-display) !important;
  dominant-baseline: middle;
  text-anchor: middle;
  letter-spacing: -.03em;
  paint-order: stroke;
  stroke: rgba(18,16,13,.72);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.fp-tile-cap {
  fill: rgba(238,237,231,.72) !important;
  font: 800 13px/1 var(--font-body) !important;
  dominant-baseline: middle;
  text-anchor: middle;
}
.fp-bar .fp-tile-name {
  text-anchor: start;
  font-size: 21px !important;
}
.fp-bar .fp-tile-cap {
  font-size: 15px !important;
}
.fp-tile.fp-toggling {
  opacity: .45;
  pointer-events: none;
}
.fp-tile[data-resource-id]:focus-visible {
  filter: drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 0 18px rgba(184,138,59,.7));
}
@media (max-width: 780px) {
  .floor-plan-page .fp-canvas-card {
    overflow-x: auto !important;
    padding: 12px !important;
  }
  .floor-plan-page .fp-svg {
    min-width: 760px !important;
  }
}




/* Menu Management category controls */
.menu-category-disclosure { overflow: hidden; }
.menu-category-summary { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; cursor: pointer; list-style: none; }
.menu-category-summary::-webkit-details-marker { display: none; }
.menu-category-summary:focus-visible { outline: 3px solid rgba(184,138,59,.42); outline-offset: -3px; border-radius: 18px; }
.menu-category-summary-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-display,"Plus Jakarta Sans",sans-serif); font-weight: 800; }
.menu-category-summary-title::before { content: '+'; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; background: rgba(184,138,59,.14); color: var(--gold); font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 900; }
.menu-category-disclosure[open] .menu-category-summary-title::before { content: '-'; }
.menu-category-body { border-top: 1px solid var(--line); padding: 16px 18px 18px; display: grid; gap: 14px; }
.menu-category-add-form { display: grid; grid-template-columns: minmax(180px,1fr) auto; gap: 10px; align-items: end; }
.menu-category-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.menu-category-row { display: grid; grid-template-columns: 42px minmax(220px,1fr) 92px auto auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--su1); }
.menu-category-rank { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: rgba(184,138,59,.14); color: var(--gold); font-weight: 900; font-family: var(--font-display,"Plus Jakarta Sans",sans-serif); }
.menu-category-rename-form { display: grid; grid-template-columns: minmax(160px,1fr) auto; gap: 8px; align-items: center; margin: 0; }
.menu-category-count { color: var(--t3); font-size: 12px; font-weight: 700; white-space: nowrap; }
.menu-category-move-group { display: flex; gap: 6px; }
.menu-category-move-group form, .menu-category-remove { margin: 0; }
.menu-category-move-group .btn { min-height: 38px; min-width: 38px; padding: 0; }
.menu-category-remove .btn { min-height: 38px; }
.menu-category-empty { padding: 14px; border: 1px dashed var(--line); border-radius: 16px; color: var(--t3); }
@media (max-width: 860px) { .menu-category-row { grid-template-columns: 38px 1fr; } .menu-category-count, .menu-category-move-group, .menu-category-remove { grid-column: 2; } .menu-category-add-form, .menu-category-rename-form { grid-template-columns: 1fr; } }

/* Feature 7b — menu selector tabs + Manage Menus cards */
.menu-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.menu-tab { display: flex; flex-direction: column; gap: 2px; padding: 9px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--su1); color: var(--t1); font-weight: 700; font-size: 13px; line-height: 1.2; text-decoration: none; transition: background .12s, border-color .12s; }
.menu-tab:hover { border-color: var(--gold); }
.menu-tab.is-active { background: var(--gold); border-color: var(--gold); color: #1b1206; }
.menu-tab-sub { font-weight: 600; font-size: 11px; opacity: .72; }
.menu-tab.is-active .menu-tab-sub { opacity: .82; }
.menu-scope-banner { margin: -6px 0 16px; padding: 10px 14px; border-radius: 14px; background: rgba(184,138,59,.12); border: 1px solid rgba(184,138,59,.3); font-size: 13px; color: var(--t2); }
.menu-scope-banner a { color: var(--gold); font-weight: 700; }

.menu-mini-list { display: grid; gap: 10px; }
.menu-mini-card { border: 1px solid var(--line); border-radius: 16px; background: var(--su1); overflow: hidden; }
.menu-mini-summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; min-height: 56px; }
.menu-mini-summary::-webkit-details-marker { display: none; }
.menu-mini-summary:focus-visible { outline: 3px solid rgba(184,138,59,.42); outline-offset: -3px; }
.menu-mini-name { font-family: var(--font-display,"Plus Jakarta Sans",sans-serif); font-weight: 800; font-size: 15px; }
.menu-mini-meta { color: var(--t3); font-size: 12px; font-weight: 600; }
.menu-mini-summary .badge { font-size: 10px; }
.menu-mini-chevron { margin-inline-start: auto; color: var(--t3); font-size: 20px; transition: transform .15s; }
.menu-mini-card[open] .menu-mini-chevron { transform: rotate(90deg); }
.menu-mini-body { border-top: 1px solid var(--line); padding: 16px; display: grid; gap: 14px; }
.menu-item-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; max-height: 260px; overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--su2); }
.menu-item-pick { display: flex; align-items: center; gap: 7px; font-size: 12px; min-height: 30px; }
.menu-create-form { display: grid; gap: 10px; max-width: 520px; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
@media (max-width: 620px) { .menu-mini-meta { display: none; } }

/* Automation Today: compact, functional KPI/action cards in the Zaki dashboard style */
.zaki-automation-panel {
  grid-template-rows: auto 1fr !important;
  min-width: 0;
}
.zaki-automation-shell,
.zaki-automation-box,
.zaki-automation-lines,
.zaki-automation-eyebrow {
  all: unset;
}
.zaki-automation-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  height: 100%;
}
.zaki-automation-action {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "icon copy" "value value";
  align-items: start;
  gap: 12px 14px;
  min-width: 0;
  min-height: 112px;
  padding: 16px;
  color: var(--color-text);
  text-decoration: none;
  border: 1px solid var(--color-line);
  border-radius: 18px;
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.045);
  transition: transform var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast), box-shadow var(--motion-fast);
}
.zaki-automation-action::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--color-accent);
  opacity: .8;
  transform: scaleX(.24);
  transform-origin: left;
  transition: transform var(--motion-base) var(--ease-out);
}
.zaki-automation-action:hover,
.zaki-automation-action:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(184,138,59,.34);
  background: var(--color-surface);
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.06);
}
.zaki-automation-action:hover::after,
.zaki-automation-action:focus-visible::after {
  transform: scaleX(1);
}
.zaki-automation-action:focus-visible {
  outline: 3px solid rgba(184,138,59,.32);
  outline-offset: 3px;
}
.zaki-automation-icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--color-accent-strong);
  border: 1px solid rgba(184,138,59,.24);
  border-radius: 15px;
  background: var(--color-accent-soft);
}
.zaki-automation-icon.green {
  color: var(--color-success);
  background: var(--color-success-soft);
  border-color: color-mix(in srgb, var(--color-success) 24%, transparent);
}
.zaki-automation-icon.amber {
  color: var(--color-accent-strong);
  background: var(--color-accent-soft);
}
.zaki-automation-icon svg {
  width: 20px;
  height: 20px;
}
.zaki-automation-action span:nth-child(2) {
  grid-area: copy;
  display: grid;
  gap: 4px;
  min-width: 0;
  align-self: center;
}
.zaki-automation-action strong {
  color: var(--color-text);
  font-size: clamp(12px, 1.1vw, 14px);
  font-weight: 850;
  letter-spacing: -.01em;
  line-height: 1.18;
  white-space: normal;
}
.zaki-automation-action small {
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
}
.zaki-automation-action b {
  grid-area: value;
  align-self: end;
  justify-self: end;
  max-width: 100%;
  overflow: hidden;
  color: var(--color-text);
  font: 900 clamp(26px, 2.55vw, 36px)/.95 var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.07em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:root.light .zaki-automation-action,
:root[data-theme="light"] .zaki-automation-action {
  background: #fffefa;
  border-color: rgba(17,23,22,.10);
  box-shadow: 0 14px 32px rgba(17,23,22,.055), inset 0 1px 0 rgba(255,255,255,.9);
}
:root.light .zaki-automation-action:hover,
:root.light .zaki-automation-action:focus-visible,
:root[data-theme="light"] .zaki-automation-action:hover,
:root[data-theme="light"] .zaki-automation-action:focus-visible {
  background: #fff;
  border-color: rgba(184,138,59,.32);
}
.zaki-automation-panel > .zaki-flow-footer {
  display: none !important;
}
@media (max-width: 1100px) {
  .zaki-automation-actions {
    grid-template-columns: 1fr;
  }
  .zaki-automation-action {
    min-height: 76px;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas: "icon copy value";
    align-items: center;
  }
  .zaki-automation-action b {
    align-self: center;
    font-size: clamp(22px, 6vw, 30px);
  }
}
@media (max-width: 520px) {
  .zaki-automation-action {
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-areas: "icon copy" "value value";
    padding: 13px;
  }
  .zaki-automation-icon {
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }
}


/* Global search canonical placement: one responsive rule for every dashboard page.
   2026-09-15 QA ("make search bar be in the middle and not to move regardless
   of side bar state"): this block used to float the search bar at
   rail-width + 360px so it looked centered in the CONTENT area (viewport
   minus the open rail) -- which meant its true screen position visibly
   jumped by the rail's own width (~250px) every time the rail toggled (see
   the removed "Closed-rail audit fix" override this replaces, which patched
   only the closed side of that jump, not the jump itself). Fixed dead center
   of the VIEWPORT via left:50%/transform instead, identically in both rail
   states, so there is nothing left to override per rail state. The results
   panel gets the same treatment so it never detaches from its trigger. */
@media (min-width: 1180px) {
  .zaki-app-rail .nav-right > .global-search {
    position: fixed !important;
    top: max(16px, env(safe-area-inset-top)) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 390 !important;
    width: clamp(300px, 27vw, 360px) !important;
    min-width: 0 !important;
    max-width: 360px !important;
  }
  .zaki-app-rail .global-search-btn {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 0 15px !important;
    border-radius: 999px !important;
  }
  .zaki-app-rail .global-search-btn-label {
    display: inline !important;
    max-width: 240px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .zaki-app-rail .global-search-panel {
    position: fixed !important;
    top: 70px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(500px, calc(100vw - 120px)) !important;
    min-width: 340px !important;
    max-width: 500px !important;
    z-index: 410 !important;
  }
}
@media (min-width: 960px) and (max-width: 1179px) {
  /* 2026-09-15 QA: same viewport-centered, rail-state-independent fix as
     the >=1180px block above -- centered unconditionally, so the
     rail-closed-only override this band used to need (to reach the same
     centered value the OPEN case was missing) no longer exists. */
  .zaki-app-rail .nav-right > .global-search {
    position: fixed !important;
    top: max(16px, env(safe-area-inset-top)) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 390 !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
  }
  .zaki-app-rail .global-search-btn {
    width: 52px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 999px !important;
  }
  .zaki-app-rail .global-search-btn-label {
    display: none !important;
  }
  .zaki-app-rail .global-search-panel {
    position: fixed !important;
    top: 70px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(460px, calc(100vw - 120px)) !important;
    min-width: 0 !important;
    max-width: 460px !important;
    z-index: 410 !important;
  }
}
@media (max-width: 959px) {
  .zaki-app-rail .nav-right > .global-search {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
    min-width: 44px !important;
    max-width: none !important;
  }
  .zaki-app-rail .global-search-btn {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  .zaki-app-rail .global-search-btn-label {
    display: none !important;
  }
  .zaki-app-rail .global-search-panel {
    position: fixed !important;
    top: 62px !important;
    left: 12px !important;
    right: 12px !important;
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    z-index: 410 !important;
  }
}

/* Global search icon alignment: search is a pill, not a square icon button. */
.zaki-app-rail .global-search-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  line-height: 1 !important;
}
.zaki-app-rail .global-search-btn > svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  margin: 0 !important;
  align-self: center !important;
  stroke-width: 2 !important;
}
.zaki-app-rail .global-search-btn-label {
  align-self: center !important;
  line-height: 1.1 !important;
}
@media (max-width: 1179px) {
  .zaki-app-rail .global-search-btn {
    justify-content: center !important;
  }
}

/* Arabic headings should use natural Arabic shaping, not Latin display spacing. */
body.ar .page-title,
body.ar .syne,
body.ar h1,
body.ar h2,
body.ar h3,
body.ar .zaki-showcase-topbar h1 {
  font-family: "Cairo", var(--font-body) !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
}

/* Settings control center compact pass: light-safe surfaces and denser grouping. */
#tab-settings .zaki-settings-page {
  gap: 10px !important;
  padding-top: 22px !important;
}
#tab-settings .zaki-settings-page .page-header {
  margin-bottom: 0 !important;
}
#tab-settings .section-label {
  margin: 2px 0 -2px !important;
}
#tab-settings .control-groups {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 10px !important;
  grid-auto-flow: dense;
}
#tab-settings .control-group {
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(184,138,59,.11), transparent 42%),
    var(--color-surface) !important;
  border-color: var(--color-line) !important;
  box-shadow: var(--shadow-1) !important;
}
:root.light #tab-settings .control-group,
:root[data-theme="light"] #tab-settings .control-group {
  background:
    radial-gradient(circle at 14% 0%, rgba(184,138,59,.10), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,249,245,.94)) !important;
  border-color: rgba(17,23,22,.10) !important;
  box-shadow: 0 10px 30px rgba(17,23,22,.055), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
#tab-settings .control-group-head {
  min-height: 62px !important;
  padding: 12px 14px 10px !important;
  grid-template-columns: 34px minmax(0,1fr) auto !important;
  gap: 10px !important;
}
#tab-settings .control-group-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px !important;
  padding: 8px !important;
}
#tab-settings .control-group-title h2,
#tab-settings .control-group-head h2 {
  font-size: 15px !important;
  line-height: 1.05 !important;
  margin-bottom: 2px !important;
}
#tab-settings .control-group-head p {
  -webkit-line-clamp: 1 !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
}
#tab-settings .control-item {
  min-height: 44px !important;
  padding: 0 14px !important;
  font-size: 11px !important;
}
#tab-settings .control-item-arrow {
  font-size: 14px !important;
}
#tab-settings .control-plan-badge {
  padding: 3px 6px !important;
  font-size: 10px !important;
}
@media (min-width: 1500px) {
  #tab-settings .control-groups {
    grid-template-columns: repeat(4, minmax(260px, 1fr)) !important;
  }
}





/* Add Booking page: use the full workspace without forcing vertical scroll. */
.booking-add-page {
  max-width: min(1280px, calc(100vw - var(--rail-width) - 48px));
  padding-top: 68px !important;
}
.booking-add-page .page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  width: min(1040px, 100%);
  margin-bottom: 14px;
  padding-right: 0 !important;
}
.booking-add-page .page-header .btn {
  align-self: center;
  justify-self: end;
}
.booking-add-page .page-title {
  font-size: clamp(38px, 5vw, 68px);
  line-height: .88;
}
.booking-add-card {
  width: min(1040px, 100%);
  margin-bottom: 0;
}
.booking-add-card .card-head {
  min-height: 50px;
  padding: 12px 18px;
}
.booking-add-card .card-body {
  padding: 16px 18px 18px;
}
.booking-add-form .form-group {
  margin-bottom: 12px;
}
.booking-add-grid {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 12px 14px;
}
.booking-add-form .form-input,
.booking-add-form .form-select {
  min-height: 44px;
  padding: 10px 13px;
}
.booking-add-form .form-label {
  margin-bottom: 5px;
}
.booking-add-confirm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px 14px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-line);
  border-radius: 14px;
}
.booking-add-confirm-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: unset;
  accent-color: var(--color-accent);
}
.booking-add-confirm-row label {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.booking-add-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
@media (min-width: 1180px) and (min-height: 760px) {
  .booking-add-page {
    min-height: 100dvh;
    padding-bottom: 32px !important;
  }
}
@media (max-width: 1020px) {
  .booking-add-page {
    max-width: none;
  }
  .booking-add-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .booking-add-page {
    padding-top: 82px !important;
  }
  .booking-add-page .page-title {
    font-size: 38px;
    line-height: .96;
  }
  .booking-add-grid {
    grid-template-columns: 1fr;
  }
  .booking-add-confirm-row,
  .booking-add-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Keep the global search readable over every dashboard surface. */
.zaki-app-rail .global-search-btn {
  background: #17140f !important;
  border: 1px solid rgba(184, 138, 59, .34) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .22) !important;
  color: #f7f6f2 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
:root.light .zaki-app-rail .global-search-btn,
:root[data-theme="light"] .zaki-app-rail .global-search-btn {
  background: #f7f5ee !important;
  border-color: rgba(18, 16, 13, .16) !important;
  box-shadow: 0 16px 32px rgba(18, 16, 13, .12) !important;
  color: #12100d !important;
}
.zaki-app-rail .global-search-btn > svg {
  stroke: currentColor !important;
}
.zaki-app-rail .global-search-btn-label {
  display: inline-flex !important;
  color: currentColor !important;
  opacity: .86 !important;
  font-weight: 750 !important;
  text-shadow: none !important;
}
:root.light .zaki-app-rail .global-search-btn-label,
:root[data-theme="light"] .zaki-app-rail .global-search-btn-label {
  color: #2d2921 !important;
  opacity: 1 !important;
}
@media (max-width: 1179px) {
  .zaki-app-rail .global-search-btn-label {
    display: none !important;
  }
}


/* Reserve a landing lane for the fixed global search.
   It may float over content while scrolling, but first paint should never collide. */
@media (min-width: 960px) {
  main#main-content {
    padding-top: max(var(--dashboard-top-safe, 86px), env(safe-area-inset-top)) !important;
  }
  main#main-content.page,
  main#main-content.container {
    padding-top: max(112px, env(safe-area-inset-top)) !important;
  }
  main#main-content .zaki-showcase-topbar,
  main#main-content .page-header,
  main#main-content .ops-hero,
  main#main-content .fp-head {
    margin-top: 0 !important;
  }
}
@media (min-width: 1180px) {
  main#main-content {
    padding-top: max(var(--dashboard-top-safe, 92px), env(safe-area-inset-top)) !important;
  }
  main#main-content.page,
  main#main-content.container {
    padding-top: max(118px, env(safe-area-inset-top)) !important;
  }
}
/* Below 960px there is deliberately no main#main-content rule: `.page` /
   `.container` already clear the fixed phone header (82-92px). A former
   `padding-top: revert-layer` here meant to "undo" the desktop rules above,
   but outside any @layer it reverts to the browser default of 0, so every
   phone page whose <main> is itself `.page` (customer profile, Customers,
   Reports) started under the header (walkthrough 2026-09-25). */
@media (max-width: 959px) {
  /* The phone header's left column is sized by the grid; the venue
     switcher inside it kept its full text width (146px in a 108px column)
     and ran under the Search button. Let it shrink and ellipsize instead.
     No overflow:hidden on .nav-left -- that would clip the switcher menu. */
  #mainNav .nav-left .branch-switcher,
  #mainNav .nav-left .nav-venue {
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
  }
  #mainNav .nav-left .branch-switcher-summary {
    min-width: 0;
    max-width: 100%;
  }
  /* Light theme: the phone chip kept the dark theme's off-white text on a
     light bar -- the >=960 light override (see :root.light .nav-venue) never
     applied below 960px (walkthrough 2026-09-25). */
  :root.light #mainNav .nav-venue {
    color: var(--color-text-secondary);
    border-color: rgba(17, 23, 22, .14);
  }
  /* The page's end must clear both floating controls: the tab bar (~70px)
     and "Back to top" stacked above it (~163px from the bottom). 88px left
     the last card/bill row under them (walkthrough 2026-09-25). */
  main#main-content.page,
  #main-content .page {
    padding-bottom: calc(176px + env(safe-area-inset-bottom));
  }
}


/* Today landing refinement: tighter first paint and automation KPI fit.
   The automation-card rules below used to have NO width guard of their own
   (only the sibling padding-top rule was scoped to >=1180px), so their
   `!important`s won at every viewport, including phones -- fighting the
   phone-scoped stacked layout at :1587/:1602 and producing the wrapped
   2-line label overlapping the right-aligned value digits (2026-09-04 QA
   pass). Folded into this same >=1180px (desktop) media query, which is
   what this rule set was actually written for. Below 1180px the plain
   (non-!important) rules earlier in this file -- the 3-col grid at rest,
   the @media(max-width:1100px) 1-col/one-row switch, and the
   @media(max-width:520px) 2-row stack for the narrowest phones -- are now
   the only ones in play, uncontested. */
@media (min-width: 1180px) {
  main#main-content.dashboard-main-overview {
    padding-top: max(86px, env(safe-area-inset-top)) !important;
  }
  .zaki-automation-actions {
    align-items: stretch;
  }
  .zaki-automation-action {
    grid-template-columns: 40px minmax(0, 1fr) minmax(88px, max-content) !important;
    grid-template-rows: 1fr !important;
    grid-template-areas: "icon copy value" !important;
    align-items: center !important;
    min-height: 86px !important;
    padding: 13px 16px 13px 14px !important;
    gap: 10px !important;
  }
  .zaki-automation-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
  }
  .zaki-automation-action span:nth-child(2) {
    align-self: center !important;
  }
  .zaki-automation-action small {
    display: none !important;
  }
  .zaki-automation-action strong {
    font-size: clamp(12px, .95vw, 14px) !important;
    line-height: 1.12 !important;
  }
  .zaki-automation-action b {
    align-self: center !important;
    justify-self: stretch !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-inline-end: 2px !important;
    text-align: right !important;
    font-size: clamp(18px, 1.7vw, 26px) !important;
    line-height: 1 !important;
    letter-spacing: -.06em !important;
  }
}











/* Annotation correction pass: Today compact cards in LTR and RTL. */
@media (min-width:960px) and (min-height:860px){
  body.ar .zaki-arrivals-panel>.zaki-flow-footer{margin-left:auto;margin-right:0;direction:rtl}
  .zaki-automation-action{grid-template-columns:40px minmax(0,1fr) minmax(62px,max-content)!important;min-height:82px!important;padding:12px 14px!important;gap:10px!important}
  .zaki-automation-action strong{display:block!important;min-height:0!important;font-size:12px!important;line-height:1.12!important;letter-spacing:0!important;overflow:visible!important;text-overflow:clip!important;white-space:normal!important}
  .zaki-automation-action b{min-width:62px!important;justify-self:end!important;text-align:end!important;font-size:24px!important;line-height:1!important;letter-spacing:0!important}
  body.ar .zaki-automation-action{grid-template-columns:40px minmax(0,1fr) minmax(62px,max-content)!important;direction:rtl}
  body.ar .zaki-automation-action span:nth-child(2){align-self:center!important;text-align:right}
  body.ar .zaki-flow-kpi{min-height:64px;padding:11px 12px;align-content:center}
  body.ar .zaki-flow-kpi span{min-height:0;line-height:1.25;white-space:normal;overflow:visible;text-overflow:clip}
  body.ar .zaki-flow-kpi strong{align-self:center;margin-top:0;padding-bottom:2px;line-height:1.28;letter-spacing:0;overflow:visible;text-overflow:clip}
}

/* Annotation correction pass 2: verified narrow-desktop text fit. */
@media (min-width:960px) and (min-height:860px){
  .zaki-automation-action{grid-template-columns:40px minmax(0,1fr) minmax(64px,max-content)!important}
  .zaki-automation-action strong{font-size:11px!important;line-height:1.16!important}
  .zaki-automation-action b{min-width:64px!important;font-size:22px!important}
  body.ar .zaki-automation-action strong{min-height:34px!important;line-height:1.25!important}
  body.ar .zaki-flow-kpi span{min-height:18px;line-height:1.35;padding-bottom:1px}
  body.ar .zaki-flow-kpi strong{line-height:1.35;padding-bottom:3px}
}




/* Annotation correction pass 3: Arabic Today polish. */
@media (min-width:960px) and (min-height:860px){
  .zaki-time-pill{font-family:"Plus Jakarta Sans",var(--font-body),sans-serif;font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:uppercase}
  body.ar .zaki-time-pill{direction:ltr;unicode-bidi:isolate;font-weight:760;line-height:1}
}

@media (min-width:960px) and (min-height:860px){
  .zaki-arrivals-total-label{margin-inline-end:6px}
  body.ar .zaki-arrivals-total-label{margin-inline-end:0;margin-inline-start:6px}
}

/* Arabic Today weight parity: match English hierarchy without artificial stroke. */
body.ar .zaki-today-showcase :is(h1,h2,h3,.zaki-card-title,.zaki-panel-head h2,.zaki-service-flow-head h2,.zaki-showcase-topbar h1){
  font-family:"Cairo","Plus Jakarta Sans",sans-serif!important;
  font-weight:780!important;
  -webkit-text-stroke:0 transparent;
  text-shadow:none;
}
body.ar .zaki-today-showcase :is(.page-sub,.zaki-panel-head a,.zaki-command-label,.zaki-arrival-main strong,.zaki-arrival-time strong,.zaki-arrivals-total,.zaki-flow-footer,.zaki-flow-stage small,.zaki-flow-kpi span,.zaki-automation-action strong,.zaki-pulse-label),
body.ar .nav :is(.nav-tab,.nav-tab-label,.nav-account-name,.nav-account-branch,.nav-account-link){
  font-family:"Cairo","Plus Jakarta Sans",sans-serif!important;
  font-weight:760!important;
  -webkit-text-stroke:0 transparent;
  text-shadow:none;
}



/* Browser annotation: arrivals total lives in the header; arrivals list owns scroll. */
.zaki-arrivals-panel{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0}
.zaki-arrivals-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0;flex-wrap:wrap}
.zaki-arrivals-head-actions>a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 4px;font-weight:800;white-space:nowrap}
.zaki-arrivals-total{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:0 10px;color:var(--color-text-muted);background:var(--color-bg-subtle);border:1px solid var(--color-line);border-radius:999px;font-size:11px;font-weight:760;line-height:1;white-space:nowrap}
.zaki-arrivals-total strong{color:var(--color-text);font:800 12px/1 var(--font-body);font-variant-numeric:tabular-nums}
.zaki-arrivals-list{min-height:0;overflow:auto;overscroll-behavior:contain;padding-right:6px;scrollbar-width:thin}
.zaki-arrivals-list::-webkit-scrollbar{width:8px}
.zaki-arrivals-list::-webkit-scrollbar-thumb{background:var(--color-line-strong);border-radius:999px}
body.ar .zaki-arrivals-list{padding-right:0;padding-left:6px}
body.ar .zaki-arrivals-head-actions{direction:rtl}
@media (min-width:960px) and (min-height:860px){
  .zaki-arrivals-panel{padding-bottom:17px}
  .zaki-arrivals-panel>.zaki-panel-head{align-items:center;padding-bottom:10px}
}
@media(max-width:780px){
  .zaki-arrivals-head-actions{justify-content:flex-start}
  .zaki-arrivals-total{order:2;width:100%;justify-content:flex-start}
}

/* Browser annotation: keep Today arrival times from clipping against the timeline dot. */
.zaki-arrival-row{grid-template-columns:minmax(94px,auto) minmax(0,1fr)}
.zaki-arrival-time{padding-left:38px;min-width:0}
.zaki-arrival-time strong{display:block;min-width:48px;overflow:visible;text-overflow:clip;font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap}
@media(max-width:780px){
  .zaki-arrival-row{grid-template-columns:minmax(78px,auto) minmax(0,1fr)}
  .zaki-arrival-time{padding-left:28px}
  .zaki-arrival-time strong{min-width:44px}
}

/* Guests annotation: lock the Guests shell; only Today's Bookings scrolls. */
@media(min-width:781px){
  html:has(#tab-bookings.yn-tab-panel.active),
  body:has(#tab-bookings.yn-tab-panel.active){height:100%;overflow:hidden}
  #tab-bookings.yn-tab-panel.active{height:100dvh;overflow:hidden}
  #tab-bookings.yn-tab-panel.active .zaki-guests-workspace{
    height:100dvh;
    max-height:100dvh;
    min-height:0;
    overflow:hidden;
    grid-template-rows:auto auto minmax(0,1fr);
    padding-top:22px;
    padding-bottom:18px;
  }
  #tab-bookings.yn-tab-panel.active .zaki-guests-workspace .page-header{margin:0}
  #tab-bookings.yn-tab-panel.active .zaki-guests-workspace .zaki-workspace-actions{min-height:0}
  #tab-bookings.yn-tab-panel.active .zaki-guests-workspace .guests-grid{height:100%;min-height:0;overflow:hidden}
  #tab-bookings.yn-tab-panel.active .zaki-guests-workspace .guests-grid>#yn-col-bookings-today{height:100%;min-height:0;overflow:hidden}
  #tab-bookings.yn-tab-panel.active .zaki-guests-workspace .guests-grid>#yn-col-bookings-today .yn-col-body{height:calc(100% - 50px);min-height:0;overflow:hidden}
  #tab-bookings.yn-tab-panel.active .zaki-guests-workspace .guests-grid>#yn-col-bookings-today .table-wrap{height:100%;max-height:none;overflow:auto;overscroll-behavior:contain}
}

/* Browser annotation: make the whole Today's Bookings card a content-sized box. */
@media(min-width:781px){
  #tab-bookings.yn-tab-panel.active .zaki-guests-workspace .guests-grid{
    align-content:start;
    align-items:start;
  }
  #tab-bookings.yn-tab-panel.active .zaki-guests-workspace .guests-grid>#yn-col-bookings-today{
    height:auto;
    max-height:100%;
    min-height:0;
    align-self:start;
    display:grid!important;
    grid-template-rows:auto minmax(0,auto);
    overflow:hidden;
    border-radius:18px;
  }
  #tab-bookings.yn-tab-panel.active .zaki-guests-workspace .guests-grid>#yn-col-bookings-today .yn-col-body{
    height:auto;
    max-height:calc(100dvh - 285px);
    min-height:0;
    overflow:hidden;
    padding:12px;
  }
  #tab-bookings.yn-tab-panel.active .zaki-guests-workspace .guests-grid>#yn-col-bookings-today .table-wrap{
    height:auto;
    max-height:calc(100dvh - 350px);
    overflow:auto;
    background:linear-gradient(180deg,var(--color-surface-raised),color-mix(in srgb,var(--color-surface) 92%,transparent));
    border:1px solid var(--color-line);
    border-radius:14px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  }
  #tab-bookings.yn-tab-panel.active .zaki-guests-workspace .guests-grid>#yn-col-bookings-today .table-wrap table{background:transparent}
}

/* Team annotation: fit Team in the actual fixed dashboard window; staff table owns overflow. */
@media(min-width:781px){
  html:has(#tab-attendance.yn-tab-panel.active),
  body:has(#tab-attendance.yn-tab-panel.active){height:100%;overflow:hidden}
  main#main-content.dashboard-main-attendance{
    --team-visible-top: max(var(--dashboard-top-safe,92px), env(safe-area-inset-top));
    height:100dvh;
    max-height:100dvh;
    overflow:hidden;
    padding-top:var(--team-visible-top)!important;
    padding-bottom:18px!important;
  }
  #tab-attendance.yn-tab-panel.active{
    height:calc(100dvh - var(--team-visible-top) - 18px);
    max-height:calc(100dvh - var(--team-visible-top) - 18px);
    overflow:hidden;
  }
  #tab-attendance.yn-tab-panel.active .zaki-team-page{
    height:100%;
    max-height:100%;
    min-height:0;
    overflow:hidden;
    display:grid;
    grid-template-rows:auto auto minmax(0,1fr) 104px;
    gap:14px;
    padding-top:0;
    padding-bottom:0;
  }
  #tab-attendance.yn-tab-panel.active .zaki-team-page .page-header{margin:0;min-height:0}
  /* align-items:start here collapsed the metrics container to 0 height inside
     the fixed-height .att-scroll grid, so the counter boxes overflowed and
     overlapped the table card. Let the row take its natural height instead. */
  #tab-attendance.yn-tab-panel.active .zaki-team-metrics{gap:12px;align-self:start;align-items:stretch;min-height:78px;grid-auto-rows:minmax(66px,auto)}
  #tab-attendance.yn-tab-panel.active .att-scroll{align-content:start}
  #tab-attendance.yn-tab-panel.active .zaki-team-metric{min-height:66px;padding:9px 14px;border-radius:15px}
  #tab-attendance.yn-tab-panel.active .zaki-team-metric strong{margin-top:1px;font-size:clamp(22px,2.2vw,30px);line-height:.95}
  #tab-attendance.yn-tab-panel.active .zaki-team-metric small{margin-top:1px;font-size:11px;line-height:1.15}
  #tab-attendance.yn-tab-panel.active .zaki-team-table-card{
    min-height:0;
    height:100%;
    max-height:none;
    margin-bottom:0;
    overflow:hidden;
    display:grid;
    grid-template-rows:minmax(0,1fr);
  }
  #tab-attendance.yn-tab-panel.active .zaki-team-staff-list{min-height:0;overflow:hidden;display:grid}
  #tab-attendance.yn-tab-panel.active .zaki-team-staff-list>.table-wrap{
    min-height:0;
    height:100%;
    max-height:none;
    overflow:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
  }
  #tab-attendance.yn-tab-panel.active .zaki-team-staff-list>.table-wrap::-webkit-scrollbar{width:8px}
  #tab-attendance.yn-tab-panel.active .zaki-team-staff-list>.table-wrap::-webkit-scrollbar-thumb{background:var(--color-line-strong);border-radius:999px}
  #tab-attendance.yn-tab-panel.active .zaki-team-access-box{
    min-height:0;
    height:104px;
    margin-bottom:0;
    overflow:hidden;
    padding:0;
    display:grid;
    align-items:stretch;
  }
  #tab-attendance.yn-tab-panel.active .zaki-team-access-box .zaki-staff-management-card{
    min-height:0;
    width:100%;
    height:100%;
    padding:18px 22px;
    align-content:center;
    background:transparent;
    border:0;
    border-radius:inherit;
    box-shadow:none;
  }
  #tab-attendance.yn-tab-panel.active .zaki-team-access-box .zaki-staff-management-card:hover{
    background:var(--color-surface-raised);
    transform:none;
  }
  #tab-attendance.yn-tab-panel.active .zaki-team-access-box .zaki-staff-management-card span{font-size:11px;line-height:1.25}
}



/* Dashboard table toolbars: compact search, field filters, count, and sorting.
   (The active-filter chips element is still emitted by the JS but hidden -- see
   .zaki-table-chips below -- so it takes no grid track.) */
.zaki-table-toolbar{
  display:grid;
  grid-template-columns:minmax(240px,1fr) minmax(112px,140px) minmax(120px,150px) auto auto;
  align-items:center;
  gap:10px;
  padding:12px;
  background:var(--color-surface-raised);
  border:1px solid var(--color-line);
  border-radius:12px;
  margin:10px 0 12px;
}
.zaki-table-toolbar input,
.zaki-table-toolbar select{
  width:100%;
  min-width:0;
  min-height:38px;
  padding:8px 10px;
  color:var(--color-text);
  background:var(--color-bg-subtle);
  border:1px solid var(--color-line-strong);
  border-radius:10px;
  font-size:12px;
  font-weight:650;
}
.zaki-table-search{min-width:0}
.zaki-table-field,.zaki-table-value{max-width:none}
.zaki-table-count{
  color:var(--color-text-muted);
  font-size:11px;
  font-weight:750;
  white-space:nowrap;
}
.zaki-table-count{justify-self:end}
/* Active-filter "Search: x" / "Status: y" pills were visual noise while
   typing -- the result count alone communicates the filter state. */
.zaki-table-chips{display:none}
.zaki-table-clear{
  min-height:38px;
  padding:0 11px;
  color:var(--color-text-secondary);
  background:transparent;
  border:1px solid var(--color-line);
  border-radius:10px;
  cursor:pointer;
  font-size:12px;
  font-weight:800;
}
.zaki-table-clear:hover{color:var(--color-accent-strong);background:var(--color-accent-soft)}
.zaki-sortable-th{cursor:pointer;user-select:none}
.zaki-sortable-th::after{content:"sort";display:inline-block;margin-inline-start:6px;color:var(--color-text-muted);font-size:10px;text-transform:none}
.zaki-sortable-th[aria-sort="ascending"]::after{content:"asc";color:var(--color-accent-strong)}
.zaki-sortable-th[aria-sort="descending"]::after{content:"desc";color:var(--color-accent-strong)}
.zaki-team-metric{font-family:inherit;text-align:left;cursor:pointer}
.zaki-team-metric:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
body.ar .zaki-team-metric{text-align:right}
@media(max-width:900px){.zaki-table-toolbar{grid-template-columns:1fr 1fr}.zaki-table-search{grid-column:1/-1}.zaki-table-count{justify-self:start}}
@media(max-width:620px){.zaki-table-toolbar{grid-template-columns:1fr;align-items:stretch}.zaki-table-toolbar input,.zaki-table-toolbar select,.zaki-table-clear{width:100%}.zaki-table-count{justify-self:start}}

/* Operational comments pass: kitchen legend, waiter categories, and POS calculator modal. */
.role-kitchen .kitchen-display-head .kitchen-color-code {
  display: inline-flex !important;
  align-items: center;
  justify-content: center !important;
  gap: 12px !important;
  min-width: 0;
  white-space: nowrap;
}
.role-kitchen .kitchen-display-head .kitchen-color-code span {
  display: inline-flex !important;
  align-items: center;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  min-height: 34px;
  border-radius: 999px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-line);
}
.new-order-tabs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid var(--color-line);
}
.new-order-tabs-row .new-order-tabs {
  min-width: 0;
  padding: 0;
  border-bottom: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.new-order-tabs-row .new-order-tab {
  scroll-snap-align: start;
}
.new-order-menu-manage {
  min-height: 44px;
  white-space: nowrap;
}
.cashier-mode-tabs button.cashier-mode-tab {
  font: inherit;
  appearance: none;
}
.yala-calculator-modal[hidden] {
  display: none !important;
}
.yala-calculator-modal {
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 14, 12, .48);
  backdrop-filter: blur(8px);
}
.yala-calculator-modal .ops-modal-card.yala-calculator {
  position: relative;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  overflow: auto;
  padding: 18px;
  border-radius: 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
}
.yala-calculator-modal .panel-head {
  padding: 0 42px 14px 0;
  min-height: auto;
  border-bottom: 1px solid var(--color-line);
}
.yala-calculator-modal .calc-display {
  margin-top: 14px;
  font: 800 30px/1 var(--font-display);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.yala-calculator-modal .calc-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.yala-calculator-modal .calc-grid button {
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid var(--color-line);
  background: var(--color-bg-subtle);
  color: var(--color-text);
  font-weight: 800;
}
.yala-calculator-modal .calc-grid button:hover,
.yala-calculator-modal .calc-grid button:focus-visible {
  border-color: rgba(184,138,59,.42);
  background: var(--color-accent-soft);
}
.yala-calculator-modal .calc-grid .wide {
  grid-column: span 2;
}
@media(max-width:760px) {
  .new-order-tabs-row {
    grid-template-columns: 1fr;
  }
  .new-order-menu-manage {
    width: 100%;
  }
  .role-kitchen .kitchen-display-head .kitchen-color-code {
    justify-content: flex-start !important;
    flex-wrap: wrap;
    white-space: normal;
  }
}

/* Service polish: keep kitchen timing labels visually separated in the header. */
.role-kitchen .kitchen-display-head {
  grid-template-columns: minmax(160px, auto) minmax(380px, 1fr) auto;
  column-gap: 24px;
}
.role-kitchen .kitchen-display-head .kitchen-color-code {
  display: flex !important;
  justify-content: center !important;
  gap: 14px !important;
  flex-wrap: wrap;
  white-space: normal !important;
}
.role-kitchen .kitchen-display-head .kitchen-color-code span {
  margin: 0 !important;
  padding: 0 14px !important;
  min-width: max-content;
}
@media(max-width:980px){
  .role-kitchen .kitchen-display-head {
    grid-template-columns: 1fr;
  }
  .role-kitchen .kitchen-display-head .kitchen-color-code {
    justify-content: flex-start !important;
  }
}

/* Kitchen section can be previewed by owner/manager, so do not scope this to role-kitchen only. */
.kitchen-display-head {
  grid-template-columns: minmax(160px, auto) minmax(380px, 1fr) auto;
  column-gap: 24px;
}
.kitchen-display-head .kitchen-color-code {
  display: flex !important;
  justify-content: center !important;
  gap: 16px !important;
  flex-wrap: wrap;
  white-space: normal !important;
}
.kitchen-display-head .kitchen-color-code span {
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
  padding: 0 14px !important;
  min-width: max-content;
}
.kitchen-display-head .kitchen-color-code span + span {
  margin-left: 16px !important;
}
@media(max-width:980px){
  .kitchen-display-head {
    grid-template-columns: 1fr;
  }
  .kitchen-display-head .kitchen-color-code {
    justify-content: flex-start !important;
  }
}


/* Floor reservations: booking notes plus compact horizontal seating controls. */
.host-reservations-table .booking-notes-cell {
  min-width: 150px;
  max-width: 230px;
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.35;
}
.host-reservations-table .booking-note-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.host-reservations-table .booking-note-empty {
  color: var(--color-text-muted);
}
.host-reservations-table .row-actions {
  min-width: 168px;
}
/* The global .row-actions is display:flex, which on a <td> stops it being a
   table cell: its bottom border sat at a different height from the rest of
   the row, so every row line broke at the action column (walkthrough round 4). */
.host-reservations-table td.row-actions {
  display: table-cell;
  min-width: 236px;
  white-space: nowrap;
}
.host-reservations-table td.row-actions > * {
  vertical-align: middle;
}
.host-reservations-table td.row-actions > * + * {
  margin-inline-start: 7px;
}
.host-reservations-table .seat-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.host-reservations-table .seat-action select {
  /* "BAR · 8 seats" needs ~76px of text; 92px left 54px and cut it to "BAR ·". */
  width: 150px;
  min-height: 38px;
  padding: 0 28px 0 10px;
  color: var(--color-text);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 750;
}
.host-reservations-table .seat-action .ops-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  min-width: 58px;
  padding: 0 12px;
}
/* The check icon collapsed to nothing but kept its gap, pushing "Seat" ~4px
   right of centre. */
.host-reservations-table .seat-action .ops-action svg {
  display: none;
}
@media(max-width:760px){
  .host-reservations-table .booking-notes-cell{min-width:140px;max-width:180px}
  .host-reservations-table td.row-actions{min-width:210px}
  .host-reservations-table .seat-action select{width:130px}
}

/* Floor workspace: reservations own the full row after removing the side waitlist panel. */
.yala-host-floor-wide {
  grid-template-columns: 1fr !important;
}
.yala-host-floor-wide .host-main-stack,
.yala-host-floor-wide .host-reservations-panel,
.yala-host-floor-wide .host-availability-panel {
  width: 100%;
  max-width: 100%;
}
.yala-host-floor-wide .host-side-stack {
  display: none !important;
}

/* Keep the global search close icon centered inside its hover target. */
.global-search-close {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  line-height: 0;
}
.global-search-close svg {
  display: block;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}
/* Settings hub: column-balanced cards remove uneven grid holes between categories. */
#tab-settings .zaki-settings-page:not(.settings-detail-page) .control-groups {
  display: block !important;
  column-count: 3;
  column-gap: 14px;
  width: 100%;
}
#tab-settings .zaki-settings-page:not(.settings-detail-page) .control-group {
  display: inline-block;
  width: 100%;
  margin: 0 0 14px;
  break-inside: avoid;
  page-break-inside: avoid;
  vertical-align: top;
}
@media (min-width: 1500px) {
  #tab-settings .zaki-settings-page:not(.settings-detail-page) .control-groups {
    column-count: 3;
  }
}
@media (max-width: 1100px) {
  #tab-settings .zaki-settings-page:not(.settings-detail-page) .control-groups {
    column-count: 2;
  }
}
@media (max-width: 720px) {
  #tab-settings .zaki-settings-page:not(.settings-detail-page) .control-groups {
    column-count: 1;
  }
}


/* Service > Floor embedded floor plan availability map. */
.host-floor-plan-panel { overflow: visible; }
.floor-plan-panel-head { align-items: center; gap: 14px; }
.floor-plan-panel-head > div:first-child { display: grid; gap: 3px; min-width: 0; }
.floor-plan-panel-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.floor-plan-panel-actions .ops-btn { min-height: 40px; }
.floor-merge-status {
  margin: 0 14px 12px;
  padding: 10px 12px;
  color: var(--color-accent-strong);
  background: var(--color-accent-soft);
  border: 1px dashed rgba(184,138,59,.42);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
}
.floor-service-map-card {
  position: relative;
  margin: 0 14px 12px;
  min-height: 420px;
  padding: 14px !important;
  overflow: auto !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(184,138,59,.14), transparent 32%),
    linear-gradient(180deg, rgba(238,237,231,.055), rgba(18,16,13,.78)) !important;
}
.floor-service-svg {
  display: block;
  width: 100%;
  min-width: 760px;
  height: auto;
  aspect-ratio: 960 / 560;
}
.fp-service-tile rect:first-child,
.fp-service-tile circle:first-child { stroke-width: 4 !important; }
.fp-table-inner-rect,
.fp-service-tile .fp-table-inner {
  fill: rgba(18,16,13,.52) !important;
  stroke: rgba(238,237,231,.1) !important;
  stroke-width: 1 !important;
}
.fp-state-available rect:first-child,
.fp-state-available circle:first-child { fill: rgba(79,111,90,.25) !important; stroke: #7fb093 !important; }
.fp-state-reserved rect:first-child,
.fp-state-reserved circle:first-child { fill: rgba(184,138,59,.24) !important; stroke: #d7aa5a !important; }
.fp-state-seated rect:first-child,
.fp-state-seated circle:first-child { fill: rgba(75,116,160,.24) !important; stroke: #87add4 !important; }
.fp-state-due rect:first-child,
.fp-state-due circle:first-child { fill: rgba(190,91,86,.27) !important; stroke: #ee7771 !important; }
.fp-state-merged rect:first-child,
.fp-state-merged circle:first-child { fill: rgba(145,116,184,.24) !important; stroke: #b99bdd !important; stroke-dasharray: 8 6; }
.fp-service-tile.is-selected rect:first-child,
.fp-service-tile.is-selected circle:first-child,
.fp-service-tile.is-merge-source rect:first-child,
.fp-service-tile.is-merge-source circle:first-child {
  filter: drop-shadow(0 0 16px rgba(184,138,59,.72));
  stroke: var(--color-accent) !important;
}
.fp-service-tile .fp-tile-name { font-size: 16px !important; }
.fp-service-tile .fp-tile-cap { font-size: 10px !important; }
.fp-tile-state {
  fill: rgba(238,237,231,.82);
  font: 800 8.5px/1 var(--font-body);
  dominant-baseline: middle;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(18,16,13,.72);
  stroke-width: 2px;
  stroke-linejoin: round;
}
.floor-service-legend { margin: 0 14px 14px; }
.floor-service-legend .fp-legend-swatch.reserved { background: rgba(184,138,59,.24); border: 1.5px solid #d7aa5a; }
.floor-service-legend .fp-legend-swatch.seated { background: rgba(75,116,160,.24); border: 1.5px solid #87add4; }
.floor-service-legend .fp-legend-swatch.due { background: rgba(190,91,86,.27); border: 1.5px solid #ee7771; }
.floor-service-legend .fp-legend-swatch.merged { background: rgba(145,116,184,.24); border: 1.5px dashed #b99bdd; }
.floor-table-popover {
  position: absolute;
  z-index: 30;
  width: min(264px, calc(100% - 24px));
  padding: 12px;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: 16px;
  box-shadow: var(--shadow-sheet);
}
.floor-popover-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.floor-popover-head strong { font: 900 18px/1 var(--font-display); }
.floor-popover-head button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--color-text-muted);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-line);
  border-radius: 9px;
  cursor: pointer;
}
.floor-popover-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.floor-popover-meta span {
  min-height: 24px;
  padding: 4px 8px;
  color: var(--color-text-secondary);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
}
.floor-table-popover p { margin: 10px 0 4px; color: var(--color-text-secondary); font-size: 12px; line-height: 1.45; }
.floor-table-popover small { color: var(--color-text-muted); font-size: 11px; }
.floor-popover-actions { display: grid; gap: 8px; margin-top: 12px; }
.floor-popover-actions .ops-btn { justify-content: center; width: 100%; }
@media(max-width:780px){
  .floor-plan-panel-head { align-items: stretch; flex-direction: column; }
  .floor-plan-panel-actions { justify-content: flex-start; }
  .floor-service-map-card { margin-inline: 10px; min-height: 300px; padding: 10px !important; }
  .floor-service-svg { min-width: 720px; }
}

/* POS cleanup: compact tool tabs and right-align checkout total/actions. */
.yala-pos-mode-workspace > .cashier-mode-tabs {
  width: max-content;
  max-width: calc(100% - 32px);
  min-height: 0;
  margin: 14px 16px 10px;
  padding: 3px;
  gap: 3px;
  align-self: start;
  justify-self: start;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  box-shadow: none;
}
.yala-pos-mode-workspace > .cashier-mode-tabs a,
.yala-pos-mode-workspace > .cashier-mode-tabs .cashier-mode-tab {
  min-width: 92px;
  min-height: 42px;
  padding: 0 13px;
  border-radius: 9px;
}
.yala-payment-panel .payment-breakdown {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0;
}
.yala-payment-panel .payment-checkout-row {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, auto);
  justify-content: end;
  align-items: stretch;
  gap: 10px;
  margin: 10px 18px 18px;
}
.yala-payment-panel .payment-checkout-row .payment-total {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 50px;
  padding: 0 14px;
  background: linear-gradient(135deg, var(--color-accent-soft), var(--color-bg-subtle));
  border: 1px solid rgba(184,138,59,.28);
  border-radius: 14px;
}
.yala-payment-panel .payment-checkout-row .payment-total span {
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .025em;
}
.yala-payment-panel .payment-checkout-row .payment-total strong {
  color: var(--color-accent-strong);
  font: 800 clamp(22px, 2vw, 30px)/1 var(--font-display);
  letter-spacing: -.035em;
  white-space: nowrap;
}
.yala-payment-panel .payment-checkout-row .payment-methods-yala {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: stretch;
  gap: 8px !important;
  margin: 0 !important;
}
.yala-payment-panel .payment-checkout-row .payment-methods-yala .ops-btn {
  min-width: 142px;
  min-height: 50px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
}
@media(max-width:900px){
  .yala-payment-panel .payment-checkout-row{grid-template-columns:1fr;justify-content:stretch}
  .yala-payment-panel .payment-checkout-row .payment-methods-yala{justify-content:stretch}
  .yala-payment-panel .payment-checkout-row .payment-methods-yala .ops-btn{flex:1 1 150px}
}
@media(max-width:620px){
  .yala-pos-mode-workspace > .cashier-mode-tabs{width:auto;max-width:none;margin:10px 12px 8px}
  .yala-pos-mode-workspace > .cashier-mode-tabs a,
  .yala-pos-mode-workspace > .cashier-mode-tabs .cashier-mode-tab{min-width:auto;flex:1 0 auto}
  .yala-payment-panel .payment-breakdown{grid-template-columns:1fr}
  .yala-payment-panel .payment-checkout-row{margin-inline:14px}
}
/* POS cleanup specificity pass: override older workspace tab/card sizing. */
.yala-pos-layout .cashier-workspace-top.yala-pos-mode-workspace > .cashier-mode-tabs {
  width: max-content;
  max-width: calc(100% - 32px);
  min-height: 0;
  margin: 14px 16px 10px;
  padding: 3px;
  gap: 3px;
  align-content: center;
  align-self: start;
  justify-self: start;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  box-shadow: none;
}
.yala-pos-layout .cashier-workspace-top.yala-pos-mode-workspace > .cashier-mode-tabs a,
.yala-pos-layout .cashier-workspace-top.yala-pos-mode-workspace > .cashier-mode-tabs .cashier-mode-tab {
  min-width: 92px;
  min-height: 42px;
  padding: 0 13px;
  border-radius: 9px;
}
.yala-payment-panel .payment-checkout-row {
  width: max-content;
  max-width: calc(100% - 36px);
  justify-self: end;
}
@media(max-width:900px){.yala-payment-panel .payment-checkout-row{width:auto;max-width:none;justify-self:stretch}}
/* Dashboard title fit: leave room for descenders and stacked subtitles. */
.ops-hero h1,
.page-title,
.zaki-showcase-topbar h1,
.floor-plan-page .page-title {
  line-height: 1.12;
  padding-bottom: .08em;
  overflow: visible;
}
.ops-hero > div:first-child,
.page-header > div:first-child,
.zaki-showcase-topbar > div:first-child {
  min-width: 0;
}
.ops-hero p,
.page-sub,
.zaki-showcase-topbar .page-sub {
  margin-top: 2px;
  line-height: 1.45;
}
@media(max-width:520px){
  .ops-hero h1,
  .page-title,
  .zaki-showcase-topbar h1{line-height:1.14}
}
/* Active Bills filter/sort toolbar: use the shared table controls without the old button strip. */
.cashier-bills-panel .bill-filter-toolbar {
  align-items: center;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--color-surface-raised) 72%, transparent);
  border-top: 0;
  border-bottom: 1px solid var(--color-line);
}
.cashier-bills-panel .bill-filter-toolbar select {
  min-width: 150px;
}
.cashier-bills-panel .bill-filter-toolbar .bill-sort-select {
  margin-left: auto;
}
@media(max-width:780px){
  .cashier-bills-panel .bill-filter-toolbar .bill-sort-select{margin-left:0}
  .cashier-bills-panel .bill-filter-toolbar select{flex:1 1 160px}
}
/* Floating POS calculator: draggable utility panel with no page blur. */
.yala-calculator-modal {
  inset: 0;
  display: block;
  padding: 0;
  background: transparent !important;
  backdrop-filter: none !important;
  pointer-events: none;
}
.yala-calculator-modal .ops-modal-card.yala-calculator {
  position: fixed;
  left: 50%;
  top: 18%;
  transform: none;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 24px);
  pointer-events: auto;
  resize: both;
  touch-action: none;
}
.yala-calculator-modal .panel-head[data-calc-drag-handle] {
  cursor: grab;
  user-select: none;
}
.yala-calculator-modal .panel-head[data-calc-drag-handle]:active {
  cursor: grabbing;
}
@media(max-width:620px){
  .yala-calculator-modal .ops-modal-card.yala-calculator{width:calc(100vw - 24px);resize:none}
}
/* Calculator header cleanup: compact close control and single-line title. */
.yala-calculator-modal .ops-modal-card.yala-calculator {
  padding-top: 16px;
}
.yala-calculator-modal .modal-close {
  display: grid;
  place-items: center;
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  min-width: 30px;
  width: 30px;
  min-height: 30px;
  height: 30px;
  padding: 0;
  color: var(--color-text-secondary);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  line-height: 0;
  box-shadow: none;
}
.yala-calculator-modal .modal-close svg {
  width: 15px;
  height: 15px;
  display: block;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}
.yala-calculator-modal .modal-close:hover,
.yala-calculator-modal .modal-close:focus-visible {
  color: var(--color-text);
  background: var(--color-accent-soft);
  border-color: rgba(184,138,59,.35);
}
.yala-calculator-modal .panel-head[data-calc-drag-handle] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 34px;
  padding: 0 40px 10px 0;
}
.yala-calculator-modal .panel-head[data-calc-drag-handle] h2 {
  margin: 0;
  font-size: 14px;
  line-height: 1.2;
}
.yala-calculator-modal .panel-head[data-calc-drag-handle] span {
  display: none;
}
/* Settings hub one-screen fit: compact desktop grid without scrolling. */
@media (min-width: 1000px) and (min-height: 760px) {
  #tab-settings .zaki-settings-page:not(.settings-detail-page) {
    height: calc(100dvh - 96px);
    min-height: 0;
    overflow: hidden;
    padding-top: 2px;
    padding-bottom: 8px;
  }
  #tab-settings .zaki-settings-page:not(.settings-detail-page) .page-header {
    margin-bottom: 3px;
  }
  #tab-settings .zaki-settings-page:not(.settings-detail-page) .page-title {
    font-size: clamp(26px, 2.3vw, 32px);
    line-height: 1.05;
    padding-bottom: 0;
  }
  #tab-settings .zaki-settings-page:not(.settings-detail-page) .page-sub {
    font-size: 10px;
    line-height: 1.15;
  }
  #tab-settings .zaki-settings-page:not(.settings-detail-page) .section-label {
    margin: 0 0 4px;
    font-size: 11px;
    line-height: 1.1;
  }
  #tab-settings .zaki-settings-page:not(.settings-detail-page) .control-groups {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px;
    align-items: start;
  }
  #tab-settings .zaki-settings-page:not(.settings-detail-page) .control-group {
    display: grid;
    margin: 0;
    border-radius: 12px;
  }
  #tab-settings .zaki-settings-page:not(.settings-detail-page) .control-group-head {
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 6px;
    min-height: 44px;
    padding: 6px 9px;
  }
  #tab-settings .zaki-settings-page:not(.settings-detail-page) .control-group-icon {
    width: 24px;
    height: 24px;
    padding: 5px;
    border-radius: 8px;
  }
  #tab-settings .zaki-settings-page:not(.settings-detail-page) .control-group-head h2 {
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.05;
  }
  #tab-settings .zaki-settings-page:not(.settings-detail-page) .control-group-head p {
    -webkit-line-clamp: 1;
    font-size: 10px;
    line-height: 1.05;
  }
  #tab-settings .zaki-settings-page:not(.settings-detail-page) .control-plan-badge {
    padding: 1px 5px;
    font-size: 10px;
  }
  #tab-settings .zaki-settings-page:not(.settings-detail-page) .control-item {
    min-height: 44px;
    padding: 0 8px;
    font-size: 12px;
  }
  #tab-settings .zaki-settings-page:not(.settings-detail-page) .control-item-arrow {
    font-size: 11px;
  }
}
@media (min-width: 1000px) and (max-width: 1230px) and (min-height: 760px) {
  #tab-settings .zaki-settings-page:not(.settings-detail-page) .control-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1200px) and (min-height: 760px) {
  #tab-settings .zaki-settings-page:not(.settings-detail-page) .control-groups {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
/* Settings final compact row-height override */
@media (min-width: 1000px) and (min-height: 760px) {
  #tab-settings .zaki-settings-page:not(.settings-detail-page) .control-groups {
    gap: 6px !important;
  }
  #tab-settings .zaki-settings-page:not(.settings-detail-page) .control-group-head {
    grid-template-columns: 26px minmax(0, 1fr) auto !important;
    gap: 6px !important;
    min-height: 44px !important;
    padding: 6px 9px !important;
  }
  #tab-settings .zaki-settings-page:not(.settings-detail-page) .control-group-icon {
    width: 24px !important;
    height: 24px !important;
    padding: 5px !important;
    border-radius: 8px !important;
  }
  #tab-settings .zaki-settings-page:not(.settings-detail-page) .control-item {
    min-height: 44px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }
}
/* Settings detail pages: align the back action with the Settings heading row. */
#tab-settings .zaki-settings-page.settings-detail-page > .page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  width: 100%;
  max-width: 100% !important;
  gap: 18px;
}
#tab-settings .zaki-settings-page.settings-detail-page > .page-header > .btn {
  justify-self: end;
  align-self: start;
  margin-top: 8px;
}
@media (max-width: 780px) {
  #tab-settings .zaki-settings-page.settings-detail-page > .page-header {
    grid-template-columns: 1fr;
    align-items: start;
  }
  #tab-settings .zaki-settings-page.settings-detail-page > .page-header > .btn {
    justify-self: start;
  }
}
/* Settings detail pages: remove repeated category breadcrumb labels from section headers. */
#tab-settings .zaki-settings-page.settings-detail-page .settings-section-context {
  display: none !important;
}
/* Settings hub accordion: wide collapsible category rows. */
#tab-settings .zaki-settings-page:not(.settings-detail-page) {
  height: auto !important;
  overflow: visible !important;
  padding-top: 26px !important;
  padding-bottom: 42px !important;
}
#tab-settings .zaki-settings-page:not(.settings-detail-page) .page-header {
  max-width: 100% !important;
  margin-bottom: 12px !important;
}
#tab-settings .zaki-settings-page:not(.settings-detail-page) .page-title {
  font-size: clamp(34px, 4vw, 48px) !important;
  line-height: 1.08 !important;
}
#tab-settings .zaki-settings-page:not(.settings-detail-page) .page-sub {
  font-size: 13px !important;
  line-height: 1.4 !important;
}
#tab-settings .zaki-settings-page:not(.settings-detail-page) .section-label {
  margin: 0 0 10px !important;
  font-size: 14px !important;
}
#tab-settings .zaki-settings-page:not(.settings-detail-page) .control-groups {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  column-count: initial !important;
}
/* Settings hub: flat category cards (Task 9 cutover). Replaces the
   <details>/<summary> accordion that used to live here -- its
   .settings-accordion-group / .settings-accordion-caret rules (summary
   marker suppression, caret [open] rotation, .control-group-items
   collapse sizing) had no matching markup left and were removed.
   Deliberately NOT scoped to #tab-settings: the same hub renders both
   inside the ?tab=settings embed and on the standalone /dashboard/settings
   page, which has no #tab-settings ancestor. */
.settings-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 12px;
  align-items: start;
  width: 100%;
  max-width: 100%;
}
.settings-category-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 88px;
  padding: 16px 18px;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  box-shadow: var(--shadow-1);
  text-decoration: none;
  transition: transform var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast);
}
.settings-category-card:hover {
  background: var(--color-surface-raised);
  border-color: rgba(184, 138, 59, .34);
  transform: translateY(-2px);
}
.settings-category-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 10px;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border-radius: 13px;
}
.settings-category-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.settings-category-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.settings-category-title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.settings-category-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.settings-category-card .control-item-arrow {
  color: var(--color-accent);
  font-size: 17px;
}
/* Trailing slot: normally just the arrow (or the lock+tier-label pair for a
   locked card), but the Billing card also carries a plan badge here -- same
   problem _build_channels_settings_index_html solves for its WhatsApp/
   Instagram badge+arrow pairs. Wrapping badge+arrow (or lock) in one flex
   span keeps this a single child of the card's 3-column grid, so the arrow
   never wraps onto its own row under the icon. */
.settings-category-trailing {
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-category-card.is-locked {
  opacity: .72;
}
@media (max-width: 620px) {
  .settings-category-grid {
    grid-template-columns: 1fr;
  }
  .settings-category-card {
    min-height: 76px;
    padding: 14px 16px;
    gap: 12px;
  }
  .settings-category-card .control-plan-badge {
    display: none;
  }
}
/* POS payment summary: total sits under service, actions sit under subtotal. */
.yala-payment-panel .payment-breakdown {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 14px 18px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.yala-payment-panel .payment-breakdown > div {
  display: grid;
  align-content: center;
  min-height: 64px;
  padding: 12px 14px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-line);
  border-radius: 14px;
}
.yala-payment-panel .payment-breakdown .payment-total {
  grid-column: 3;
  grid-row: 2;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 64px;
  background: var(--color-bg-subtle);
  border-color: var(--color-line);
}
.yala-payment-panel .payment-breakdown .payment-total span,
.yala-payment-panel .payment-breakdown > div span {
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 850;
}
.yala-payment-panel .payment-breakdown .payment-total strong {
  color: var(--color-accent-strong);
  font: 800 clamp(22px, 2vw, 30px)/1 var(--font-display);
  letter-spacing: -.035em;
  white-space: nowrap;
}
.yala-payment-panel .payment-breakdown .payment-actions-under-subtotal {
  grid-column: 1;
  grid-row: 2;
  min-height: 64px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.yala-payment-panel .payment-actions-under-subtotal .payment-methods-yala {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch;
  gap: 8px !important;
  width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-height: 64px;
}
.yala-payment-panel .payment-actions-under-subtotal .payment-methods-yala .ops-btn {
  min-width: 0;
  min-height: 64px !important;
  height: 100%;
  padding: 0 12px !important;
  border-radius: 14px !important;
  justify-content: center;
}
@media(max-width:900px){
  .yala-payment-panel .payment-breakdown{grid-template-columns:1fr !important}
  .yala-payment-panel .payment-breakdown .payment-total,
  .yala-payment-panel .payment-breakdown .payment-actions-under-subtotal{grid-column:auto;grid-row:auto}
  .yala-payment-panel .payment-actions-under-subtotal .payment-methods-yala{grid-column:auto}
}
/* Shared table sorting: use the toolbar sort select, not inline header labels. */
.zaki-table-sort-select {
  width: auto;
  min-height: 38px;
  max-width: min(240px, 100%);
  padding: 8px 10px;
  color: var(--color-text);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-line-strong);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 650;
}
.zaki-sortable-th {
  cursor: default;
  user-select: text;
}
.zaki-sortable-th::after,
.zaki-sortable-th[aria-sort="ascending"]::after,
.zaki-sortable-th[aria-sort="descending"]::after {
  content: none !important;
  display: none !important;
}
@media(max-width:620px){
  .zaki-table-sort-select{width:100%;max-width:none}
}
/* POS payment polish: equal tool segments and a clean bottom gutter. */
.yala-pos-layout .cashier-workspace-top.yala-pos-mode-workspace > .cashier-mode-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: min(360px, calc(100% - 32px)) !important;
  max-width: calc(100% - 32px) !important;
  gap: 3px !important;
}
.yala-pos-layout .cashier-workspace-top.yala-pos-mode-workspace > .cashier-mode-tabs a,
.yala-pos-layout .cashier-workspace-top.yala-pos-mode-workspace > .cashier-mode-tabs .cashier-mode-tab {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  line-height: 1 !important;
  text-align: center !important;
}
.yala-payment-panel .payment-breakdown {
  margin: 14px 18px 18px !important;
}
@media(max-width:620px){
  .yala-pos-layout .cashier-workspace-top.yala-pos-mode-workspace > .cashier-mode-tabs {
    width: calc(100% - 24px) !important;
    max-width: none !important;
  }
  .yala-payment-panel .payment-breakdown {
    margin: 14px 14px 18px !important;
  }
}
/* POS payment tabs: keep the Calculator button typography identical to tab links. */
.yala-pos-layout .cashier-workspace-top.yala-pos-mode-workspace > .cashier-mode-tabs a,
.yala-pos-layout .cashier-workspace-top.yala-pos-mode-workspace > .cashier-mode-tabs .cashier-mode-tab {
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--color-text-muted);
}
.yala-pos-layout .cashier-workspace-top.yala-pos-mode-workspace > .cashier-mode-tabs .active {
  color: var(--primitive-ink) !important;
}

/* ── Ask Zaki — floating staff assistant (bottom-right FAB + panel) ──────── */
/* Button/panel carry .ops-notify-btn/.ops-notify-menu alongside these classes
   so wireNotificationMenus() (shared JS) wires open/close/outside-click/
   Escape for free and keeps this panel mutually exclusive with the
   notifications bell. Every visual property is redeclared here rather than
   relying on the shared classes' rules, since this sits bottom-right instead
   of top-right and must not inherit that positioning. */
:root {
  --zaki-ask-clearance: 24px;
}
@media (max-width: 959px) {
  :root {
    --zaki-ask-clearance: calc(84px + env(safe-area-inset-bottom));
  }
}
.zaki-ask-fab {
  position: fixed;
  right: 22px;
  bottom: var(--zaki-ask-clearance);
  left: auto;
  top: auto;
  z-index: 250;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  min-width: 58px;
  min-height: 58px;
  padding: 0;
  color: var(--primitive-ink);
  background: linear-gradient(160deg, var(--color-accent-strong), var(--color-accent));
  border: 2px solid color-mix(in srgb, var(--color-accent-strong) 60%, transparent);
  border-radius: 999px;
  box-shadow: var(--shadow-2, 0 14px 34px rgba(0, 0, 0, 0.28));
  cursor: pointer;
  transition: transform var(--motion-fast), box-shadow var(--motion-fast);
  animation: zaki-fab-bounce 10s ease-in-out infinite;
}
.zaki-ask-fab:hover {
  transform: scale(1.05);
}
.zaki-ask-fab:active {
  transform: scale(0.96);
}
.zaki-ask-fab.active {
  box-shadow: 0 0 0 4px var(--color-accent-soft), var(--shadow-2, 0 14px 34px rgba(0, 0, 0, 0.28));
  /* Idle attention-bounce is pointless (and visually fights the open panel)
     once the panel is actually open. */
  animation-play-state: paused;
}
/* Idle nudge: rest for most of the 10s cycle, then a quick two-tap bounce
   so the FAB reads as "alive" without ever fighting :hover/:active's own
   transform (prefers-reduced-motion is handled globally, dashboard.css:90). */
@keyframes zaki-fab-bounce {
  0%, 82%, 100% { transform: translateY(0); }
  87% { transform: translateY(-12px); }
  91% { transform: translateY(0); }
  95% { transform: translateY(-6px); }
  98% { transform: translateY(0); }
}
.zaki-ask-fab-mark {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  pointer-events: none;
}
.zaki-ask-fab-mark img,
.zaki-ask-fab-mark svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: flex;
}
/* Deliberately no [dir="rtl"] override here, matching the notifications
   bell (.zaki-global-actions, dashboard.css:412) which also stays pinned to
   `right` in Arabic rather than flipping to the left. */

.zaki-ask-panel {
  position: fixed;
  top: auto;
  right: 22px;
  left: auto;
  bottom: calc(var(--zaki-ask-clearance) + 70px);
  z-index: 255;
  flex-direction: column;
  width: min(400px, calc(100vw - 32px));
  max-height: min(72dvh, 600px);
  overflow: hidden;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sheet);
}
/* display is owned by the shared .ops-notify-menu / .ops-notify-menu.active
   toggle (dashboard.css:40) -- this rule used to hardcode `display: flex`
   here unconditionally, which won every cascade tie against that shared
   toggle (equal specificity, declared later) and left the panel visually
   open regardless of the `active` class. Higher-specificity override so the
   panel actually respects open/close instead of being permanently on. */
.zaki-ask-panel.active {
  display: flex;
}
/* Same reasoning as .zaki-ask-fab above: pinned to `right` in both
   directions, matching the notifications menu (.zaki-global-actions
   .ops-notify-menu, dashboard.css:416). */
.zaki-ask-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-line);
}
.zaki-ask-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}
.zaki-ask-close {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  border-radius: 10px;
  line-height: 1;
  cursor: pointer;
}
.zaki-ask-close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.zaki-ask-close:hover {
  background: var(--color-accent-soft);
  color: var(--color-text);
}
.zaki-ask-log {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 14px 16px;
  min-height: 160px;
}
.zaki-ask-bubble {
  max-width: 88%;
  padding: 10px 13px;
  border-radius: 14px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-line);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.zaki-ask-bubble.user {
  align-self: flex-end;
  color: var(--color-text);
  background: var(--color-accent-soft);
  border-color: transparent;
}
.zaki-ask-bubble.assistant {
  align-self: flex-start;
}
.zaki-ask-bubble.error {
  align-self: flex-start;
  color: var(--color-danger);
  background: var(--color-danger-soft, rgba(220, 60, 60, 0.1));
}
.zaki-ask-thinking {
  align-self: flex-start;
  color: var(--color-text-muted);
  font-size: 12px;
}
.zaki-ask-confirm-card {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 13px;
  background: var(--color-accent-soft);
  border: 1px solid rgba(184, 138, 59, 0.36);
  border-radius: 14px;
  font-size: 13px;
}
.zaki-ask-confirm-card strong {
  font-size: 13px;
}
.zaki-ask-confirm-actions {
  display: flex;
  gap: 8px;
}
.zaki-ask-confirm-actions button {
  flex: 1;
  min-height: 38px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
}
.zaki-ask-confirm-btn {
  color: var(--primitive-ink);
  background: var(--color-accent);
  border: 0;
}
.zaki-ask-confirm-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.zaki-ask-cancel-btn {
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-line-strong);
}
.zaki-ask-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 14px;
  background: var(--color-surface-raised);
  border-top: 1px solid var(--color-line);
}
.zaki-ask-input {
  flex: 1;
  min-height: 40px;
  max-height: 120px;
  padding: 9px 12px;
  color: var(--color-text);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  resize: none;
}
.zaki-ask-input:focus {
  outline: none;
  border-color: var(--color-accent);
}
.zaki-ask-send {
  display: grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  color: var(--primitive-ink);
  background: var(--color-accent);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}
.zaki-ask-send:disabled {
  opacity: 0.55;
  cursor: default;
}
@media (max-width: 520px) {
  .zaki-ask-panel {
    right: 12px;
    left: 12px;
    width: auto;
    bottom: calc(var(--zaki-ask-clearance) + 66px);
  }
  [dir="rtl"] .zaki-ask-panel {
    right: 12px;
    left: 12px;
  }
}

/* ── Bill corrections: revenue exclusion badge + Edit Bill modal ──────────
   Both controls hang off an already-made bill (POS payment panel, bill
   cards, Paid History). The badge deliberately reads as "muted/struck", not
   as an error — an excluded bill is a normal, deliberate operator action. */
.bill-excluded-badge{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 9px;border-radius:999px;
  color:var(--color-warning);background:var(--color-warning-soft);border:1px solid rgba(183,121,47,.3);
  font-size:10px;font-weight:800;line-height:1.35;text-align:start}
.bill-excluded-badge .bill-excluded-reason{font-weight:600;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.bill-card.is-excluded strong,.bill-link.is-excluded strong{text-decoration:line-through;opacity:.65}
.bill-correction-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 18px 16px}
.bill-correction-row .bill-correction-note{color:var(--color-text-muted);font-size:11px;font-weight:600}
.bill-edit-modal .ops-modal-card{max-width:720px;width:min(720px,96vw)}
.bill-edit-lines{display:grid;gap:8px;max-height:44vh;overflow:auto;margin:6px 0 12px}
.bill-edit-line{display:grid;grid-template-columns:minmax(0,1fr) 72px 104px 44px;gap:8px;align-items:center}
.bill-edit-line.is-removed{opacity:.45;text-decoration:line-through}
.bill-edit-line.is-comped{background:var(--color-accent-soft);border-radius:8px}
.bill-edit-line-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700}
.bill-edit-line .comp-action,.bill-edit-line .uncomp-action{grid-column:1/-1;justify-self:end;margin-top:-2px;font-size:11px}
/* Cancellation-reason / comp-reason quick-pick grid, shared by
   services/item_voids.py (void) and services/item_comps.py (comp) via
   window.openReasonSheet(). */
.reason-quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.reason-quick-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:52px;padding:8px 10px;text-align:center;white-space:normal;line-height:1.25}
.reason-quick-btn small{display:block;margin-top:2px;color:var(--color-text-muted);font-size:10px;font-weight:600}
.new-order-sent{margin-top:12px;border-top:1px solid var(--color-line)}
.new-order-sent>summary{cursor:pointer;padding:12px 0;min-height:44px;color:var(--color-accent);font-weight:750;font-size:13px}
.new-order-sent[hidden]{display:none}
.new-order-sent-rows .new-order-cart-row-actions,.new-order-sent-rows .new-order-dish-note{display:none}
.new-order-sent-note{display:block;margin-top:5px;color:var(--color-text-muted)}
.new-order-sent-actions{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0}
.new-order-sent-quantity{margin-inline-end:5px;color:var(--color-text-muted)}
.reason-quick-btn.is-active{border-color:var(--color-accent);background:var(--color-accent-soft);color:var(--primitive-ink)}
@media(max-width:420px){.reason-quick-grid{grid-template-columns:1fr}}
/* The reason sheet can open on top of Edit Bill; keep it above that dialog. */
.yn-reason-overlay{z-index:510}
.comp-badge{display:inline-block;padding:1px 7px;border-radius:999px;background:var(--color-accent-soft);color:var(--color-accent);font-size:10px;font-weight:800;text-decoration:none}
.new-order-cart-row.is-comped .new-order-cart-row-total s{color:var(--color-text-muted)}
.new-order-comp-btn,.new-order-uncomp-btn{min-height:44px;font-size:11px}
.item-adjustment-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:14px;margin-top:14px}
.item-adjustment-subhead{margin:14px 0 6px;font-size:13px;font-weight:800}
.item-adjustment-panel .ops-card-note{margin:8px 0 0;font-size:11px}
.bill-edit-line input{width:100%;min-height:40px;padding:0 8px;border-radius:8px;border:1px solid var(--color-line);
  background:var(--color-surface-raised);color:var(--color-text-primary);font-family:inherit;font-size:12px}
.bill-edit-add{display:grid;grid-template-columns:minmax(0,1fr) 72px auto;gap:8px;align-items:center;margin-bottom:10px}
.bill-edit-total{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:800;margin:4px 0 2px}
.bill-edit-status{min-height:18px;color:var(--color-text-muted);font-size:11px;font-weight:600}
.bill-edit-status.is-error{color:var(--color-danger)}
.bill-edit-status.is-warn{color:var(--color-warning)}
@media(max-width:620px){
  .bill-edit-line{grid-template-columns:minmax(0,1fr) 64px 88px 40px}
  .bill-edit-add{grid-template-columns:minmax(0,1fr) 64px auto}
}
.walkin-recommendation{border:1px solid var(--b);background:var(--gf);border-radius:14px;padding:12px 14px}
.walkin-recommendation.is-unavailable{border-color:rgba(255,80,80,.28);background:rgba(255,80,80,.07)}
.walkin-table-picker{display:grid;gap:10px}
.walkin-recommended-row{display:flex;flex-wrap:wrap;gap:8px}
.walkin-recommended-chip{min-height:42px;padding:9px 11px;color:var(--color-text);background:var(--color-bg-subtle);border:1px solid var(--color-line);border-radius:12px;font-size:12px;font-weight:800;text-align:start;cursor:pointer}
.walkin-recommended-chip:hover,.walkin-recommended-chip.active{color:var(--primitive-ink);background:var(--color-accent);border-color:var(--color-accent)}
.walkin-table-select-label{display:block;margin:2px 0 -3px;color:var(--color-text-muted);font-size:10px;font-weight:850;letter-spacing:.045em;text-transform:uppercase}
.walkin-table-select{width:100%;min-height:46px;padding:10px 12px;color:var(--color-text);background:var(--color-bg-subtle);border:1px solid var(--color-line-strong);border-radius:var(--radius-sm)}
.promotion-scope-picker{grid-column:span 2;min-height:48px;color:var(--color-text);background:var(--color-bg-subtle);border:1px solid var(--color-line);border-radius:var(--radius-sm)}
.promotion-scope-picker summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;font-size:13px;font-weight:850;cursor:pointer;list-style:none}
.promotion-scope-picker summary::-webkit-details-marker{display:none}
.promotion-scope-picker summary span{color:var(--color-text-muted);font-size:11px;font-weight:650}
.promotion-service-tools{padding:0 12px 10px}
.promotion-service-search{min-height:42px}
.promotion-service-options{display:grid;gap:12px;max-height:320px;overflow:auto;padding:0 12px 12px}
.promotion-service-category{display:grid;gap:8px}
.promotion-service-category-title{color:var(--color-text-muted);font-size:10px;font-weight:850;letter-spacing:.045em;text-transform:uppercase}
.promotion-service-option{display:flex;align-items:center;gap:9px;min-height:40px;padding:9px 10px;background:var(--color-surface-raised);border:1px solid var(--color-line);border-radius:10px;font-size:12px;font-weight:750;cursor:pointer}
.promotion-service-option:has(input:checked){background:var(--color-accent-soft);border-color:var(--color-accent)}
.promotion-service-option input{width:16px;height:16px;min-height:unset;accent-color:var(--g)}
.promo-submit-row{display:flex;align-items:start}
.promotion-create-btn{width:auto;min-height:42px;padding:10px 16px;border-radius:10px}
.promo-scope-cell{display:inline-block}
.promo-scope-cell>summary{cursor:pointer;list-style:none;color:var(--color-accent-strong);font-weight:800;font-size:12px}
.promo-scope-cell>summary::-webkit-details-marker{display:none}
.promo-scope-cell>summary::after{content:" \25be";color:var(--color-text-muted)}
.promo-scope-cell[open]>summary::after{content:" \25b4"}
.promo-scope-cell>ul{margin:6px 0 2px;padding-inline-start:16px;display:grid;gap:3px}
.promo-scope-cell>ul>li{font-size:12px;font-weight:650;color:var(--color-text-secondary)}
@media(max-width:760px){.promotion-scope-picker{grid-column:1/-1}.promo-submit-row{grid-column:1/-1}}
#control-bill-rules-settings .login-remember,#control-passkey-settings .login-remember{color:var(--t);font-weight:750}
#control-bill-rules-settings input[type=checkbox]{width:18px;height:18px;min-height:unset;accent-color:var(--g)}
#passkey-register-status{min-height:18px;margin-top:4px}
/* Staff POS modifier picker. */
.new-order-modifier-dialog{z-index:260}
.new-order-modifier-card{width:min(560px,calc(100vw - 24px));max-height:90dvh;overflow:auto}
.new-order-modifier-body{padding:16px 0}
.new-order-modifier-group{display:grid;gap:8px;margin:0 0 16px;padding:0;border:0}
.new-order-modifier-group legend{margin-bottom:4px;color:var(--color-text-secondary);font-size:11px;font-weight:850;letter-spacing:.045em;text-transform:uppercase}
.new-order-modifier-option{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 12px;color:var(--color-text);background:var(--color-bg-subtle);border:1px solid var(--color-line);border-radius:var(--radius-sm);cursor:pointer}
.new-order-modifier-option:has(input:checked){background:var(--color-accent-soft);border-color:var(--color-accent)}
.new-order-modifier-option input{flex:0 0 auto}
.new-order-modifier-option span{flex:1;font-weight:750}
.new-order-modifier-option small{color:var(--color-accent-strong);font-weight:800}
.new-order-modifier-total{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--color-line);font-size:13px}
.new-order-modifier-total strong{color:var(--color-accent-strong);font-size:17px}

/* Remaining dashboard caveat polish. */
.staff-profile-link{color:inherit;text-decoration:none;border-bottom:1px solid rgba(184,138,59,.45)}
.staff-profile-link:hover{color:var(--color-accent-strong);border-color:currentColor}
#ops-floor-scale-wrap{height:clamp(420px,56vh,620px);max-width:100%;overflow:hidden;border-radius:0;background:var(--color-bg-subtle)}
#ops-floor-scale-wrap #ops-floor-canvas{max-width:none;will-change:transform}
.cash-request-card{display:grid;gap:14px;padding:16px 18px;border-top:1px solid var(--color-line);border-left:3px solid var(--color-accent-strong);background:linear-gradient(180deg,color-mix(in srgb,var(--color-accent) 8%,var(--color-surface)),var(--color-surface))}
.cash-request-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cash-request-head strong{display:block;font-size:14px;color:var(--color-accent-strong);font-weight:850}
.cash-request-table{display:inline-block;margin-top:3px;font-size:12px;font-weight:750;color:var(--color-text-muted);padding:2px 8px;border-radius:999px;background:var(--color-bg-subtle)}
.cash-request-due{text-align:right;line-height:1.2}
.cash-request-due span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted)}
.cash-request-due strong{font-size:19px;color:var(--color-text);font-weight:900}
.cash-request-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px 12px}
.cash-request-fields label{display:grid;gap:4px;font-size:11px;font-weight:750;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.03em}
.cash-request-card input,.cash-request-card select{width:100%;min-height:42px}
.cash-request-change{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:10px;background:var(--color-bg-subtle);font-size:13px;font-weight:800}
.cash-request-change strong{font-size:16px;font-weight:900}
.cash-request-card.cash-request-short .cash-request-change{background:color-mix(in srgb,var(--color-danger) 14%,var(--color-surface));color:var(--color-danger)}
.cash-request-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cash-request-actions .ops-btn{flex:1 1 auto;min-height:44px}
.cash-request-actions .ops-btn.ghost{flex:0 1 auto}
.cash-request-error{min-height:0;color:var(--color-danger);font-size:12px;font-weight:750}
.cash-request-error:empty{display:none}
.analytics-header{padding:18px 0 6px;border-bottom:0;background:transparent}
.analytics-dashboard .rpt-section,.owner-analytics-dashboard .rpt-section,.branch-dashboard .rpt-section,.staff-money-dashboard .rpt-section{background:linear-gradient(180deg,var(--color-surface),color-mix(in srgb,var(--color-surface) 74%,var(--color-bg)));border-color:rgba(184,138,59,.18)}
.owner-kpi-strip{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.heat-wrap{overflow:auto;padding-bottom:4px}
.heat-grid{display:grid;grid-template-columns:repeat(24,minmax(28px,1fr));gap:4px;min-width:760px}
.heat-cell{height:30px;display:flex;align-items:center;justify-content:center;color:var(--primitive-ink);background:var(--color-accent);border-radius:4px;font-size:10px;font-weight:850}
.heat-labels{display:grid;grid-template-columns:repeat(7,1fr);max-width:780px;margin-top:10px;color:var(--color-text-muted);font-size:11px;text-align:center}
.benchmark-panel{display:grid;gap:12px}
.staff-money-shortcuts .card-body{padding-top:14px}
@media(max-width:840px){
  .cash-request-card{grid-template-columns:1fr}
  .cash-request-actions{justify-content:flex-start}
  .heat-grid{grid-template-columns:repeat(24,30px)}
}


/* ══════════════════════════════════════════════════════════════════════════
   MOBILE + TABLET VIEW PASS (2026-09-04)
   Appended last on purpose: this is where the phone / portrait-tablet layout
   is actually decided. Tiers (see the breakpoint note at the top of the file):
     <=520  compact phone   |  <=780  phone (1 col, tables stack)
     781-959 portrait tablet (2 col, capped 880, real tables)  |  >=960 rail
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Opaque nav on mobile + scroll clearance + iOS input-zoom guard ─────── */
@media (max-width:959px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  select,textarea,.form-input,.form-select,.form-textarea{font-size:16px}
}
@media (max-width:959px){
  html{scroll-padding-top:84px}
  .nav{background:var(--color-bg)}
  .nav-center{background:var(--color-surface)}
  .settings-section,.ops-panel,.card,.zaki-arrivals-panel,.zaki-readiness-panel,
  .zaki-automation-panel{scroll-margin-top:88px}
  /* every shell needs the same clearance under the (now opaque) fixed top bar */
  .ops-shell,.ops-shell.page,.fp-wrap,.rpt-wrap,
  .zaki-settings-page,#tab-settings .zaki-settings-page{
    padding-top:82px;
  }
  /* .nav/.icon-btn/etc use hardcoded near-white foregrounds (dark-theme-only
     base rules) -- the light-theme corrections for those exist ONLY inside
     the >=960px rail block, so making the bar opaque here without also
     recoloring its contents put near-white icons/text on a light (#eeede7)
     background: search, settings, bug-report, theme and notification
     controls all but disappeared in light mode. Mirrors the >=960 overrides. */
  :root.light .nav{color:var(--color-text)}
  :root.light .nav-brand{color:var(--color-text)}
  :root.light .icon-btn,:root.light .lang-btn,:root.light .gear-btn,
  :root.light .ops-notify-btn,:root.light .staff-switcher-btn{
    color:var(--color-text-secondary);
    background:rgba(17,23,22,.045);
    border-color:rgba(17,23,22,.10);
  }
  :root.light .nav-tab{color:var(--color-text-secondary)}
  /* The phone nav remains deliberately dark in light mode. Preserve the
     bronze active label rather than applying light-page foreground text,
     which is near-black and unreadable on this pill. */
  :root.light .nav-tab.active{color:var(--color-accent-strong);background:rgba(184,138,59,.22)}
}

/* ── Hero compaction — one rule set, every page ────────────────────────── */
@media (max-width:959px){
  .zaki-showcase-topbar,.ops-hero,.page-header{
    display:flex;flex-direction:column;align-items:stretch;gap:8px;
    margin-bottom:12px;padding-right:0;
  }
  /* border-radius+overflow:hidden from the desktop "card" rules (base
     :63/:414/:480) survive this reset -- with padding:0 the heading's own
     box shares the exact same top-left corner as .ops-hero, so its rounded
     arc clips straight into the first glyph ("F"/"I" losing their left
     edge -- "cropped like a circle from the corner", 2026-09-04 QA). The
     chrome here is fully stripped (transparent/no border/no shadow) so
     there is no visible box left to round or clip. */
  .ops-hero{background:transparent;border:0;box-shadow:none;padding:0;overflow:visible;border-radius:0}
  .zaki-showcase-topbar h1,.ops-hero h1,.page-title{
    font-size:22px;line-height:1.14;letter-spacing:-.02em;padding-right:52px;
  }
  .zaki-page-kicker,.ops-eyebrow{font-size:10px;margin:0}
  .page-sub,.ops-hero p,.zaki-showcase-topbar .page-sub{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;font-size:11px;margin:0;white-space:normal;max-width:none;
  }
  .zaki-showcase-status,.ops-hero-actions,.zaki-header-actions{
    width:100%;max-width:none;justify-content:flex-start;flex-wrap:wrap;gap:8px;
  }
  .zaki-showcase-status>.btn,.zaki-showcase-status>.ops-btn,
  .zaki-showcase-status>a[class*="primary"],.ops-hero-actions>.btn,
  .ops-hero-actions>.ops-btn,.zaki-today-primary,
  .page-header>.btn,.page-header>.ops-btn{flex:1 1 auto;min-width:140px}
  /* bare <svg> icons inside compacted action buttons have no intrinsic size */
  .zaki-showcase-topbar .btn svg,.zaki-showcase-topbar .ops-btn svg,
  .ops-hero .btn svg,.ops-hero .ops-btn svg,
  .page-header .btn svg,.page-header .ops-btn svg{
    width:18px;height:18px;min-width:18px;flex:0 0 auto;
  }
}
@media (min-width:781px) and (max-width:959px){
  .zaki-showcase-topbar h1,.ops-hero h1,.page-title{font-size:26px}
  .page-sub,.ops-hero p,.zaki-showcase-topbar .page-sub{-webkit-line-clamp:2;font-size:12px}
}
@media (max-width:520px){
  .zaki-page-kicker,.ops-eyebrow{display:none}
  .zaki-showcase-topbar h1,.ops-hero h1,.page-title{font-size:20px}
}

/* ── Today → scrolling stack on phone, 2-col on portrait tablet ────────── */
@media (max-width:959px){
  main#main-content.dashboard-main-overview{height:auto;max-height:none;overflow:visible;padding-bottom:22px}
  .overview-page{height:auto;min-height:0;max-height:none;overflow:visible}
  #tab-overview.yn-tab-panel.active{height:auto;overflow:visible}
  .zaki-today-showcase{display:flex;flex-direction:column;gap:10px;height:auto;min-height:0}
  .zaki-arrivals-list:empty{display:none}
  .zaki-arrival-empty{min-height:88px}
  .zaki-arrivals-panel{grid-row:auto}
  .zaki-panel-head{flex-wrap:wrap;gap:4px 10px;min-height:0}
  .zaki-arrivals-panel>.zaki-panel-head{flex-direction:column;align-items:stretch;gap:8px}
  .zaki-arrivals-head-actions{width:100%;justify-content:space-between;flex-wrap:nowrap;gap:10px}
  .zaki-arrivals-total{order:0;width:auto}
}
@media (max-width:959px){
  .overview-page{padding:82px 12px calc(84px + env(safe-area-inset-bottom))}
  .zaki-showcase-grid{
    display:flex;flex-direction:column;gap:10px;
    grid-template-columns:none;grid-template-rows:none;margin:0;
  }
  .zaki-showcase-grid>*{min-height:0}
}
@media (min-width:781px) and (max-width:959px){
  .overview-page{padding-inline:22px}
}
/* automation card: value stacks under its label so "EGP x" can't collide */
@media (max-width:600px){
  .zaki-automation-action{
    grid-template-columns:38px minmax(0,1fr)!important;
    grid-template-areas:"icon copy" "icon value"!important;
    grid-template-rows:auto auto!important;
    align-items:center!important;min-height:66px!important;
    padding:11px 13px!important;gap:2px 10px!important;
  }
  .zaki-automation-action>.zaki-automation-icon{grid-area:icon;align-self:center}
  .zaki-automation-action>span:nth-child(2){grid-area:copy;align-self:end}
  .zaki-automation-action>b{
    grid-area:value;align-self:start;justify-self:start!important;
    min-width:0!important;max-width:100%!important;
    font-size:20px!important;text-align:start!important;padding:0!important;
  }
  .zaki-automation-action strong{white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
}

/* Desktop Today: let the original two-row dashboard grid size itself.
   The fixed viewport grid can otherwise collapse the arrivals row to zero
   height, leaving only its border visible at laptop sizes.

   2026-09-13 (user-caught): this is now the SINGLE, authoritative grid
   placement for all four Today panels at this breakpoint (see the other
   (min-width:960px) and (min-height:860px) block near line 601 for why
   that one used to also place two of these panels, at the same
   breakpoint, and how that collided). Requested layout: Arrivals top-
   left, Automation below it (bottom-left), Table Status right column
   spanning both rows, Service Flow full-width beneath everything --
   three rows, not two.

   2026-09-14 (Task 4, container-height defect): this block used to ALSO
   win the container-level height/overflow properties (main#main-content.
   dashboard-main-overview / #tab-overview.yn-tab-panel.active /
   .overview-page) with height:auto/overflow:visible -- because it comes
   later in the file than the block at line ~345 that sets the no-scroll
   values (height:100dvh/overflow:hidden) for the exact same selectors at
   the exact same breakpoint, equal specificity means later wins. That was
   the actual page-scroll cause confirmed live in .superpowers/sdd/
   task-4-brief.md, at EVERY width in this breakpoint, not just the band
   Task 3 widened. Since this block is already documented as "the SINGLE
   authoritative" one for these panels, it now also carries the no-scroll
   container values directly, instead of relying on the earlier block to
   win. The 3-row grid's flexible row (Arrivals + top of Table Status) is
   now `minmax(160px,1fr)` instead of `auto` so it can shrink to fit a
   short viewport instead of forcing the container to scroll, while the
   two FIXED-length panels (Automation: always 3 stat cards; Service Flow:
   always 4 stage + 4 KPI boxes -- neither grows with data volume) keep
   `auto` rows and are compacted below so they leave a real height budget
   for the two panels that actually vary with data (Arrivals list, Table
   Status command-grid -- the latter also gains overflow-y:auto in the
   "Today fit pass: Floor Readiness" block above, so a 3rd+ row of tables
   scrolls internally instead of forcing this same conflict again). */
@media (min-width:960px) and (min-height:860px){
  main#main-content.dashboard-main-overview{height:100dvh;max-height:100dvh;overflow:hidden}
  #tab-overview.yn-tab-panel.active{height:100%;overflow:hidden}
  .overview-page{height:100%;min-height:0;max-height:100%;overflow:hidden}
  .zaki-today-showcase{height:100%;min-height:0;grid-template-rows:auto auto minmax(0,1fr)}
  .zaki-showcase-grid{grid-template-rows:minmax(160px,1fr) minmax(134px,auto) minmax(170px,auto);overflow:visible;min-height:0}
  .zaki-arrivals-panel{grid-column:1;grid-row:1;min-height:0}
  .zaki-readiness-panel{grid-column:2;grid-row:1/span 2;min-height:0}
  .zaki-automation-panel{grid-column:1;grid-row:2;min-height:0}
  /* align-self:start (was :end, unconditionally set at dashboard.css ~563
     and re-asserted at this same breakpoint at ~588): when this panel's
     real content is taller than its row's floor, :end anchors its BOTTOM
     to the track's bottom edge, so the overflow bleeds UPWARD into
     Automation's row above it -- confirmed live, a real ~20-80px visual
     overlap depending on viewport. :start anchors the TOP instead, so any
     overflow bleeds downward past the grid's own bottom edge, where the
     ancestor chain's overflow:hidden clips it invisibly instead of
     overlapping a sibling -- much safer failure mode at the tight corner
     of this breakpoint. */
  /* overflow-y:auto (Task 8, defense in depth): Service Flow's own content
     (head + fixed 4-stage row + fixed 4-KPI row) is fixed-count, but the
     row floor above (170px) is a minimum computed from TODAY's data, not
     a guarantee for every future content volume (a longer stat, an added
     KPI). .zaki-service-flow-panel carries `overflow:hidden` unconditionally
     at dashboard.css ~563 -- without this override, any future overflow
     here is silently clipped exactly like the bug this task fixes, instead
     of scrolling internally the way `.zaki-readiness-panel .zaki-command-grid`
     already does above. No-op visually while content fits (no scrollbar
     renders unless it actually overflows). */
  .zaki-service-flow-panel{grid-column:1/-1;grid-row:3;min-height:0;align-self:start;overflow-y:auto}
  /* Automation and Service-Flow are fixed-length (never grow with data) --
     compact them here so the flexible row above (Arrivals/Table Status,
     the two panels that DO grow with data) keeps a real usable height
     budget even at the tightest corner of this breakpoint (960x860).
     !important on the automation-action rules is required to beat the
     pre-existing !important set at the same breakpoint by the "Annotation
     correction pass" block above (dashboard.css ~2248) -- without it these
     values are silently ignored (confirmed live: the non-!important
     version below rendered at the OLDER 82px card height, not this one). */
  .zaki-automation-panel{padding:10px}
  .zaki-automation-action{min-height:56px!important;padding:8px 10px!important}
  .zaki-service-flow-head{margin-bottom:6px}
  .zaki-flow-stage-row,.zaki-flow-kpi-row{margin-bottom:6px}
  .zaki-flow-stage{min-height:48px;padding:8px 10px}
  .zaki-flow-kpi{min-height:42px;padding:8px 10px}
  body.ar .zaki-flow-kpi{min-height:42px;padding:8px 10px}
  .zaki-flow-stage strong{font-size:20px}
  .zaki-flow-kpi strong{font-size:15px}
}
/* Automation's row floor above (134px) assumes the 3-across card layout
   `.zaki-automation-actions` normally only uses at >=1100px (existing
   breakpoint, dashboard.css ~1710 -- not invented here); below 1100px the
   same rule stacks those 3 cards into 3 rows, which at ~71px/card+gaps
   needs ~280px+ -- confirmed live this leaves no usable room left for
   Service Flow at the 960x860 floor (it was pushed entirely off-screen,
   not just cramped, which is worse than the "acceptable tight corner"
   this feature is allowed). Cheaper fix: force the SAME 3-across layout
   this component already uses at wider widths, all the way down to
   960px, only inside this no-scroll breakpoint (this does not touch the
   1100px rule's *own* behavior for any page/breakpoint outside this exact
   band -- a portrait/short-viewport render of this page, if one exists
   below min-height:860px, still gets the original 3-stacked treatment).
   960px is comfortably enough width for 3 compact cards side by side
   (confirmed live, screenshot). */
@media (min-width:960px) and (min-height:860px) and (max-width:1100px){
  .zaki-automation-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

/* ── Width guard: workspace pages must not be widened by a nested table ── */
@media (max-width:1200px){
  .zaki-workspace-page,.zaki-team-page,.zaki-guests-workspace,
  .zaki-workspace-page>*,.zaki-team-page>*,
  .zaki-workspace-page .card,.zaki-team-page .card,
  .zaki-workspace-page .card>*,.zaki-team-page .card>*{min-width:0;max-width:100%}
  .zaki-workspace-page .table-wrap,.zaki-team-page .table-wrap,
  .zaki-workspace-page .ops-table-wrap,.zaki-team-page .ops-table-wrap,
  .staff-role-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ── KPI strips: right-sized, all values visible without scrolling ─────── */
@media (max-width:780px){
  .zaki-showcase-metrics,.stats-grid,.stats,.kpi-grid,.management-kpis,.ops-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
  }
  .stat-card,.stat,.kpi,.ops-kpi{min-height:0;padding:12px 13px}
  .stat-value,.kpi-value,.ops-kpi strong{font-size:20px}
  .stat-label,.kpi-label{font-size:10px;margin-bottom:4px}
  .zaki-showcase-card{min-height:78px;padding:10px}
  .zaki-showcase-card strong{font-size:22px}
  .zaki-team-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .zaki-team-metrics .stat-card,.zaki-team-metrics .stat,
  .zaki-team-metrics .kpi{padding:10px 8px}
}

/* ── Portrait tablet 781-959: a real considered layout, not a dead zone ── */
@media (min-width:781px) and (max-width:959px){
  .page,.container,.ops-shell,.ops-shell.page,.fp-wrap,.rpt-wrap,
  .zaki-settings-page,#tab-settings .zaki-settings-page{
    max-width:880px;width:auto;margin-inline:auto;padding-inline:22px;
  }
  /* Match the phone tier's top bar (dashboard.css:103, :441): hide the brand
     + venue/role chips and the staff switcher. Without the account zone
     .nav-right fits the nav's `auto` grid column in one row instead of
     wrapping onto the page title -- but the settings gear is owner/manager
     only (routes/dashboard.py can_manage_settings) and host has no "me"
     bottom-nav tab either, so host would be left with NO path to
     /dashboard/account if the zone were unconditionally hidden. Hide it for
     everyone except host; host keeps the fixed avatar instead (its smaller
     .nav-right, missing the gear, still fits one row without it).
     .nav-logout (the only sign-out affordance in the app -- account_links_html
     is always empty, and /dashboard/account renders this same nav) is hidden
     unconditionally by the BASE rule at dashboard.css:47
     (.nav-right>.btn-ghost{display:none}), restored only at >=960 (:83) and
     re-hidden at <=780 (:103) -- so it needs its own explicit restore here,
     scoped to .nav-logout and not the whole .btn-ghost family so nothing
     else it might match gets un-hidden. */
  .nav-venue,.nav-role-chip,.nav-brand,.nav-left>span[style*="font-size"]{display:none}
  .nav-right>.staff-switcher,.nav-right>.staff-switcher-btn-locked{display:none}
  .nav-right>.nav-logout{display:inline-flex}
  .nav-account-zone{display:none}
  .nav[data-role="host"] .nav-account-zone{
    display:grid;position:fixed;z-index:260;
    top:max(12px,env(safe-area-inset-top));
    right:calc(max(12px,env(safe-area-inset-right)) + 52px);
    grid-template-columns:auto;gap:0;
  }
  .nav[data-role="host"] .nav-account-zone .nav-account-name,
  .nav[data-role="host"] .nav-account-zone .nav-account-branch,
  .nav[data-role="host"] .nav-account-zone .nav-account-links{display:none}
  /* 2026-09-15: the "Switch account" widget moved from .nav-right (hidden
     at this band by the rule two lines up) to being the first child of
     .nav-account-zone -- host's fixed single-avatar treatment above hides
     the identity/branch/links text but not arbitrary children, so without
     this it would show a full label+avatar button crammed into what's
     meant to be a small circular avatar. Keep it hidden here exactly like
     it always was as a .nav-right child. */
  .nav[data-role="host"] .nav-account-zone>.staff-switcher,
  .nav[data-role="host"] .nav-account-zone>.staff-switcher-btn-locked{display:none}
  .nav-right{gap:6px}
  /* the fixed host avatar (above) occupies roughly right:64-108px; give
     host's .nav-right that much clearance so the restored logout button
     (its rightmost flex child, flush against the nav's own edge padding)
     doesn't run partly under it */
  .nav[data-role="host"] .nav-right{padding-right:56px}
  .nav-center{max-width:600px;margin-inline:auto;left:0;right:0}
  .zaki-workspace-grid,.control-groups,.guests-grid,.ops-grid-two,
  .zaki-workspace-actions,.zaki-guests-workspace .guests-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .ops-layout,.host-layout,.yala-floor-layout,.cashier-workspace-top,
  .new-order-layout,.zaki-flow-panel{grid-template-columns:1fr}
  .table-map,.ops-table-map,.yala-floor-map{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kanban,.kitchen-board{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── Phone top bar: search bar + one account-menu avatar instead of 5 icon
   buttons ("too much buttons", 2026-09-04 QA) ───────────────────────────
   Settings/Report-a-bug/Theme/Language collapse into .nav-account-menu (a
   duplicate of each control's exact same onclick/href, wired for free by
   the shared data-notify-toggle contract wireNotificationMenus() already
   handles for the Zaki panel and the notifications bell). The notification
   bell itself (.zaki-global-actions, a sibling of <nav>, not a .nav-right
   child) is untouched -- always visible outside this menu, as asked.
   .nav-account-menu is a plain div (not .ops-notify) because
   `.nav-right>.ops-notify{display:none!important}` (dashboard.css:456)
   would otherwise hide it unconditionally at every width. */
.nav-account-menu{display:none}
.nav-account-menu-btn{display:flex;align-items:center;gap:5px;padding:0 10px 0 0;width:auto;min-width:0}
.nav-account-menu-avatar{display:grid;place-items:center;width:30px;height:30px;overflow:hidden;color:var(--color-accent-strong);background:var(--color-accent-soft);border-radius:50%;font-size:11px;font-weight:900}
.nav-account-menu-avatar img{width:100%;height:100%;object-fit:cover}
.nav-account-menu-caret{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav-account-menu-panel{display:none;flex-direction:column;padding:6px;gap:2px}
.nav-account-menu-panel.active{display:flex}
.nav-account-menu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;color:var(--color-text);background:transparent;border:0;border-radius:11px;font-size:13px;font-weight:700;text-decoration:none;cursor:pointer}
.nav-account-menu-item:hover{background:var(--color-accent-soft)}
.nav-account-menu-item svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-account-menu-item .theme-icon-moon{display:none}
:root.light .nav-account-menu-item .theme-icon-sun{display:none}
:root.light .nav-account-menu-item .theme-icon-moon{display:block}
.nav-account-menu-divider{height:1px;margin:4px 6px;background:var(--color-line)}
.nav-account-menu-logout{color:var(--color-danger,#c0392b)}
@media (max-width:959px){
  #mainNav .nav-right{flex:1;min-width:0}
  #mainNav .nav-right>.nav-logout{display:none}
  #mainNav .nav-right .global-search{flex:1;min-width:0}
}
.nav-account-menu-header{display:flex;align-items:center;gap:10px;padding:8px 10px}
.nav-account-menu-header-avatar{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;overflow:hidden;color:var(--color-accent-strong);background:var(--color-accent-soft);border-radius:50%;font-size:12px;font-weight:900}
.nav-account-menu-header-avatar img{width:100%;height:100%;object-fit:cover}
.nav-account-menu-header-copy{display:grid;gap:1px;min-width:0}
.nav-account-menu-header-name{overflow:hidden;color:var(--color-text);font:800 13px/1.2 var(--font-display);text-overflow:ellipsis;white-space:nowrap;text-decoration:none}
.nav-account-menu-header-copy .nav-account-branch{overflow:hidden;color:var(--color-text-muted);font-size:11px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.nav-account-menu-header-copy .branch-switcher-summary{cursor:pointer;list-style:none}
.nav-account-menu-header-copy .branch-switcher-summary::-webkit-details-marker{display:none}
/* .branch-switcher-upward opens its menu upward for the sidebar-bottom
   position account_branch_html was designed for -- nested here inside
   .nav-account-menu-panel (fixed near the top of the viewport), it needs to
   open downward like the plain .branch-switcher-menu again or it goes
   off-screen above the panel. */
.nav-account-menu-header .branch-switcher-upward .branch-switcher-menu{bottom:auto;top:100%;margin-top:6px;margin-bottom:0}
.nav-account-menu-panel .staff-switcher{width:100%}
.nav-account-menu-panel .staff-switcher-btn{width:100%;justify-content:flex-start;gap:10px;min-height:44px;padding-inline:12px;color:var(--color-text);background:transparent;border:0;border-radius:11px;font-size:13px;font-weight:700}
.nav-account-menu-panel .staff-switcher-btn:hover{background:var(--color-accent-soft)}
.nav-account-menu-panel .staff-switcher-label{display:inline}
.nav-account-menu-panel .staff-switcher-btn-locked{display:flex;width:100%;justify-content:flex-start;gap:10px;min-height:44px;padding-inline:12px;opacity:.68;text-decoration:none}
.nav-account-menu-panel .staff-switcher-btn-locked .staff-switcher-lock{margin-inline-start:auto;width:16px;height:16px;flex:0 0 auto}
.nav-account-zone-toggle{grid-column:3;grid-row:1/3;align-self:center;justify-self:end;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;color:var(--color-text-muted);background:transparent;border:0;border-radius:7px;cursor:pointer}
.nav-account-zone-toggle:hover,.nav-account-zone-toggle.active{background:var(--color-accent-soft);color:var(--color-text)}
.nav-account-zone-toggle svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--motion-fast)}
.nav-account-zone-toggle.active svg{transform:rotate(180deg)}
@media (max-width:959px){
  .nav-right>.nav-settings-shortcut,.nav-right>#bug-report-btn,
  .nav-right>#theme-btn,.nav-right>#lang-btn{display:none}
  .nav-account-menu{display:block}
  /* The notifications bell (.zaki-global-actions, dashboard.css:451) is
     `position:fixed` in the same top-right corner .nav-right's own content
     flows into -- it isn't a .nav-right child, so nothing here pushes it
     out of the way automatically. The old 5-icon row happened to stay
     short enough to clear it; the new full-width search bar does not
     (its trailing content -- and the click target underneath it -- ended
     up physically behind the bell). Reserve the same clearance already
     used for page headers instead of guessing a new number. */
  .nav-right{padding-right:var(--zaki-global-actions-clearance)}
  /* !important: the nav carries .zaki-app-rail unconditionally (both the
     phone top bar and the >=960 rail are the same _nav() markup), so the
     desktop-only `.zaki-app-rail .global-search-btn-label{...}` rules
     (compound selector, higher specificity than a bare class) and the
     unconditional `.global-search-btn-label{display:none}` base rule
     (dashboard.css:798) both outrank a same-specificity or lower-specificity
     override here regardless of source order. */
  .nav-right .global-search{flex:1 1 auto;width:auto;min-width:0!important}
  /* Match the >=960 rail's search bar look (dashboard.css:809) instead of
     the plain icon-chip styling every other .icon-btn gets -- a search
     trigger should read as a bar, not a button. */
  .nav-right .global-search-btn{width:100%!important;max-width:none!important;height:44px;display:flex!important;align-items:center;justify-content:flex-start!important;gap:12px;padding:0 16px!important;background:linear-gradient(135deg,rgba(238,237,231,.1),rgba(184,138,59,.16));border-color:rgba(238,237,231,.18);border-radius:999px;box-shadow:0 12px 30px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.06)}
  :root.light .nav-right .global-search-btn,:root[data-theme="light"] .nav-right .global-search-btn{background:linear-gradient(135deg,rgba(18,16,13,.05),rgba(184,138,59,.1));border-color:rgba(18,16,13,.14)}
  .nav-right .global-search-btn-label{display:inline!important;overflow:hidden;color:var(--color-text-muted);font-size:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
}

/* ── Tablet and laptop (960px and up): collapsible rail ─────────────────
   Below 960 the rail isn't rendered at all (bottom tab bar instead --
   dashboard.css:82's load-bearing switch, untouched). At >=960, the
   collapsible rail mechanism activates. The CSS itself treats all widths
   >=960 identically (overlay, not push); the JS default-open state is now
   also uniform across the whole band -- closed at every width >=960px,
   tablet and laptop alike (corrected 2026-09-14, see the dated note in
   docs/superpowers/specs/2026-09-13-tablet-laptop-dashboard-layout-design.md
   -- a per-band default-open split is what let content hide under an opaque
   rail with a full-page scrim for every first-time >=1280px visitor).
   #railToggleBtn (routes/dashboard.py, spliced as
   a sibling right before <nav>) and JS (inline script right after </nav>)
   toggle `body.rail-open` and persist the choice in localStorage. */
.rail-toggle-btn{
  display:none;position:fixed;top:50%;z-index:210;
  align-items:center;justify-content:center;width:44px;min-width:44px;height:56px;
  padding:0;color:var(--color-text-secondary);
  background:var(--color-surface-raised);border:1px solid var(--color-line-strong);
  border-inline-start:0;border-radius:0 14px 14px 0;box-shadow:var(--shadow-1);
  cursor:pointer;
  /* button,a,[role="button"]{touch-action:manipulation} (dashboard.css:45)
     still lets the browser claim a vertical drag as page-scroll before our
     own pointermove ever sees it -- the handle is draggable in name only on
     a real touchscreen without this (reviewer-caught). */
  touch-action:none;
}
.rail-toggle-btn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--motion-base) var(--ease-out)}
@media (min-width:960px){
  .rail-toggle-btn{display:flex;left:0;transform:translateY(-50%);transition:left var(--motion-base) var(--ease-out)}
  body.rail-open .rail-toggle-btn{left:var(--rail-width)}
  body.rail-open .rail-toggle-btn svg{transform:rotate(180deg)}
  /* left, not transform: a transform on .nav becomes the CSS containing
     block for every position:fixed descendant inside it -- and the search
     bar wrapper (.nav-right>.global-search, >=960 rule) and the Ask-Zaki
     FAB button (.zaki-ask-fab) both live inside <nav> and both rely on
     position:fixed resolving against the real viewport. With a transform
     here they instead moved with the rail's slide (search bar shifting
     when the sidebar opens; the FAB only sitting correctly bottom-right
     while the rail happened to be open, reported "ask zaki button is
     inside side bar", 2026-09-06 QA). left animates just as smoothly here
     -- one 250px-wide fixed panel, not a scroll-linked or high-frequency
     animation -- without creating that trap. */
  .nav.zaki-app-rail{
    left:calc(-1 * var(--rail-width));transition:left var(--motion-base) var(--ease-out);
    z-index:200;box-shadow:var(--shadow-sheet);
  }
  /* Keep the branch picker above the rail handle while the rail is open;
     otherwise the handle cuts into its menu at tablet widths. */
  body.rail-open .nav.zaki-app-rail{left:0;z-index:220}
  /* Overlay, not squash: content stays full-width whether the rail is open
     or closed in this band -- the rail is already position:fixed (base
     .nav rule) and slides on TOP of the page instead of pushing it over
     ("go above the other stuff not squash", round 3 QA). A translucent
     scrim behind the open rail (below) makes the overlay relationship
     visually obvious and gives a tap-to-close target. */
  .page,.container,
  .ops-shell,.ops-shell.page,
  .fp-wrap.floor-plan-page,
  #tab-settings .zaki-settings-page{
    margin-left:0!important;width:100%!important;max-width:100vw!important;
  }
  #tab-settings.yn-tab-panel.active{max-width:100vw!important}
  .zaki-global-actions{right:max(18px,env(safe-area-inset-right))}
  .rail-scrim{
    display:none;position:fixed;inset:0;z-index:150;
    background:rgba(0,0,0,.4);
  }
  body.rail-open .rail-scrim{display:block}
}

/* ── Ask-Zaki below the rail breakpoint: the top-left logo is the trigger,
   not a nav-bar cell or a floating bubble ───────────────────────────────
   Round 2 docked the FAB as a 6th .nav-center cell to get it off the
   content it used to float over -- but 6 columns (5 tabs + the FAB) don't
   fit a 320-430px bar; "Operations" was clipped by the FAB's own circle.
   Round 3: below 960 the FAB (routes/dashboard.py:ZAKI_ASK_FAB_BUTTON_HTML)
   is hidden outright, and the top-left brand logo (.nav-logo-box, always
   present in .nav-left) becomes the trigger instead -- it already carries
   data-notify-toggle/aria-controls="zaki-ask-panel" in the markup, so
   wireNotificationMenus() wires it for free, same id-based contract as
   before. >=960 is unchanged: the FAB still renders as the original
   floating rail-gutter bubble via the base `.zaki-ask-fab` rule, which is
   already "always there bottom-right" on tablet without any extra work
   here -- the .nav-logo-box trigger only matters below 960 where the FAB
   is hidden. */
/* Unscoped (not just <960): the logo becomes a `<button class="nav-logo-box
   ops-notify-btn">` whenever Ask-Zaki is enabled at all (both bands render
   it, only the trigger role differs), so the chip-style reset from
   .ops-notify-btn (padding/background/border, dashboard.css:47) must be
   undone everywhere that class combo appears -- leaving this inside the
   <960 media block let the desktop rail logo inherit a bordered, padded
   chip, shrinking the 46px image to ~20px inside it (reviewer-caught). */
.nav-logo-box.ops-notify-btn{
  padding:0;background:transparent;border:0;border-radius:12px;box-shadow:none;
}
.nav-logo-box.ops-notify-btn:hover,.nav-logo-box.ops-notify-btn.active{
  background:var(--color-accent-soft);
}
/* :root.light .ops-notify-btn (dashboard.css light-theme block, both bands)
   outranks the reset above (0,3,0 vs 0,2,0) and re-tints the logo with a
   faint chip background in light mode -- no size regression (that rule
   carries no padding), but visually it should stay fully transparent like
   the rest of the brand mark. */
:root.light .nav-logo-box.ops-notify-btn{background:transparent}
:root.light .nav-logo-box.ops-notify-btn:hover,
:root.light .nav-logo-box.ops-notify-btn.active{background:var(--color-accent-soft)}
/* Phone top-left mark. The badge pair (zaki-mark-*-256.webp) stays in the
   markup but is hidden below 960px since 2026-09-25: the phone circle now
   shows the same zaki-login-logo-*.png mark, cropped with object-fit:cover,
   as the desktop Ask-Zaki button (.zaki-ask-fab-mark img) -- Ali asked for
   the phone logo to look like the desktop one, just smaller. An earlier
   note here warned that this asset's mostly-empty square canvas would crop
   to "mostly black"; measured in a browser at 40px (image 36x36) the mark
   reads clearly, exactly as it already does in the desktop button.
   Compound (class+class / :root.light+class+class) selectors throughout so
   this never has to win a specificity tie against the single-class
   dark/light toggle (.nav-logo-light / :root.light .nav-logo-dark) that
   governs nav-logo-dark/nav-logo-light on every element carrying them. */
.nav-logo-badge.nav-logo-dark{display:block}
.nav-logo-badge.nav-logo-light{display:none}
:root.light .nav-logo-badge.nav-logo-dark{display:none}
:root.light .nav-logo-badge.nav-logo-light{display:block}
.nav-logo-on-rail{display:none}
@media(max-width:959px){
  /* .nav-logo-box.ops-notify-btn (dashboard.css:4235, compound 0-2-0,
     applies whenever the logo doubles as the Ask-Zaki trigger -- i.e.
     every pro+ venue, the common case) otherwise outranks a plain
     .nav-logo-box here and strips this back to its flat reset. Match its
     own specificity so this wins the tie by coming later in source. */
  /* The desktop Ask-Zaki button, just smaller: a true circle filled
     edge to edge by the same zaki-login-logo mark (object-fit: cover, as
     .zaki-ask-fab-mark img does) inside a thin gold ring. It used to be a
     36px-wide box that the shared .ops-notify-btn min-height stretched to
     44px tall, so the ring read as an oval and the badge as squashed
     (Ali, 2026-09-25). min/max-height pin the height to the width. */
  .nav-logo-box,.nav-logo-box.ops-notify-btn{
    width:40px;height:40px;min-width:40px;min-height:40px;max-height:40px;flex:0 0 40px;
    aspect-ratio:1;padding:0;
    display:grid;place-items:center;overflow:hidden;
    background:#000;
    border:2px solid color-mix(in srgb, var(--color-accent-strong) 60%, transparent);
    border-radius:50%;
    box-shadow:0 0 0 1px rgba(0,0,0,.35);
  }
  .nav-logo-box .nav-logo-badge{display:none!important}
  .nav-logo-box .nav-logo-on-rail{width:100%;height:100%;object-fit:cover;border-radius:50%}
  .nav-logo-box .nav-logo-on-rail.nav-logo-dark{display:block}
  .nav-logo-box .nav-logo-on-rail.nav-logo-light{display:none}
  :root.light .nav-logo-box .nav-logo-on-rail.nav-logo-dark{display:none}
  :root.light .nav-logo-box .nav-logo-on-rail.nav-logo-light{display:block}
  .nav-logo-box.ops-notify-btn:hover,.nav-logo-box.ops-notify-btn.active{
    background:radial-gradient(circle,#1e1c17,#000);
  }
  .nav-logo-badge{width:20px;height:20px;object-fit:contain}
  /* Light theme: nav-logo-badge.nav-logo-light (dark ink, see the class
     toggle above) needs a light backdrop to read -- match the light-theme
     override's own :root.light .nav-logo-box.ops-notify-btn specificity
     (dashboard.css:4246, 0-3-0) so this wins the tie by coming later. */
  :root.light .nav-logo-box,:root.light .nav-logo-box.ops-notify-btn{
    background:radial-gradient(circle,#f7f6f2,#efece4);
    box-shadow:0 0 0 1px rgba(17,23,22,.08);
  }
  :root.light .nav-logo-box.ops-notify-btn:hover,
  :root.light .nav-logo-box.ops-notify-btn.active{
    background:radial-gradient(circle,#efece4,#e6e2d8);
  }
}
@media(min-width:960px){
  .nav-logo-badge{display:none!important}
  .nav-logo-on-rail.nav-logo-dark{display:block}
  .nav-logo-on-rail.nav-logo-light{display:none}
  :root.light .nav-logo-on-rail.nav-logo-dark{display:none}
  :root.light .nav-logo-on-rail.nav-logo-light{display:block}
}
@media (max-width:959px){
  .nav-center .zaki-ask-fab{display:none}
  .nav-logo-box.ops-notify-btn{animation:zaki-fab-bounce 10s ease-in-out infinite}
  .nav-logo-box.ops-notify-btn.active{animation-play-state:paused}
  .zaki-ask-panel{
    top:auto;left:12px;right:auto;
    bottom:calc(74px + env(safe-area-inset-bottom));
    width:min(400px,calc(100vw - 24px));max-width:none;
  }
  body.ar .zaki-ask-panel{left:auto;right:12px}
}

/* ── Floor mini-map fits the viewport instead of forcing a 700px pan ───── */
@media (max-width:959px){
  .fp-svg{min-width:0;width:100%;height:auto}
  .fp-canvas-card{overflow-x:auto}
}

/* ── Dense data tables: stack into cards on phone (<=780) ──────────────── */
@media (max-width:780px){
  .table-wrap.zaki-stack table,.table-wrap.zaki-stack thead,
  .table-wrap.zaki-stack tbody,.table-wrap.zaki-stack tr,
  .table-wrap.zaki-stack td,
  .ops-table-wrap.zaki-stack table,.ops-table-wrap.zaki-stack thead,
  .ops-table-wrap.zaki-stack tbody,.ops-table-wrap.zaki-stack tr,
  .ops-table-wrap.zaki-stack td,
  .staff-role-table-wrap.zaki-stack table,.staff-role-table-wrap.zaki-stack thead,
  .staff-role-table-wrap.zaki-stack tbody,.staff-role-table-wrap.zaki-stack tr,
  .staff-role-table-wrap.zaki-stack td{display:block}
  /* Visually-hidden, not offscreen: a `left:-9999px` thead needs its own
     containing block to stay clipped -- .table-wrap has none, so in RTL
     (`direction:rtl`, every Arabic session) "left" resolves to the far
     visual edge and the header row created a ~10,000px horizontal scroll
     region on every stacked table. This clip-rect technique is direction-
     and containing-block independent. */
  .table-wrap.zaki-stack thead,.ops-table-wrap.zaki-stack thead,
  .staff-role-table-wrap.zaki-stack thead{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
  .table-wrap.zaki-stack tr,.ops-table-wrap.zaki-stack tr,
  .staff-role-table-wrap.zaki-stack tr{
    margin-bottom:10px;padding:6px 12px;
    border:1px solid var(--color-line);border-radius:var(--radius-sm);
    background:var(--color-bg-subtle);
  }
  .table-wrap.zaki-stack td,.ops-table-wrap.zaki-stack td,
  .staff-role-table-wrap.zaki-stack td{
    display:flex;align-items:baseline;justify-content:space-between;gap:12px;
    padding:7px 0;border-bottom:1px solid var(--color-line);text-align:right;
  }
  .table-wrap.zaki-stack tr td:last-child,.ops-table-wrap.zaki-stack tr td:last-child,
  .staff-role-table-wrap.zaki-stack tr td:last-child{border-bottom:0}
  .table-wrap.zaki-stack td::before,.ops-table-wrap.zaki-stack td::before,
  .staff-role-table-wrap.zaki-stack td::before{
    content:attr(data-label);flex:0 0 auto;
    color:var(--color-text-muted);font-size:10px;font-weight:850;
    letter-spacing:.04em;text-transform:uppercase;text-align:left;
  }
  .table-wrap.zaki-stack td:empty,.ops-table-wrap.zaki-stack td:empty,
  .staff-role-table-wrap.zaki-stack td:empty{display:none}
  body.ar .table-wrap.zaki-stack td,body.ar .ops-table-wrap.zaki-stack td,
  body.ar .staff-role-table-wrap.zaki-stack td{text-align:left}
  body.ar .table-wrap.zaki-stack td::before,body.ar .ops-table-wrap.zaki-stack td::before,
  body.ar .staff-role-table-wrap.zaki-stack td::before{text-align:right}
  /* Team roster (routes/dashboard_staff.py -- renders as a plain
     .table-wrap.zaki-stack, not the differently-named .staff-role-table-wrap
     class decorateTables() also watches for): the Role cell holds a role
     badge PLUS two mini forms (shift-time save, PIN reset), each with a
     hardcoded inline `style="width:140px"`/`width:120px"` input that can't
     shrink under the shared label:value flex-row treatment above -- it
     overflowed the card on phone widths ("these dont fit" / "they dont fit
     2", 2026-09-04 QA). `:has(form)` targets any stacked-card cell holding
     a form regardless of which wrapper class its table uses. Stack this
     one cell's contents instead of the usual row, and `!important` the
     inline pixel widths down to fluid ones (nothing weaker than
     !important beats an inline style attribute). */
  .zaki-stack td:has(form){
    flex-direction:column;align-items:stretch;gap:8px;
  }
  .zaki-stack td form{flex-wrap:wrap;gap:6px 8px}
  .zaki-stack td form input[type="password"],
  .zaki-stack td form input[type="time"]{
    width:100%!important;max-width:none!important;flex:1 1 120px;
  }
  /* Dense (>=6-column) stacked-card rows: fold everything but the identity
     +Role/Status summary behind a per-row "Details" toggle -- see
     decorateTables()'s .zaki-row-detail/.zaki-row-toggle-cell markup. */
  .zaki-stack tr:not(.zaki-row-open) td.zaki-row-detail{display:none}
  .zaki-stack td.zaki-row-toggle-cell{
    display:flex;justify-content:center;padding:6px 0 0;border-bottom:0;
  }
  .zaki-row-toggle{
    min-height:44px;padding:0 14px;color:var(--color-accent-strong);
    background:transparent;border:1px solid var(--color-line);
    border-radius:999px;font-size:11px;font-weight:800;cursor:pointer;
  }
  /* Dense-table summary as a 2-col grid instead of stacked full-width rows
     -- with Time/Size now kept visible alongside Guest/Status (broadened
     keepIdx regex in decorateTables()), 4-6 always-visible fields read as a
     wall of label:value lines otherwise ("2x3 grid" QA ask, round 3). Only
     rows that actually have the dense-table toggle get this treatment --
     ordinary <=5-column .zaki-stack tables (Guests, most others) keep the
     original single-column card layout untouched. */
  .zaki-stack tr:has(.zaki-row-toggle-cell){
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 14px;align-items:start;
  }
  .zaki-stack tr:has(.zaki-row-toggle-cell) td:not(.zaki-row-detail):not(.zaki-row-toggle-cell){
    display:block;padding:6px 0;border-bottom:0;text-align:left;
  }
  body.ar .zaki-stack tr:has(.zaki-row-toggle-cell) td:not(.zaki-row-detail):not(.zaki-row-toggle-cell){
    text-align:right;
  }
  .zaki-stack tr:has(.zaki-row-toggle-cell) td:not(.zaki-row-detail):not(.zaki-row-toggle-cell)::before{
    display:block;margin-bottom:2px;
  }
  .zaki-stack tr:has(.zaki-row-toggle-cell) td.zaki-row-detail,
  .zaki-stack tr:has(.zaki-row-toggle-cell) td.zaki-row-toggle-cell{
    grid-column:1/-1;
  }
}
@media(min-width:781px){.zaki-row-toggle-cell{display:none}}
/* Filter selects fold behind a disclosure element so the toolbar stops
   eating a whole phone screen; search + result count stay visible.
   The FOLDED presentation is the DEFAULT (so the 959<->960 fractional gap
   -- browser zoom, non-integer DPR -- can never leave the selects hidden
   with no toggle); >=960 opens it back into display:contents so the
   selects flow as ordinary .zaki-table-toolbar siblings exactly as before
   this pass. The JS sets <details open> to match: open at >=960, folded
   below. */
.zaki-table-filters{display:block;width:100%}
.zaki-table-filters>summary{
  display:inline-flex;align-items:center;gap:6px;min-height:40px;
  padding:0 12px;color:var(--color-accent-strong);cursor:pointer;
  font-size:12px;font-weight:800;list-style:none;
}
.zaki-table-filters>summary::-webkit-details-marker{display:none}
.zaki-table-filters>summary::after{content:"\25be";font-size:10px}
.zaki-table-filters[open]>summary::after{content:"\25b4"}
.zaki-table-filters[open]{
  display:grid;gap:8px;padding:8px;margin-top:6px;
  background:var(--color-bg-subtle);border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
}
.zaki-table-filters[open]>summary{grid-column:1/-1}
.zaki-table-filters>select{width:100%}
@media (max-width:959px){
  .zaki-table-toolbar .zaki-table-search{order:-2}
  .zaki-table-toolbar .zaki-table-count{order:-1}
  /* explicit fold: some Chromium builds don't hide a closed <details>'s
     content once `display` is set on the host -- don't rely on the UA
     ::details-content. Scoped to this tier only: unscoped, its (0,2,1)
     specificity would beat the >=960 restore below ((0,1,1), width only,
     no display) on the browsers-without-matchMedia fallback branch where
     `det.open` is never set true, permanently stranding the controls. */
  .zaki-table-filters:not([open])>select{display:none}
}
@media (min-width:960px){
  .zaki-table-filters,.zaki-table-filters[open]{
    display:contents;padding:0;margin:0;background:none;border:0;
  }
  .zaki-table-filters>summary{display:none}
  .zaki-table-filters>select{width:auto}
}
.branch-switcher{position:relative;display:inline-block}
.branch-switcher-summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:4px;text-decoration:none}
.branch-switcher-summary::-webkit-details-marker{display:none}
.branch-switcher-upward .branch-switcher-menu{bottom:100%;top:auto;margin-top:0;margin-bottom:6px}
.branch-switcher-caret{font-size:10px;opacity:.7}
/* The name truncates, the caret never does: an ellipsis on the whole summary
   clipped the switcher arrow away at phone width (walkthrough 2026-09-25). */
.branch-switcher-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.branch-switcher-summary .branch-switcher-caret{flex:0 0 auto}
.branch-switcher-menu{position:absolute;top:100%;left:0;margin-top:6px;background:var(--su2);border:1px solid var(--b2);border-radius:var(--radius-sm);padding:6px;min-width:220px;z-index:60;box-shadow:var(--sh)}
.branch-switcher-head{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);padding:6px 8px}
.branch-switcher-divider{margin:8px 0 2px;padding:6px 12px 2px;border-top:1px solid var(--color-line);color:var(--color-text-muted);font-size:10px;font-weight:850;letter-spacing:.04em;text-transform:uppercase}
.branch-switcher-item-form{display:block;margin-bottom:4px}
.branch-switcher-item-form:last-child{margin-bottom:0}
.branch-switcher-item{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;text-align:left;background:var(--color-surface);border:1px solid var(--color-line);padding:0 12px;border-radius:var(--radius-xs);cursor:pointer;font-size:13px;font-weight:750;color:var(--t);text-decoration:none;font-family:inherit;transition:border-color var(--motion-fast),background var(--motion-fast),transform var(--motion-fast)}
.branch-switcher-item:hover{border-color:rgba(184,138,59,.38);background:var(--bg3);transform:translateY(-1px)}
.branch-switcher-item:active{transform:scale(.98)}

@media (min-width:960px) and (max-width:1179px){
  .zaki-app-rail .nav-right > .global-search{left:50%!important;transform:translateX(-50%)!important;width:min(360px,calc(100vw - var(--rail-width, 250px) - 120px))!important;min-width:300px!important;max-width:360px!important;pointer-events:auto!important}
  .zaki-app-rail .global-search-btn{width:100%!important;padding:0 15px!important;justify-content:flex-start!important;cursor:pointer!important}
  .zaki-app-rail .global-search-btn-label{display:inline!important}
  .zaki-app-rail .global-search-panel{left:50%!important;transform:translateX(-50%)!important;width:min(460px,calc(100vw - 48px))!important}
}

/* A compact tablet rail slides off-screen. Its global controls are moved out
   of the rail as well, so the page cannot cover the visible click targets. */
#nav-floating-controls{display:none}
@media (min-width:960px) and (max-width:1439px){
  #nav-floating-controls{position:fixed;inset:16px 0 auto;z-index:390;display:flex;justify-content:center;pointer-events:none}
  #nav-floating-controls>.global-search{position:static;display:block;width:min(360px,calc(100vw - 120px));min-width:0;max-width:360px;pointer-events:auto}
  #nav-floating-controls .global-search-btn{display:flex!important;width:100%;height:44px;min-height:44px;padding:0 15px;align-items:center;justify-content:flex-start!important;gap:10px;color:#f7f6f2!important;background:#17140f!important;border:1px solid rgba(184,138,59,.34)!important;border-radius:999px;box-shadow:0 16px 34px rgba(0,0,0,.22)!important;backdrop-filter:none!important;cursor:pointer}
  :root.light #nav-floating-controls .global-search-btn,:root[data-theme="light"] #nav-floating-controls .global-search-btn{color:#12100d!important;background:#f7f5ee!important;border-color:rgba(18,16,13,.16)!important;box-shadow:0 16px 32px rgba(18,16,13,.12)!important}
  #nav-floating-controls .global-search-btn>svg{width:18px!important;height:18px!important;flex:0 0 18px!important;margin:0;align-self:center;stroke:currentColor!important;stroke-width:2!important}
  #nav-floating-controls .global-search-btn-label{display:inline-flex!important;align-self:center;overflow:hidden;color:currentColor!important;opacity:.86;font-size:13px;font-weight:750;line-height:1.1;text-overflow:ellipsis;white-space:nowrap}
  :root.light #nav-floating-controls .global-search-btn-label,:root[data-theme="light"] #nav-floating-controls .global-search-btn-label{color:#2d2921!important;opacity:1}
  #nav-floating-controls .global-search-panel{left:50%;right:auto;transform:translateX(-50%);width:min(460px,calc(100vw - 48px));z-index:400}
  #nav-floating-controls>.zaki-ask-fab{position:fixed;right:22px;bottom:24px;z-index:400;pointer-events:auto}
}

/* Waiter order entry: aligned controls with a consistent 16px rhythm. */
.new-order-menu-head{grid-template-columns:1fr!important;align-items:stretch!important;gap:12px!important;padding:16px 20px!important}
.new-order-menu-head>h2{display:none}
.new-order-menu-tools{grid-template-columns:minmax(140px,.85fr) minmax(190px,1.2fr) minmax(125px,.7fr);gap:16px!important;align-items:end}
.new-order-menu-tools .new-order-menu-picker,.new-order-menu-tools .new-order-menu-search,.new-order-menu-tools .new-order-table-select{margin:0;min-width:0}
.ops-workspace-actions{align-self:stretch;display:flex;align-items:center;justify-content:center;padding:0 4px}
.ops-workspace-actions .ops-btn{justify-content:center}
@media(max-width:720px){.new-order-menu-head{padding:14px!important}.new-order-menu-tools{gap:12px!important}}

/* The two inner cards own the surface. The outer grid must not add a second border,
   and the menu card keeps its rounded header while choices can open past its edge. */
.new-order-layout.new-order-panel{overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}
.new-order-layout>.ops-panel:first-child{position:relative;z-index:2;overflow:visible;container-type:inline-size}
.new-order-layout>.ops-panel:first-child>.new-order-menu-head{min-width:0;width:100%;border-radius:calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0}
.new-order-menu-tools{min-width:0;width:100%}
.new-order-stepper{background:var(--color-bg-subtle)}
.new-order-step-count{display:grid;place-items:center;min-height:44px}
.new-order-dish-note{margin-top:4px}
.new-order-dish-note>summary{cursor:pointer;color:var(--color-text-muted);font-size:11px;font-weight:650;min-height:28px;align-content:center}
.new-order-dish-note>summary:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;border-radius:8px}
.new-order-menu-tools>*{min-width:0}
.new-order-menu-picker,.new-order-table-select{min-width:0}
.new-order-choice{position:relative;min-width:0;color:var(--color-text);font-size:12px;font-weight:750;letter-spacing:0;text-transform:none}
.new-order-choice summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:10px 12px;background:var(--color-bg-subtle);border:1px solid var(--color-line);border-radius:12px;cursor:pointer;list-style:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.new-order-choice summary::-webkit-details-marker{display:none}
.new-order-choice summary::after{content:"";flex:0 0 7px;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.new-order-choice[open] summary{border-color:var(--color-accent);box-shadow:0 0 0 4px var(--color-accent-soft)}
.new-order-choice summary:focus-visible,.new-order-choice-options a:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
.new-order-choice-options{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;display:grid;width:100%;max-height:min(320px,45dvh);overflow-y:auto;padding:5px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:12px;box-shadow:var(--shadow-2)}
.new-order-choice-options a,.new-order-choice-empty{display:block;padding:10px 12px;color:var(--color-text);border-radius:8px;text-decoration:none;white-space:nowrap}
.new-order-choice-options a:hover,.new-order-choice-options a[aria-current="page"]{color:var(--color-accent-strong);background:var(--color-accent-soft)}
.new-order-choice-empty{color:var(--color-text-muted)}
body.ar .new-order-choice-options{left:auto;right:0}
@container (max-width:680px){
  .new-order-menu-tools{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .new-order-menu-tools:has(.new-order-menu-picker) .new-order-menu-search{grid-column:1/-1;grid-row:2}
}
@container (max-width:430px){.new-order-menu-tools{grid-template-columns:minmax(0,1fr)!important}.new-order-menu-tools .new-order-menu-search,.new-order-menu-tools .new-order-table-select{grid-column:1;grid-row:auto}}
/* Keep the collapsible rail handle out of the order-entry controls on laptop/tablet. */
@media (min-width:960px){body:has(.new-order-menu-head) .rail-toggle-btn{top:88px}}

/* The visible eye stays compact while its button keeps a touch-safe 44px target. */
.zaki-password-toggle-wrap{display:block;position:relative;width:100%}
.zaki-password-toggle-wrap>input{padding-right:52px!important}
.zaki-password-toggle{position:absolute;top:50%;right:4px;display:grid;place-items:center;width:44px;min-width:44px;min-height:44px;padding:0;color:var(--color-text-muted);background:transparent;border:0;border-radius:10px;cursor:pointer;transform:translateY(-50%);touch-action:manipulation}
.zaki-password-toggle:hover{color:var(--color-accent-strong);background:var(--color-accent-soft)}
.zaki-password-toggle:focus-visible{outline:3px solid var(--color-focus);outline-offset:1px}
.zaki-rive-eye{display:block;width:28px;height:28px;pointer-events:none}
/* Mirror both the artwork and its clearance for RTL forms. */
body.ar .zaki-password-toggle-wrap>input{padding-left:52px!important}
body.ar .zaki-password-toggle{right:auto;left:4px}
/* The login shell has its own leading icon, so position the eye relative to
   the whole field rather than the generated input wrapper. */
.zaki-input-shell>.zaki-password-toggle-wrap{position:static}

/* ── Loading primitives ───────────────────────────────────────────────────
   One place for "this is working". Every indicator before these was ad hoc
   (border-spinners, style.opacity='0.5', textContent='Loading...'), and one
   of them never reset on its error path.

   Two, not four: a first pass also added .yn-spinner and .yn-busy, which
   nothing used. Shipping unused CSS under the banner of consolidation is how
   the next person ends up with a third spinner. /kitchen keeps its own inline
   busy style because that screen never loads this stylesheet.

   Both honour prefers-reduced-motion -- a page of infinite animation is what
   that setting exists to stop. Pair either with aria-busy="true" on the
   region being replaced. */
.yn-skeleton{position:relative;overflow:hidden;background:var(--color-bg-subtle);border-radius:8px;min-height:14px}
.yn-skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);animation:yn-shimmer 1.4s infinite}
.yn-skeleton + .yn-skeleton{margin-top:8px}
.yn-skeleton.is-wide{width:100%}
.yn-skeleton.is-short{width:60%}
@keyframes yn-shimmer{100%{transform:translateX(100%)}}

/* Indeterminate: for work with no measurable end. A determinate bar that
   guesses is worse than an honest one that admits it doesn't know. */
.yn-progress{position:relative;height:3px;overflow:hidden;background:var(--color-line);border-radius:999px}
.yn-progress::after{content:"";position:absolute;top:0;bottom:0;width:35%;background:var(--color-accent);border-radius:999px;animation:yn-progress-slide 1.3s ease-in-out infinite}
@keyframes yn-progress-slide{0%{left:-35%}100%{left:100%}}

@media (prefers-reduced-motion:reduce){
  .yn-skeleton::after{animation:none}
  .yn-progress::after{animation:none;left:0;width:100%;opacity:.4}
  .setup-progress-bar.is-current::after{animation:none;opacity:.6}
}

.yn-floor-loading{position:absolute;left:50%;top:50%;width:min(240px,60%);transform:translate(-50%,-50%);pointer-events:none}

/* D2 guest-behaviour staff surfaces (customer detail page, Customers table
   segment rollup, floor-plan tile + POS panel upsell/chip labels). */
.behavior-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:14px 16px}
.behavior-grid>div{display:flex;flex-direction:column;gap:2px}
.behavior-grid>div>span{color:var(--color-text-muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.behavior-grid>div>strong{font-size:14px}
.upsell-prompt,.network-status-chip{margin:0 16px;padding:8px 12px;border-radius:10px;font-size:12px;font-weight:700}
.upsell-prompt{color:var(--color-accent-strong);background:var(--color-accent-soft)}
.network-status-chip{color:var(--color-warning);background:var(--color-warning-soft);margin-top:12px}
.upsell-prompt+.behavior-grid,.network-status-chip+.behavior-grid{margin-top:10px}
.customer-detail-link{color:inherit;text-decoration:none;border-bottom:1px dashed var(--color-line)}
.customer-detail-link:hover{border-bottom-color:currentColor}
.segment-filter-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.segment-chip{min-height:44px;padding:0 12px;color:var(--color-text-muted);background:var(--color-surface-soft);border:1px solid var(--color-line);border-radius:999px;font-size:11px;font-weight:800;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast)}
.segment-chip:hover{color:var(--color-text);background:var(--color-surface-raised)}
.segment-chip.active{color:var(--color-accent-strong);background:var(--color-accent-soft);border-color:rgba(184,138,59,.4)}
.table-network-chip,.table-upsell,.fpc-svc-network-chip,.fpc-svc-upsell{display:block;overflow:hidden;font-size:10px;font-weight:700;white-space:nowrap;text-overflow:ellipsis}
.table-network-chip,.fpc-svc-network-chip{color:var(--color-warning)}
.table-upsell,.fpc-svc-upsell{color:var(--color-accent-strong)}

/* Tablet Today: retain the desktop information hierarchy at a denser scale.
   Arrivals become a deliberately spaced horizontal strip; fixed summary
   regions are compacted to fit rather than gaining a distracting scrollbar. */
@media (min-width:960px) and (max-width:1599px) and (min-height:700px){
  main#main-content.dashboard-main-overview{height:100dvh!important;max-height:100dvh!important;overflow:hidden!important}
  #tab-overview.yn-tab-panel.active{height:100%!important;overflow:hidden!important}
  .overview-page{height:100%!important;min-height:0!important;max-height:100%!important;overflow:hidden!important}
  .zaki-today-showcase{height:100%;min-height:0;grid-template-rows:auto auto minmax(0,1fr);gap:10px}
  .zaki-showcase-topbar{gap:14px;margin-bottom:10px}
  .zaki-showcase-topbar>div:first-child{gap:4px}
  .zaki-showcase-topbar h1{font-size:clamp(36px,4.4vw,52px)}
  .zaki-showcase-metrics{gap:8px;margin-bottom:0}
  .zaki-showcase-card{min-height:86px;padding:10px 12px;border-radius:15px}
  .zaki-card-title{gap:6px;font-size:10px}
  .zaki-card-icon{width:25px;height:25px}
  .zaki-showcase-card strong{font-size:clamp(23px,2.6vw,31px)}
  .zaki-showcase-card small{font-size:10px}
  .zaki-showcase-grid{grid-template-columns:minmax(0,1.65fr) minmax(270px,.85fr)!important;grid-template-rows:minmax(120px,1fr) minmax(96px,auto) minmax(154px,auto)!important;gap:10px;margin-bottom:0;min-height:0;overflow:hidden!important}
  .zaki-arrivals-panel{grid-column:1!important;grid-row:1!important;display:flex;flex-direction:column;min-height:0;padding:13px}
  .zaki-arrivals-panel .zaki-panel-head{min-height:34px;padding-bottom:5px}
  .zaki-arrivals-panel .zaki-panel-head h2{font-size:16px}
  .zaki-arrivals-panel .zaki-panel-head-actions{gap:7px}
  .zaki-arrivals-panel .zaki-arrivals-total{min-height:28px;padding:0 9px;font-size:10px}
  .zaki-arrivals-panel .zaki-panel-head-actions>a{min-height:30px;font-size:11px}
  .zaki-arrivals-panel .zaki-arrivals-list{display:flex;flex:1 1 auto;gap:12px;min-height:0;padding:2px 2px 6px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scrollbar-width:thin}
  .zaki-arrivals-panel .zaki-arrivals-list::before{display:none}
  .zaki-arrivals-panel .zaki-arrival-row{flex:0 0 min(238px,62%);min-height:0;padding:0;background:var(--color-surface-raised);border:1px solid var(--color-line);border-radius:12px;scroll-snap-align:start}
  .zaki-arrivals-panel .zaki-arrival-row::before{display:none}
  .zaki-arrivals-panel .zaki-arrival-summary{grid-template-columns:49px minmax(0,1fr);gap:7px;min-height:52px;padding:7px 9px}
  .zaki-arrivals-panel .zaki-arrival-time{padding-left:0}
  .zaki-arrivals-panel .zaki-arrival-time strong{font-size:16px}
  .zaki-arrivals-panel .zaki-arrival-main strong{font-size:12px}
  .zaki-arrivals-panel .zaki-arrival-main small{font-size:10px}
  .zaki-arrivals-panel .zaki-arrival-empty{flex:1 0 100%;min-height:0}
  .zaki-readiness-panel{grid-column:2!important;grid-row:1/span 2!important;display:flex;flex-direction:column;min-height:0;padding:13px;overflow:hidden}
  .zaki-readiness-panel .zaki-command-grid{min-height:0;height:auto!important;flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain}
  .zaki-readiness-panel .zaki-command-card{min-height:56px;padding:9px 10px;border-radius:13px}
  .zaki-command-card strong{font-size:22px}
  .zaki-automation-panel{grid-column:1!important;grid-row:2!important;min-height:0;padding:10px}
  .zaki-automation-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px}
  .zaki-automation-action{grid-template-columns:32px minmax(0,1fr) minmax(48px,max-content)!important;grid-template-rows:1fr!important;grid-template-areas:"icon copy value"!important;align-items:center!important;gap:7px!important;min-height:48px!important;padding:7px 9px!important}
  .zaki-automation-action::after{left:9px;right:9px}
  .zaki-automation-action .zaki-automation-icon{width:32px;height:32px;border-radius:11px}
  .zaki-automation-action span:nth-child(2){align-self:center!important}
  .zaki-automation-action strong{display:block;font-size:11px!important;line-height:1.15!important}
  .zaki-automation-action b{min-width:0!important;align-self:center!important;font-size:20px!important}
  .zaki-service-flow-panel{grid-column:1/-1!important;grid-row:3!important;align-self:stretch!important;min-height:0;height:100%!important;max-height:none!important;padding:8px 12px;overflow:hidden!important}
  .zaki-service-flow-head{margin-bottom:5px}
  .zaki-service-flow-head h2{font-size:15px}
  .zaki-flow-stage-row{gap:8px;margin-bottom:5px}
  .zaki-flow-stage{grid-template-columns:34px minmax(0,1fr);min-height:42px;padding:5px 8px;border-radius:12px;gap:7px}
  .zaki-flow-stage-icon{width:32px;height:32px;border-radius:10px}
  .zaki-flow-stage small,.zaki-flow-kpi span{font-size:10px}
  .zaki-flow-stage strong{font-size:18px}
  .zaki-flow-kpi-row{gap:8px}
  .zaki-flow-kpi{min-height:34px;padding:5px 9px;border-radius:11px}
  .zaki-flow-kpi strong{font-size:14px}
}

/* Keep arrival cards in one scrollable row at every viewport size. */
@media all{
  .zaki-arrivals-panel{display:flex;flex-direction:column;min-height:0}
  .zaki-arrivals-panel .zaki-arrivals-list{display:flex;flex:1 1 auto;gap:12px;min-height:0;padding:2px 2px 6px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scrollbar-width:thin}
  .zaki-arrivals-panel .zaki-arrivals-list::before{display:none}
  .zaki-arrivals-panel .zaki-arrival-row{flex:0 0 238px;min-height:0;padding:0;background:var(--color-surface-raised);border:1px solid var(--color-line);border-radius:12px;scroll-snap-align:start}
  .zaki-arrivals-panel .zaki-arrival-row::before{display:none}
  .zaki-arrivals-panel .zaki-arrival-summary{grid-template-columns:49px minmax(0,1fr);gap:7px;min-height:52px;padding:7px 9px}
  .zaki-arrivals-panel .zaki-arrival-time{padding-left:0}
  .zaki-arrivals-panel .zaki-arrival-time strong{font-size:16px}
  .zaki-arrivals-panel .zaki-arrival-main strong{font-size:12px}
  .zaki-arrivals-panel .zaki-arrival-main small{font-size:10px}
  .zaki-arrivals-panel .zaki-arrival-empty{flex:1 0 100%;min-height:0}
}

/* Arrivals are summary cards; details open on demand so the strip stays
   glanceable while every operational destination remains one press away. */
.zaki-arrival-row{position:relative;z-index:1;min-width:0;color:var(--color-text);text-decoration:none;transition:border-color var(--motion-fast),box-shadow var(--motion-fast)}.zaki-arrival-summary{display:grid;align-items:center;width:100%;min-width:0;color:inherit;background:transparent;border:0;cursor:pointer;text-align:start}.zaki-arrival-summary:hover{background:transparent}.zaki-arrival-row:hover,.zaki-arrival-row:focus-within{border-color:rgba(184,138,59,.72);box-shadow:inset 0 0 0 1px rgba(184,138,59,.18)}.zaki-arrival-summary:focus-visible,.zaki-arrival-dialog-close:focus-visible,.zaki-arrival-detail-link:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}.zaki-arrival-main strong{display:flex;align-items:center;gap:5px}.zaki-arrival-vip{display:inline-grid;place-items:center;width:17px;height:17px;flex:0 0 auto;color:var(--color-accent-strong);background:var(--color-accent-soft);border:1px solid rgba(184,138,59,.34);border-radius:999px}.zaki-arrival-vip .ui-icon{width:10px;height:10px}.zaki-arrival-vip-inline{display:inline-grid;vertical-align:middle;margin-inline-start:3px}.zaki-arrival-dialog{width:min(390px,calc(100vw - 28px));padding:0;overflow:hidden;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-line-strong);border-radius:18px;box-shadow:var(--shadow-sheet)}.zaki-arrival-dialog::backdrop{background:rgba(0,0,0,.56)}.zaki-arrival-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:16px;border-bottom:1px solid var(--color-line);background:var(--color-surface-raised)}.zaki-arrival-dialog-kicker{display:block;margin-bottom:4px;color:var(--color-text-muted);font-size:10px;font-weight:850;letter-spacing:.06em;text-transform:uppercase}.zaki-arrival-dialog h3{display:flex;align-items:center;gap:6px;margin:0;font:800 19px/1.1 var(--font-display);letter-spacing:-.025em}.zaki-arrival-dialog-close{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;padding:0;color:var(--color-text-secondary);background:transparent;border:1px solid var(--color-line);border-radius:10px;font-size:0;line-height:1;cursor:pointer;transition:color var(--motion-fast),background var(--motion-fast),border-color var(--motion-fast)}.zaki-arrival-dialog-close::before{content:"×";display:block;font-size:24px;line-height:1;transform:translate(1px,-1px)}.zaki-arrival-dialog-close:hover{color:var(--color-accent-strong);background:var(--color-accent-soft);border-color:rgba(184,138,59,.52)}.zaki-arrival-detail-list{display:grid;padding:8px}.zaki-arrival-detail-link,.zaki-arrival-detail-static,.zaki-arrival-detail-joiners{display:grid;gap:3px;min-height:48px;padding:9px 10px;color:var(--color-text);border-bottom:1px solid var(--color-line);text-decoration:none}.zaki-arrival-detail-link:last-child,.zaki-arrival-detail-static:last-child,.zaki-arrival-detail-joiners:last-child{border-bottom:0}.zaki-arrival-detail-link{transition:color var(--motion-fast),background var(--motion-fast),box-shadow var(--motion-fast)}.zaki-arrival-detail-link:hover{color:var(--color-accent-strong);background:var(--color-accent-soft);box-shadow:inset 3px 0 0 var(--color-accent)}.zaki-arrival-detail-link:hover strong{color:inherit}.zaki-arrival-detail-link>span,.zaki-arrival-detail-static>span,.zaki-arrival-detail-joiners>span{color:var(--color-text-muted);font-size:10px;font-weight:850;letter-spacing:.04em;text-transform:uppercase}.zaki-arrival-detail-link strong,.zaki-arrival-detail-static strong{font-size:13px;line-height:1.3}.zaki-arrival-detail-notes strong{color:var(--color-text-secondary);font-weight:650}.zaki-arrival-detail-joiners>div{display:flex;flex-wrap:wrap;gap:6px}.zaki-arrival-detail-joiners a{display:inline-flex;align-items:center;min-height:30px;padding:0 8px;color:var(--color-text-secondary);background:var(--color-bg-subtle);border:1px solid var(--color-line);border-radius:999px;font-size:11px;text-decoration:none;transition:color var(--motion-fast),background var(--motion-fast),border-color var(--motion-fast)}.zaki-arrival-detail-joiners a:hover{color:var(--color-accent-strong);background:var(--color-accent-soft);border-color:rgba(184,138,59,.58)}.zaki-arrival-detail-empty{color:var(--color-text-muted);font-size:12px}
.zaki-arrival-row:focus-within:not(:hover){border-color:var(--color-line);box-shadow:none}.zaki-arrival-dialog-close::before{transform:translateY(-1px)}.zaki-arrival-method-vip{display:inline-flex;align-items:center;gap:4px;color:var(--color-accent-strong);font-size:12px;letter-spacing:0}.zaki-arrival-method-vip .ui-icon{width:14px;height:14px}
.zaki-automation-revenue{min-width:0;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (min-width:960px) and (max-width:1599px) and (max-height:699px){
  main#main-content.dashboard-main-overview,#tab-overview.yn-tab-panel.active,.overview-page{height:auto!important;max-height:none!important;overflow:visible!important}
}

/* Tablet operations need the dashboard's wide working canvas. The browser
   locks it when the installed-PWA API permits; this gate handles every other
   browser without leaving a portrait layout half-visible underneath. */
#zaki-tablet-landscape-gate{display:none}
@media (orientation:portrait){
  body.zaki-tablet-landscape-required{overflow:hidden!important}
  body.zaki-tablet-landscape-required>:not(#zaki-tablet-landscape-gate){visibility:hidden!important;pointer-events:none!important}
  body.zaki-tablet-landscape-required #zaki-tablet-landscape-gate{position:fixed;inset:0;z-index:1000;display:grid;place-content:center;justify-items:center;gap:14px;padding:32px;color:var(--color-text);background:var(--color-bg);text-align:center}
  #zaki-tablet-landscape-gate svg{width:48px;height:48px;color:var(--color-accent-strong);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  #zaki-tablet-landscape-gate h1{margin:0;font:800 clamp(24px,5vw,34px)/1.1 var(--font-display);letter-spacing:-.04em}
  #zaki-tablet-landscape-gate p{max-width:34ch;margin:0;color:var(--color-text-muted);font-size:14px;line-height:1.5}
  #zaki-tablet-landscape-gate button{min-width:160px;min-height:44px;padding:0 18px;color:var(--primitive-ink);background:var(--color-accent);border:0;border-radius:13px;font:800 13px/1 var(--font-body);cursor:pointer}
  #zaki-tablet-landscape-gate button:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
}


/* Booking-invite joiner roster (D7, /dashboard/bookings expandable row) */
.invite-roster-details summary{cursor:pointer}
.invite-roster-details summary::marker{color:var(--t3)}
.invite-roster{margin-top:8px;padding:8px 10px;background:var(--su2);border:1px solid var(--b2);border-radius:10px}
.invite-roster-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--b2);font-size:13px}
.invite-roster-row:last-child{border-bottom:none}
.invite-added-by{font-size:11px;color:var(--t3)}
.btn-invite-remove{background:transparent;border:1px solid var(--b2);color:var(--t2);border-radius:6px;padding:3px 8px;cursor:pointer;font-family:inherit}
.btn-invite-remove:hover{background:var(--bg3);color:var(--t)}

/* Resources list page (routes/dashboard_menu.py:resources_list) */
body.resources-page{overflow-y:auto!important;overflow-x:hidden}

/* Resource QR print page (routes/dashboard_menu.py:resources_qr) */
.qr-print-heading{display:none}
.qr-print-footer{display:none}
@media print{
  @page{size:110mm 110mm;margin:0}
  html,.resources-qr-page{width:110mm!important;height:110mm!important;overflow:hidden!important;background:#fff!important;color:#111!important}
  .resources-qr-page .nav,.resources-qr-page .zaki-global-actions,.resources-qr-page #railToggleBtn,.resources-qr-page #railScrim,.resources-qr-page #zaki-ask-panel,.resources-qr-page .page-header,.resources-qr-page .no-print,.resources-qr-page .badge,.resources-qr-page .card-head,.resources-qr-page [style*="word-break"]{display:none!important}
  .resources-qr-page .page{display:grid!important;place-items:center!important;width:110mm!important;height:110mm!important;min-height:0!important;margin:0!important;padding:0!important}
  .resources-qr-page #qr-print-card{border:0!important;box-shadow:none!important;background:#fff!important;color:#111!important;width:100%!important;max-width:none!important}
  .resources-qr-page #qr-print-card .card-body{display:flex!important;flex-direction:column!important;align-items:center!important;min-height:96mm!important;padding:7mm 0 0!important}
  .resources-qr-page .qr-print-heading{display:grid!important;gap:2mm;margin:0 0 9mm!important;padding:0 6mm!important;font-size:5mm!important;font-weight:800!important;line-height:1.2!important;overflow:visible!important;white-space:normal!important}
  .resources-qr-page .qr-print-heading strong{font-size:6.5mm!important;overflow:visible!important;white-space:normal!important}
  .resources-qr-page #qr-print-card .card-body>div[style*="background"]{margin:0!important;padding:0!important;border-radius:0!important}
  .resources-qr-page .qr-print-footer{display:block!important;margin-top:auto!important;padding:0 0 4mm!important;font-size:2.6mm!important;font-weight:800!important;letter-spacing:.02em!important}
}
/* Explanation lines under an Operations panel (Automation). They had no rule
   at all and sat flush against the card edge (walkthrough round 4). */
.ops-panel > .ops-hint{margin:0;padding:0 16px 14px;color:var(--color-text-muted);font-size:12px;line-height:1.5}
/* ===== Business Health hub (2026-09-19) =====
   Landing page + Money topic for the back-office half of Operations, and the
   back bar every back-office page wears instead of a tab strip. Rendered by
   routes/dashboard_hub.py. Everything is scoped under .hub-* and uses the
   design tokens above (light/dark come from :root), so it cannot leak into
   existing pages. Tile anatomy follows the approved 2026-09-19 mockup. */
.hub-shell{display:flex;flex-direction:column;gap:18px;width:100%;padding-bottom:64px;font-variant-numeric:tabular-nums}

/* -- back bar -- */
.hub-backbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 6px;font-size:13px}
.hub-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding-inline-end:4px;font-weight:700;color:var(--color-text-muted);text-decoration:none;transition:color var(--motion-fast)}
.hub-back:hover,.hub-back:focus-visible{color:var(--color-text)}
.hub-chevron{flex:none}
body.ar .hub-chevron{transform:scaleX(-1)}
.hub-crumb{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--color-text)}
.hub-crumb::before{content:"/";color:var(--color-line-strong);font-weight:400}

/* -- top bar: title + date range + compare -- */
.hub-topbar{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-right:var(--zaki-global-actions-clearance)}
body.ar .hub-topbar{padding-right:var(--zaki-global-actions-clearance);padding-left:0}
.hub-eyebrow{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--color-text-muted)}
.hub-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.hub-title-row h1{margin:0;font-size:28px;font-weight:800;line-height:1.15}
.hub-venue-chip{padding:4px 10px;font-size:12px;font-weight:600;color:var(--color-text-muted);background:var(--color-surface-raised);border:1px solid var(--color-line);border-radius:99px}
.hub-sub{margin:0;font-size:13px;color:var(--color-text-muted)}

.hub-range{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.hub-seg-group{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:2px;padding:3px;background:var(--color-surface-raised);border:1px solid var(--color-line);border-radius:12px}
.hub-seg{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border:0;border-radius:9px;background:transparent;font-size:13px;font-weight:700;color:var(--color-text-muted);text-decoration:none;list-style:none;cursor:pointer;transition:background var(--motion-fast),color var(--motion-fast)}
.hub-seg:hover,.hub-seg:focus-visible{color:var(--color-text)}
.hub-seg.active{background:var(--color-accent);color:var(--primitive-ink)}
.hub-custom{position:relative}
.hub-custom>summary::-webkit-details-marker{display:none}
.hub-custom-form{position:absolute;z-index:20;top:calc(100% + 8px);right:0;display:flex;flex-direction:column;gap:10px;min-width:260px;padding:14px;background:var(--color-surface);border:1px solid var(--color-line-strong);border-radius:14px;box-shadow:var(--shadow-2)}
body.ar .hub-custom-form{right:auto;left:0}
.hub-custom-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;color:var(--color-text-muted)}
.hub-custom-form input[type="date"]{min-height:44px;padding:0 10px;color:var(--color-text);background:var(--color-surface-raised);border:1px solid var(--color-line);border-radius:10px}
.hub-apply{min-height:44px;padding:0 16px;border:0;border-radius:10px;background:var(--color-accent);font-weight:800;color:var(--primitive-ink);cursor:pointer}
.hub-compare{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;font-size:13px;font-weight:600;color:var(--color-text-muted);text-decoration:none;background:var(--color-surface-raised);border:1px solid var(--color-line);border-radius:12px;transition:border-color var(--motion-fast)}
.hub-compare:hover,.hub-compare:focus-visible{border-color:var(--color-line-strong);color:var(--color-text)}
.hub-compare.on{border-color:var(--color-accent);color:var(--color-text)}
.hub-dot{width:9px;height:9px;border-radius:99px;background:var(--color-line-strong)}
.hub-compare.on .hub-dot{background:var(--color-success)}

/* -- tile grid -- */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
.hub-tile{display:flex;flex-direction:column;gap:10px;min-height:44px;padding:18px 18px 16px;color:inherit;text-decoration:none;background:var(--color-surface);border:1px solid var(--color-line);border-radius:16px;box-shadow:var(--shadow-1);transition:transform var(--motion-fast) var(--ease-out),border-color var(--motion-fast)}
.hub-tile:hover,.hub-tile:focus-visible{transform:translateY(-2px);border-color:var(--color-accent)}
.hub-tile.is-soon{border-style:dashed;opacity:.72;cursor:default}
.hub-tile.is-soon:hover{transform:none;border-color:var(--color-line)}
.hub-tile-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hub-tile-label{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted)}
.hub-headline{font-family:var(--font-display);font-size:26px;font-weight:700;line-height:1.05}
.hub-headline.is-muted{font-size:18px;color:var(--color-text-muted)}
.hub-delta{display:inline-flex;align-items:center;gap:4px;width:fit-content;padding:2px 8px;font-size:12px;font-weight:700;border-radius:99px}
.hub-delta.up{color:var(--color-success);background:var(--color-success-soft)}
.hub-delta.down{color:var(--color-danger);background:var(--color-danger-soft)}
.hub-delta.flat{color:var(--color-text-muted);background:var(--color-surface-raised)}
.hub-spark{width:100%;height:auto;max-height:52px}
.hub-spark-lg{max-height:120px}
.hub-desc{margin:0;font-size:12.5px;line-height:1.4;color:var(--color-text-muted)}
.hub-cta{margin-top:auto;font-size:12px;font-weight:700;color:var(--color-accent-strong)}
.hub-more{display:flex;align-items:center;flex-wrap:wrap;gap:0 18px;font-size:13px}
.hub-more-label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted)}
.hub-more a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--color-text-secondary);text-decoration:none}
.hub-more a:hover,.hub-more a:focus-visible{color:var(--color-accent-strong)}

/* -- topic detail (Money) -- */
.hub-panel{padding:20px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:16px;box-shadow:var(--shadow-1)}
.hub-panel h3{margin:0 0 14px;font-size:14px;font-weight:800}
.hub-stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.hub-stat{padding:14px;background:var(--color-surface-raised);border:1px solid var(--color-line);border-radius:12px}
.hub-stat.is-setup{background:transparent;border-style:dashed}
.hub-stat-label{margin-bottom:6px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted)}
.hub-stat-val{font-family:var(--font-display);font-size:21px;font-weight:600}
.hub-stat.is-setup .hub-stat-val{font-size:15px;color:var(--color-text-muted)}
.hub-note{margin-top:4px;font-size:11.5px;color:var(--color-text-muted)}
.hub-callout{margin:12px 0 0;padding:10px 12px;font-size:12px;line-height:1.5;color:var(--color-text-muted);background:var(--color-surface-raised);border-radius:10px}
.hub-empty{margin:0;padding:18px;text-align:center;font-size:13px;color:var(--color-text-muted)}
.hub-footer-links{display:flex;flex-wrap:wrap;gap:0 20px}
.hub-footer-links a{display:inline-flex;align-items:center;min-height:44px;font-size:13px;font-weight:700;color:var(--color-accent-strong);text-decoration:none}
.hub-footer-links a:hover,.hub-footer-links a:focus-visible{text-decoration:underline}

/* -- charts -- */
/* One grid for the whole chart, rows as display:contents: every row shares the same three
   columns, so every track starts and ends at the same x and a bar's width means the same thing
   in every row. (Each row used to be its own grid with an `auto` value column, so a wider
   label shrank that row's track.) */
.hub-bars{display:grid;grid-template-columns:130px minmax(0,1fr) auto;align-items:center;gap:10px;font-size:12.5px}
.hub-bar-row{display:contents}
.hub-bar-name{min-width:0;overflow-wrap:anywhere;font-weight:600;color:var(--color-text-muted)}
.hub-bar-track{height:10px;overflow:hidden;background:var(--color-surface-soft);border-radius:5px}
.hub-bar-fill{height:100%;border-radius:5px}
.hub-bar-fill.tone-accent{background:var(--color-accent)}
.hub-bar-fill.tone-success{background:var(--color-success)}
.hub-bar-fill.tone-muted{background:var(--color-text-muted)}
.hub-bar-fill.tone-danger{background:var(--color-danger)}
/* Numbers and units are one left-to-right run even on an Arabic page: without the isolate the
   bidi algorithm reorders "2 / 10 kg" to "kg 10 / 2". */
.hub-bar-val{font-weight:700;text-align:end;white-space:nowrap;direction:ltr;unicode-bidi:isolate}
.hub-compare-bars{display:flex;align-items:flex-end;gap:26px;height:170px;padding:28px 6px 28px}
.hub-compare-col{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;flex:1;height:100%;gap:8px}
.hub-compare-bar{width:56px;min-height:2px;flex-shrink:0;border-radius:8px 8px 3px 3px}  /* no shrink: two tall bars shrank to one height (walkthrough 2026-09-25) */
.hub-compare-bar.is-prior{background:var(--color-line-strong)}
.hub-compare-bar.is-current{background:var(--color-accent)}
.hub-compare-val{font-size:12.5px;font-weight:700;white-space:nowrap}
.hub-compare-lbl{position:absolute;bottom:-26px;font-size:11.5px;font-weight:700;white-space:nowrap;color:var(--color-text-muted)}

/* -- live marker, row captions, setup nudges (Phase 2b) -- */
.hub-live{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;vertical-align:middle;color:var(--color-warning);background:var(--color-warning-soft);border-radius:6px;cursor:help}
.hub-row-caption{margin:6px 0 -4px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted)}
.hub-nudges{display:flex;flex-direction:column;gap:8px}
.hub-nudge{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;min-height:44px;padding:8px 14px;font-size:13px;color:var(--color-text);text-decoration:none;background:var(--color-warning-soft);border:1px solid var(--color-line);border-radius:12px;transition:border-color var(--motion-fast)}
.hub-nudge:hover,.hub-nudge:focus-visible{border-color:var(--color-warning)}
.hub-nudge-cta{font-size:12px;font-weight:800;white-space:nowrap;color:var(--color-accent-strong)}
.hub-tile .hub-bars{grid-template-columns:84px minmax(0,1fr) auto;gap:6px 8px;font-size:12px}

/* -- menu engineering: quadrants, dish table, class badges (Phase 2b) -- */
.hub-quad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hub-quad-cell{display:flex;flex-direction:column;gap:8px;padding:14px;background:var(--color-surface-raised);border:1px solid var(--color-line);border-inline-start-width:4px;border-radius:12px}
.hub-quad-cell.is-star{border-inline-start-color:var(--color-success)}
.hub-quad-cell.is-plowhorse{border-inline-start-color:var(--color-warning)}
.hub-quad-cell.is-puzzle{border-inline-start-color:var(--color-accent)}
.hub-quad-cell.is-dog{border-inline-start-color:var(--color-danger)}
.hub-quad-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.hub-quad-title{font-size:13px;font-weight:800}
.hub-quad-count{font-family:var(--font-display);font-size:20px;font-weight:700}
.hub-quad-hint{margin:0;font-size:11.5px;line-height:1.4;color:var(--color-text-muted)}
.hub-quad-list{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;font-size:12.5px}
.hub-quad-list small{margin-inline-start:6px;color:var(--color-text-muted)}
.hub-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.hub-table{width:100%;border-collapse:collapse;font-size:13px}
.hub-table th{padding:10px 12px;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-align:start;text-transform:uppercase;white-space:nowrap;color:var(--color-text-muted);background:transparent;border-bottom:1px solid var(--color-line)}
.hub-table td{padding:11px 12px;color:var(--color-text-secondary);vertical-align:middle;border-bottom:1px solid var(--color-line)}
.hub-table tr:last-child td{border-bottom:0}
.hub-table .num{text-align:end;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Columns a phone can do without; hidden at phone width (640px block below), never wrapped. */
.hub-col-opt{white-space:nowrap}
.hub-badge{display:inline-flex;align-items:center;min-height:24px;padding:2px 9px;font-size:11px;font-weight:800;white-space:nowrap;color:var(--color-text-muted);background:var(--color-surface-soft);border-radius:99px}
.hub-badge.is-star{color:var(--color-success);background:var(--color-success-soft)}
.hub-badge.is-plowhorse{color:var(--color-warning);background:var(--color-warning-soft)}
.hub-badge.is-puzzle{color:var(--color-accent-strong);background:var(--color-accent-soft)}
.hub-badge.is-dog{color:var(--color-danger);background:var(--color-danger-soft)}
.hub-badge.is-setup{background:transparent;border:1px dashed var(--color-line-strong)}

/* -- stock: unit-cost entry panel (Phase 2b) --
   The app's global input rule (input:not([type=checkbox])... , specificity 0,4,1)
   sets width:100% and its own padding/colours; a single class cannot outrank it,
   so the input is sized through flex-basis, which takes precedence over width. */
.hub-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hub-cost-list{display:flex;flex-direction:column}
.hub-cost-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto minmax(84px,auto);align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--color-line)}
.hub-cost-row:last-child{border-bottom:0}
.hub-cost-name{display:flex;flex-direction:column;min-width:0;font-size:13px;font-weight:700;overflow-wrap:anywhere}
.hub-cost-name small{font-size:11px;font-weight:600;color:var(--color-text-muted)}
.hub-cost-field{display:flex;align-items:center;gap:8px;margin:0}
.hub-cost-input{flex:0 0 112px;min-height:44px;text-align:end;font-variant-numeric:tabular-nums}
.hub-cost-unit{font-size:11.5px;white-space:nowrap;color:var(--color-text-muted)}
.hub-cost-save{min-height:44px;padding:0 16px;font-weight:800;color:var(--primitive-ink);background:var(--color-accent);border:0;border-radius:10px;cursor:pointer;transition:opacity var(--motion-fast)}
.hub-cost-save:disabled{opacity:.4;cursor:default}
.hub-cost-status{min-width:0;font-size:12px;font-weight:700;color:var(--color-text-muted)}
.hub-cost-row.is-saved .hub-cost-status{color:var(--color-success)}
.hub-cost-row.is-error .hub-cost-status{color:var(--color-danger)}
.hub-cost-row.is-busy .hub-cost-save{opacity:.6}

/* Desktop landing page fills the viewport: the tile rows share whatever height
   is left under the top bar instead of stopping halfway down the screen.
   100dvh minus .ops-shell's own 22px + 42px vertical padding. */
@media (min-width:960px){
  .hub-shell.is-landing{min-height:calc(100dvh - 64px);padding-bottom:0}
  .hub-shell.is-landing .hub-grid{flex:1 1 auto;grid-auto-rows:1fr;align-content:stretch}
  .hub-shell.is-landing .hub-tile{min-height:0}
  .hub-shell.is-landing .hub-spark{max-height:88px}
}
/* Wide screens: a fixed four-column board, so the eight topic tiles form two
   even rows instead of six-then-two. */
@media (min-width:1280px){
  .hub-shell.is-landing .hub-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (max-width:640px){
  .hub-title-row h1{font-size:22px}
  .hub-range,.hub-seg-group{width:100%}
  .hub-seg{flex:1 1 auto;padding:0 10px}
  .hub-custom{flex:1 1 auto}
  .hub-custom-form{right:0;left:0;min-width:0}
  .hub-bars{grid-template-columns:96px minmax(0,1fr) auto}
  .hub-compare-bar{width:44px}
  .hub-quad{grid-template-columns:1fr}
  .hub-cost-row{grid-template-columns:minmax(0,1fr) auto}
  .hub-cost-name,.hub-cost-status{grid-column:1/-1}
  .hub-tile .hub-bars{grid-template-columns:72px minmax(0,1fr) auto}
  .hub-col-opt{display:none}
  .hub-table th{padding:8px 6px;white-space:normal}
  .hub-table th.num{white-space:normal}
  .hub-table td{padding:10px 6px}
}
@media (prefers-reduced-motion:reduce){
  .hub-tile,.hub-seg,.hub-compare,.hub-back,.hub-nudge,.hub-cost-save{transition:none}
  .hub-tile:hover,.hub-tile:focus-visible{transform:none}
}
/* Hub navigation in progress (see routes/dashboard_hub._HUB_LOADING_JS): the
   current page stays, dimmed, with an "Updating..." label, instead of the
   browser going blank for the several seconds a hub page takes to build. */
.hub-shell.hub-loading { opacity: .5; pointer-events: none; transition: opacity var(--motion-fast); }
.hub-updating { position: fixed; top: 88px; left: 50%; transform: translateX(-50%); z-index: 600;
  padding: 8px 16px; border-radius: 999px; background: var(--color-surface-raised);
  border: 1px solid var(--color-line); color: var(--color-text); font-size: 13px; font-weight: 700;
  box-shadow: var(--shadow-2, 0 14px 34px rgba(0,0,0,.28)); }
.hub-updating[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .hub-shell.hub-loading { transition: none; } }
/* ===== /Business Health hub ===== */

/* ===== Customer profile stats (gp-*) ===== */
.gp-scopes{margin:0 0 14px;max-width:100%;overflow-x:auto}
.gp-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px;padding:10px 14px;border:1px solid var(--color-line);border-radius:12px;background:var(--color-surface-raised)}
.gp-strip-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--color-text-muted)}
.gp-strip-note{flex-basis:100%;font-size:11px;color:var(--color-text-muted)}
.gp-flag{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700}
.gp-flag.is-vip{color:var(--color-accent-strong);background:var(--color-accent-soft)}
.gp-flag.is-spender{color:var(--color-success);background:var(--color-success-soft)}
.gp-flag.is-no_show{color:var(--color-danger);background:var(--color-danger-soft)}
.gp-flag.is-quiet{color:var(--color-text-muted);background:var(--color-surface-soft)}
.gp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}
.gp-card{margin:0;min-width:0}
.gp-wide{grid-column:1/-1}
.gp-list{list-style:none;margin:0;padding:10px 16px 0;display:flex;flex-direction:column;gap:6px}
.gp-list li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;border-bottom:1px solid var(--color-line)}
.gp-list li:last-child{border-bottom:0}
.gp-dish{display:flex;flex-direction:column;min-width:0}
.gp-also{font-size:11px;color:var(--color-text-muted)}
.gp-diet-warn{align-self:flex-start;margin-top:3px;padding:2px 7px;border-radius:999px;font-size:11px;font-weight:700;line-height:1.4}
.gp-diet-warn.is-contains{background:var(--color-danger-soft);color:var(--color-danger)}
.gp-diet-warn.is-unchecked{background:var(--color-warning-soft);color:var(--color-warning)}
.gp-sub{margin:14px 16px 6px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--color-text-muted)}
.gp-table{width:100%;border-collapse:collapse;font-size:13px}
.gp-table td{padding:8px 16px;border-top:1px solid var(--color-line);white-space:nowrap}
.gp-receipt{display:inline-flex;align-items:center;min-height:44px;color:var(--color-accent-strong);font-weight:700;text-decoration:none}
.gp-receipt:hover,.gp-receipt:focus-visible{text-decoration:underline}
.gp-muted{color:var(--color-text-muted);font-size:11px}
.gp-warn{color:var(--color-warning);font-weight:800}
.gp-empty,.gp-unavail{margin:0;padding:14px 16px;font-size:13px;color:var(--color-text-muted)}
.gp-empty-scope{margin:0 0 14px;padding:12px 16px;border:1px dashed var(--color-line);border-radius:12px;font-size:14px;color:var(--color-text-muted)}
.gp-unavail{color:var(--color-warning)}
body.ar .gp-strip,body.ar .gp-list li{direction:rtl}
@media (max-width:1099px){
  .gp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gp-grid>.gp-card:nth-child(3){grid-column:1/-1}
}
@media (max-width:640px){
  .gp-grid{grid-template-columns:1fr}
  .gp-table td{padding:8px 10px;white-space:normal}
}
/* ===== /Customer profile stats ===== */

/* Reports date range on phones: the two dates share a row at full width and
   Apply gets its own row. nowrap plus the form's inline margin-left squeezed
   the dates to ~120px (the text cut off) and pushed Apply against the screen
   edge (walkthrough 2026-09-25). */
@media (max-width: 780px) {
  .rpt-custom { flex-wrap: wrap; margin-left: 0 !important; margin-inline-start: 0 !important; }
  .rpt-custom input[type=date] { flex: 1 1 40%; min-width: 0; }
  .rpt-custom button[type=submit] { flex: 1 1 100%; }
}

/* Arabic: the floating Ask-Zaki button is pinned bottom-right in both
   directions, and a mirrored tile put its "افتح" link on the right, under the
   button, while scrolling (walkthrough 2026-09-25). In RTL the link sits at
   the tile's inline end (left), clear of the button's column; the whole tile
   is the link anyway. */
body.ar .hub-tile .hub-cta, [dir="rtl"] .hub-tile .hub-cta { align-self: flex-end; }

/* Desktop: the page's end must scroll clear of the floating controls -- the
   Ask-Zaki button (bottom 24px + 58px) and Back to top (bottom 24px + 44px).
   42px left the last card, the hub's "Other pages" row and Money's payment
   mix underneath them (walkthrough round 3, 2026-09-25). */
@media (min-width: 960px) {
  main#main-content.page,
  #main-content .page { padding-bottom: 112px; }
}
/* Desktop: the Ask-Zaki button (right 22px + 58px) sat over right-aligned
   figures mid-page -- Money's payment mix amounts, the start of Arabic lines
   on Automation (walkthrough round 4). Pages keep a right gutter it lives in.
   Today's fitted overview is left alone; its layout already clears it. The
   overview class sits on <main>, so the guard goes on #main-content, not on
   the inner .page (review, round 4). */
@media (min-width: 960px) {
  main#main-content.page:not(.dashboard-main-overview),
  #main-content:not(.dashboard-main-overview) .page { padding-right: 96px; }
}

/* Phone top bar: show the branch part of the venue name (see _nav). */
.bsl-short { display: none; }
#global-search-btn .global-search-input{flex:1;min-width:0;width:100%;height:100%;padding:0!important;border:0!important;outline:none!important;box-shadow:none!important;background:transparent!important;color:inherit;font:inherit;border-radius:0}
#global-search-btn:focus-within{outline:2px solid var(--color-focus);outline-offset:2px}
.global-search-results-toolbar{position:absolute;top:10px;right:12px;display:flex;z-index:1;padding:0}
#global-search-results .global-search-group:first-child .global-search-group-label{padding-right:44px;min-height:28px}
/* Compact, scrollable overview and usable header below the desktop rail. */
@media (max-width:959px){
  #mainNav{grid-template-columns:40px minmax(0,1fr)!important;column-gap:12px}
  #mainNav .nav-right{display:flex;flex:1 1 0;width:auto!important;min-width:0;gap:8px}
  #mainNav .nav-left{flex:0 0 40px!important;width:40px!important;min-width:0!important;max-width:40px!important}
  #mainNav .global-search{position:relative!important;flex:1 1 0!important;width:auto!important;min-width:0!important;max-width:none!important;left:auto!important;transform:none!important}
  #mainNav .global-search-btn{width:100%!important;max-width:none!important}
  #mainNav .nav-account-menu{flex:0 0 auto}
  #mainNav .nav-account-menu-btn{padding:0 8px!important;justify-content:center;overflow:visible}
  #mainNav .nav-account-menu-avatar{flex:0 0 30px}
  #tab-overview .overview-page{height:auto!important;overflow:visible!important}
  #tab-overview .zaki-showcase-grid{height:auto!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto!important;overflow:visible!important}
  #tab-overview .zaki-showcase-grid>article{grid-column:1/-1!important;grid-row:auto!important;height:auto!important;max-height:none!important}
  #tab-overview .zaki-service-flow-panel{grid-column:1/-1!important;grid-row:3!important;width:100%;height:auto!important;max-height:none!important;overflow:visible!important}
  #tab-overview .zaki-automation-action{min-height:56px!important;padding:8px 12px!important;grid-template-columns:32px minmax(0,1fr) auto!important;grid-template-rows:1fr!important;grid-template-areas:"icon copy value"!important;gap:10px!important}
  #tab-overview .zaki-automation-icon{width:32px!important;height:32px!important}
  #tab-overview .zaki-automation-action strong{font-size:12px!important;line-height:1.2!important}
  #tab-overview .zaki-automation-action b{font-size:22px!important;min-width:0!important}
}
@media (max-width: 959px) {
  #mainNav .nav-left .bsl-full { display: none; }
  #mainNav .nav-left .bsl-short { display: inline; }
}

/* ===== Kitchen stations (sql/169) =====
   Station switcher above the Kitchen board, the station tag on each line in
   the "All stations" view, and the read-only "View full order" dialog.
   Tokens only; 44px touch targets; logical properties so RTL mirrors. */
.kitchen-station-switch { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.kitchen-station-chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--color-line-strong); border-radius: 999px;
  background: var(--color-surface); color: var(--color-text);
  font-weight: 600; text-decoration: none; white-space: nowrap;
}
.kitchen-station-chip:hover { background: var(--color-bg-subtle); }
.kitchen-station-chip.active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-surface); }
.kitchen-station-chip:focus-visible { outline: 2px solid var(--color-accent-strong); outline-offset: 2px; }
.ticket-item-station {
  margin-inline-start: auto; padding: 2px 8px; border-radius: 999px;
  background: var(--color-accent-soft); color: var(--color-accent-strong);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.ticket-station-waiting { display: inline-flex; align-items: center; min-height: 44px; }
.kitchen-full-order-btn { min-height: 44px; }
.ticket-actions .kitchen-full-order-btn { margin-inline-start: auto; }
dialog.kitchen-full-order {
  width: min(520px, calc(100vw - 32px)); max-height: min(80vh, 720px); padding: 0;
  border: 1px solid var(--color-line); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-1);
}
dialog.kitchen-full-order::backdrop { background: rgba(0, 0, 0, 0.45); }
.kitchen-full-order-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--color-line);
}
.kitchen-full-order-head h3 { margin: 0; font-size: 18px; }
.kitchen-full-order-head .ops-btn { min-height: 44px; }
.kitchen-full-order-body { padding: 12px 16px 16px; overflow-y: auto; max-height: calc(min(80vh, 720px) - 70px); }
.kitchen-full-order-group { padding: 10px 0; border-bottom: 1px solid var(--color-line); }
.kitchen-full-order-group:last-child { border-bottom: 0; }
.kitchen-full-order-group h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 15px; }
.kitchen-full-order-badge {
  padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--color-bg-subtle); color: var(--color-text-secondary);
}
.kitchen-full-order-group.current .kitchen-full-order-badge { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.kitchen-full-order-group.done .kitchen-full-order-badge { background: var(--color-success-soft); color: var(--color-success); }
.kitchen-full-order-group ul { list-style: none; margin: 0; padding: 0; }
.kitchen-full-order-group li {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; padding: 6px 0;
}
.kitchen-full-order-group li small { grid-column: 1 / -1; color: var(--color-text-muted); }
.kitchen-full-order-status { color: var(--color-text-muted); font-size: 13px; white-space: nowrap; }
.kitchen-full-order-group li.status-ready .kitchen-full-order-status,
.kitchen-full-order-group li.status-delivered .kitchen-full-order-status { color: var(--color-success); font-weight: 600; }

/* Responsive sizing: let content determine height when the working canvas
   is narrow or short. Keep the existing rail breakpoint and panel order. */
body{min-width:0}
.page-header>*{min-width:0}
.page-header{flex-wrap:wrap}
.hub-grid{grid-template-columns:repeat(auto-fill,minmax(min(258px,100%),1fr))}
.hub-stat-row{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
/* Today must remain scrollable at every width and height; large displays
   can still have short browser windows or enlarged text. */
@media screen{
  main#main-content.dashboard-main-overview,#tab-overview.yn-tab-panel.active,.overview-page{
    height:auto!important;max-height:none!important;overflow:visible!important;
  }
  .zaki-today-showcase{height:auto!important;min-height:0;grid-template-rows:auto auto auto}
  .zaki-showcase-grid{grid-template-rows:auto auto auto!important;overflow:visible!important}
  .zaki-showcase-grid>*{min-width:0}
  .zaki-arrivals-panel{min-height:160px}
  .zaki-service-flow-panel{height:auto!important;max-height:none!important;overflow:visible!important}
  .zaki-readiness-panel .zaki-command-grid{flex:none;height:auto!important;max-height:none}
}
@media (min-width:960px) and (max-width:1599px){
  .zaki-showcase-grid{grid-template-columns:minmax(0,1.65fr) minmax(0,.85fr)!important}
  .zaki-automation-action{
    grid-template-columns:40px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    grid-template-areas:"icon copy" "icon value"!important;
    gap:5px 10px!important;min-height:100px!important;padding:14px!important;
  }
  .zaki-automation-action>b{justify-self:start!important;max-width:100%;font-size:24px!important;white-space:normal;overflow-wrap:anywhere}
  .zaki-automation-action strong{font-size:13px!important;line-height:1.35!important;white-space:normal!important;overflow-wrap:anywhere}
  .zaki-automation-action .zaki-automation-icon{width:40px;height:40px}
  .zaki-showcase-card{min-height:112px;padding:16px}
  .zaki-showcase-card strong{font-size:36px}
  .zaki-showcase-card small,.zaki-card-title{font-size:12px}
  .zaki-readiness-panel .zaki-command-card{min-height:90px;padding:14px}
  .zaki-service-flow-panel{padding:16px}
  .zaki-flow-stage{min-height:76px;padding:12px}
  .zaki-flow-kpi{min-height:64px;padding:12px}
  .zaki-flow-stage-row,.zaki-flow-kpi-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zaki-flow-stage-row::before{display:none}
}
/* A horizontal arrival strip on phone, tablet and desktop alike. */
.zaki-arrivals-panel .zaki-arrivals-list{
  display:flex;flex:1 1 auto;gap:12px;min-width:0;min-height:0;
  padding:4px 2px 10px;overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scrollbar-width:thin;
}
.zaki-arrivals-panel .zaki-arrivals-list::before,.zaki-arrivals-panel .zaki-arrival-row::before{display:none}
.zaki-arrivals-panel .zaki-arrival-row{
  display:block;flex:0 0 min(240px,85%);min-width:0;min-height:0;padding:0;
  background:var(--color-surface-raised);border:1px solid var(--color-line);
  border-radius:12px;scroll-snap-align:start;
}
.zaki-arrivals-panel .zaki-arrival-summary{grid-template-columns:max-content minmax(0,1fr);gap:10px;min-height:56px;padding:8px 10px}
.zaki-arrivals-panel .zaki-arrival-time{padding:0;min-width:0}
.zaki-arrivals-panel .zaki-arrival-main strong{font-size:12px;overflow-wrap:anywhere}
.zaki-arrivals-panel .zaki-arrival-main small{font-size:10px;white-space:normal}
.zaki-arrivals-panel .zaki-arrival-time strong{font-size:16px;min-width:0}
.zaki-arrivals-panel .zaki-arrival-empty{flex:1 0 100%}
.zaki-service-flow-panel{align-self:stretch!important;width:100%;min-width:0;margin-inline:0}
@media (min-width:1100px){
  .zaki-flow-stage-row,.zaki-flow-kpi-row{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:520px){
  .page-header .btn,.page-header .ops-btn{max-width:100%;white-space:normal}
  .hub-grid{grid-template-columns:minmax(0,1fr)}
  .zaki-showcase-topbar{flex-wrap:wrap}
  .zaki-panel-head-actions{flex-wrap:wrap}
}
@media (max-width:360px){
  .nav-tab.active .nav-tab-label{display:none}
}

/* Keep compact header artwork square and initials centered independently of
   the sidebar's shared image and text rules. */
@media (max-width:959px){
  .nav .nav-logo-box,.nav .nav-logo-box.ops-notify-btn{
    width:44px;height:44px;min-width:44px;min-height:44px;max-height:44px;
    flex:0 0 44px;aspect-ratio:1;padding:0;line-height:1;
  }
  .nav .nav-logo-box img.nav-logo-badge{width:28px;height:28px;max-width:28px;object-fit:contain}
}
.nav-account-menu-avatar{flex:0 0 30px;line-height:1}
.nav-account-menu-avatar .nav-account-avatar-initials,
.nav-account-menu-header-avatar .nav-account-avatar-initials{
  width:100%;height:100%;min-width:0;min-height:0;
  display:grid;place-items:center;font-size:inherit;line-height:1;
}
/* Compact automation at phone/tablet widths, so Service Flow follows closely. */
@media (max-width:1099px){
  .zaki-automation-panel{padding:10px}
  .zaki-automation-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px}
  .zaki-automation-action{
    grid-template-columns:28px minmax(0,1fr)!important;
    grid-template-areas:"icon copy" "icon value"!important;
    grid-template-rows:auto auto!important;min-height:66px!important;
    padding:8px!important;gap:3px 7px!important;
  }
  .zaki-automation-action .zaki-automation-icon{width:28px;height:28px}
  .zaki-automation-action strong{font-size:11px!important;line-height:1.2!important}
  .zaki-automation-action>b{font-size:18px!important;justify-self:start!important}
  .zaki-service-flow-panel{display:block!important;flex:0 0 auto;overflow:visible!important}
}
@media (max-width:520px){
  .zaki-automation-actions{grid-template-columns:minmax(0,1fr)!important}
  .zaki-automation-action{
    grid-template-columns:28px minmax(0,1fr) auto!important;
    grid-template-areas:"icon copy value"!important;grid-template-rows:auto!important;
    min-height:52px!important;
  }
}

/* Visual audit repairs: keep actions and data reachable at every width. */
.ops-workspace-actions .ops-btn{display:inline-flex;align-items:center;gap:8px}
.ops-workspace-actions .ops-btn svg{width:20px;height:20px;flex:0 0 20px}
.page-header>div:last-child{max-width:100%;flex-wrap:wrap}
.fp-wrap:has(>#fp-canvas){overflow-x:auto;overscroll-behavior-inline:contain}
.rpt-chart-wrap:has(>.rpt-staff-table){overflow-x:auto;overscroll-behavior-inline:contain}
.rpt-staff-table{min-width:560px}
.guest-preview-shell .guest-phone-top{flex-wrap:wrap}
.guest-preview-shell .guest-phone-top strong{flex:1 1 140px;overflow-wrap:anywhere}
.guest-preview-shell .guest-reservation-card{display:grid;gap:6px}
.guest-preview-shell .guest-status-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;height:auto;margin:12px;padding:0;background:none}
.guest-preview-shell .guest-status-rail span{padding:8px 2px;text-align:center;font-size:11px;border-bottom:3px solid var(--color-line)}
.guest-preview-shell .guest-status-rail .done,.guest-preview-shell .guest-status-rail .active{border-color:var(--color-accent)}
.guest-preview-shell .guest-section-head{flex-wrap:wrap}
.guest-preview-shell .guest-section-head h2{margin:0;font-size:18px}
.guest-preview-shell .guest-menu-card{grid-template-columns:48px minmax(0,1fr) 44px;align-items:center;gap:10px}
.guest-preview-shell .guest-menu-photo{display:grid;place-items:center;width:48px;height:48px;background:var(--color-accent-soft);font-size:26px}
.guest-preview-shell .guest-menu-card strong,.guest-preview-shell .guest-menu-card span{display:block;overflow-wrap:anywhere}
.guest-preview-shell .guest-menu-card span{margin-top:4px;font-size:12px;color:var(--color-text-muted)}
.guest-preview-shell .guest-phone button{min-width:44px;min-height:44px;padding:8px 12px;border:1px solid var(--color-line);border-radius:10px;background:var(--color-accent);color:var(--primitive-ink);font-weight:700}
.guest-preview-shell .guest-cart{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.guest-preview-shell .guest-cart strong,.guest-preview-shell .guest-bill-card strong{display:block}
.guest-preview-shell .guest-bill-card{margin:12px;padding:14px;background:var(--color-bg-subtle);border-radius:14px}
.guest-preview-shell .guest-pay-row{flex-wrap:wrap}
.guest-preview-shell .guest-bottom-nav{grid-template-columns:repeat(4,minmax(0,1fr));text-align:center;font-size:12px}
.guest-preview-shell .guest-bottom-nav a{display:grid;place-items:center;min-height:44px}

@media screen{
  /* Put this secondary action after content instead of over primary buttons. */
  .zaki-back-to-top{position:relative;inset:auto;transform:none;z-index:auto;width:max-content;max-width:100%;margin:24px auto calc(120px + env(safe-area-inset-bottom));animation:none}
  .zaki-back-to-top:hover{transform:translateY(-2px)}
  .zaki-back-to-top:active{transform:scale(.98)}
}
@media (min-width:960px){.zaki-back-to-top{margin-bottom:24px}}
@media (max-width:959px){
  .nav .nav-venue{display:none!important}
  .kitchen-display-head{display:flex!important;flex-wrap:wrap;align-items:center;gap:12px}
  .kitchen-display-head .kitchen-color-code{display:flex!important;flex:1 0 100%;flex-wrap:wrap;justify-content:flex-start!important;white-space:normal;gap:8px!important;padding:0}
  .kitchen-display-head .kitchen-color-code span{white-space:normal;padding:6px 10px!important;line-height:1.3}
}
@media (max-width:520px){
  .organization-page form{grid-template-columns:minmax(0,1fr)!important}
  .organization-page form>*{min-width:0;max-width:100%}
  .rpt-custom{width:100%;margin-inline:0!important;flex-wrap:wrap}
  .rpt-custom input[type=date]{flex:1 1 160px;min-width:min(160px,100%);width:auto!important;max-width:100%}
  .zaki-flow-stage small,.zaki-flow-kpi span{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
}
@media (max-width:360px){
  .zaki-flow-stage-row,.zaki-flow-kpi-row{grid-template-columns:minmax(0,1fr)!important}
}

@media screen and (max-width:959px){main#main-content{padding-top:calc(84px + env(safe-area-inset-top))!important}}

/* Navigation surfaces follow the selected theme at every breakpoint. */
:root .nav{background:var(--color-surface)}
:root.light .nav,:root[data-theme="light"] .nav{background:#fff}
@media (max-width:959px){:root:not(.light):not([data-theme="light"]) .nav-center{background:var(--color-surface-raised)}}