/* ============================================================================
   Pultrack design tokens + chrome — design-handoff-v1 applied over Bootstrap 5.
   Source of truth: branding/design-handoff-v1/ (Design Handoff §02–§05).
   This file loads AFTER bootstrap + style.css so its tokens win.
   ============================================================================ */

@import url('/static/fonts/plex.css');

:root{
  /* -- colour tokens (handoff §02) -- */
  --green:#1B5739; --green-2:#103A26; --green-soft:#E7F0EA; --green-line:#CDE0D4;
  --ink:#13211B; --gold:#C28A2C; --gold-2:#9C6E1C; --gold-soft:#F7EAD0; --gold-line:#E7D2A0;
  --paper:#F4F1E9;
  --muted:#6E685B; --line:#E3DDD0;
  --debt:#992C22; --debt-soft:#F4E0DC; --debt-line:#E2C2BB;
  --money-2:#564E41;
  --shadow:0 1px 2px rgba(20,30,24,.05),0 8px 28px rgba(20,30,24,.07);
  --app-bg:#EEECE3; --app-card:#FFFFFF; --app-line:#E0DACC;
  --app-line-soft:#ECE7DC; --app-hover:#F6F4EE; --app-ink:#1A241F;
  /* -- layout -- */
  --sidebar-w:236px; --sidebar-rail:62px; --topbar-h:50px;

  /* Re-point Bootstrap's own palette at the brand tokens so every
     .btn-primary / .text-success / .table-striped etc. follows along. */
  --bs-primary:#1B5739; --bs-primary-rgb:27,87,57;
  --bs-success:#1B5739; --bs-success-rgb:27,87,57;
  --bs-danger:#992C22;  --bs-danger-rgb:153,44,34;
  --bs-warning:#C28A2C; --bs-warning-rgb:194,138,44;
  --bs-body-bg:#EEECE3; --bs-body-color:#1A241F;
  --bs-border-color:#E0DACC;
  --bs-font-sans-serif:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --bs-font-monospace:'IBM Plex Mono',SFMono-Regular,Menlo,Consolas,monospace;
  --bs-link-color:#1B5739; --bs-link-hover-color:#103A26;
}

body{
  background:var(--app-bg);
  color:var(--app-ink);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
}

/* Numbers are the product — tabular figures wherever amounts line up. */
table, .text-end, .money, input[type=number]{ font-variant-numeric:tabular-nums; }

code, .mono, kbd{ font-family:'IBM Plex Mono',monospace; }
code{ color:var(--green); }

/* ---------------------------------------------------------------- buttons */
.btn-primary, .btn-success{
  --bs-btn-bg:var(--green); --bs-btn-border-color:var(--green);
  --bs-btn-hover-bg:var(--green-2); --bs-btn-hover-border-color:var(--green-2);
  --bs-btn-active-bg:var(--green-2); --bs-btn-active-border-color:var(--green-2);
  --bs-btn-disabled-bg:var(--green); --bs-btn-disabled-border-color:var(--green);
}
.btn-outline-primary, .btn-outline-success{
  --bs-btn-color:var(--green); --bs-btn-border-color:var(--green-line);
  --bs-btn-hover-bg:var(--green); --bs-btn-hover-border-color:var(--green);
  --bs-btn-active-bg:var(--green); --bs-btn-active-border-color:var(--green);
}
.btn-danger{ --bs-btn-bg:var(--debt); --bs-btn-border-color:var(--debt);
  --bs-btn-hover-bg:#7d241c; --bs-btn-hover-border-color:#7d241c; }
.btn-outline-danger{ --bs-btn-color:var(--debt); --bs-btn-border-color:var(--debt-line);
  --bs-btn-hover-bg:var(--debt); --bs-btn-hover-border-color:var(--debt); }
.btn-warning{ --bs-btn-bg:var(--gold); --bs-btn-border-color:var(--gold); }
.btn{ border-radius:9px; }
.btn-sm{ border-radius:7px; }
.btn:focus-visible{ box-shadow:0 0 0 .25rem rgba(27,87,57,.25); }

/* ------------------------------------------------------------------ cards */
.card{
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
  background:var(--app-card);
}
.card-header{
  background:transparent;
  border-bottom:1px solid var(--app-line-soft);
  font-weight:600;
}

/* ------------------------------------------------------------------ forms */
.form-control, .form-select{
  border-radius:9px;
  border-color:var(--app-line);
  color:var(--app-ink);
}
.form-control:focus, .form-select:focus{
  border-color:var(--green);
  box-shadow:0 0 0 .25rem rgba(27,87,57,.15);
}
.form-label{ font-size:.83rem; font-weight:500; color:var(--muted); margin-bottom:.25rem; }
.input-group .btn{ border-radius:0 9px 9px 0; }

/* ----------------------------------------------------------------- tables */
.table{ --bs-table-hover-bg:var(--app-hover); }
.table > :not(caption) > * > *{ border-bottom-color:var(--app-line-soft); }
.table-light, .table-light th{ background-color:var(--app-hover) !important; color:var(--muted); }
table.sortable thead th, table.sticky-head thead th{ background-color:var(--app-hover); }
table.sortable thead th:hover{ background-color:var(--app-line-soft); }
thead th{ font-size:.8rem; font-weight:600; color:var(--muted); }
/* Short structured values must never wrap onto two lines. Doc numbers live in
   <code>; date cells carry .dt. Keeps "2026-06-30" / "PAY-20260630-0002" intact. */
.table code{ white-space:nowrap; }
td.dt, th.dt, td.nowrap, th.nowrap{ white-space:nowrap; }
.table-success, .table-success th, .table-success td{
  --bs-table-bg:var(--green-soft); color:var(--app-ink);
}

/* ----------------------------------------------------------------- badges */
.badge.bg-secondary{ background-color:var(--app-hover) !important; color:var(--muted);
  border:1px solid var(--app-line); font-weight:500; }
.badge.bg-success{ background-color:var(--green-soft) !important; color:var(--green);
  border:1px solid var(--green-line); font-weight:600; }
.badge.bg-danger{ background-color:var(--debt-soft) !important; color:var(--debt);
  border:1px solid var(--debt-line); font-weight:600; }
.badge.bg-warning{ background-color:var(--gold-soft) !important; color:var(--gold-2);
  border:1px solid var(--gold-line); font-weight:600; }

/* ------------------------------------------------ semantic text (handoff) */
.text-danger{ color:var(--debt) !important; }          /* red = already owed */
.text-success{ color:var(--green) !important; }
.text-warning{ color:var(--gold-2) !important; }       /* amber = debt this sale adds */
a{ color:var(--green); }
.alert-danger{ --bs-alert-bg:var(--debt-soft); --bs-alert-border-color:var(--debt-line); --bs-alert-color:var(--debt); }
.alert-warning{ --bs-alert-bg:var(--gold-soft); --bs-alert-border-color:var(--gold-line); --bs-alert-color:var(--gold-2); }
.alert-success{ --bs-alert-bg:var(--green-soft); --bs-alert-border-color:var(--green-line); --bs-alert-color:var(--green-2); }

/* Secondary USD figures — --money-2, AA+ on white and paper (handoff §02). */
.money-sec{ color:var(--money-2); font-size:.85em; }

/* ============================================================ BACK OFFICE
   The two chrome modes (brief Revision 1 §7):
   back office = left sidebar; POS = chrome-free top strip. */
.bo{ display:flex; min-height:100vh; min-height:100dvh; }

/* --------------------------------------------------------------- sidebar */
.sidebar{
  width:var(--sidebar-w); flex:none;
  background:var(--green-2); color:#cfdcd2;
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh; height:100dvh;
  transition:width .15s ease;
  z-index:1030;
}
.sidebar .sb-head{
  display:flex; align-items:center; gap:9px;
  padding:11px 12px 11px 14px; flex:none;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar .sb-head .tile{ width:30px; height:30px; border-radius:8px; flex:none; }
.sidebar .sb-head .wm{ font-weight:600; font-size:16px; color:var(--paper); letter-spacing:-.01em; white-space:nowrap; }
.sidebar .sb-toggle{
  margin-left:auto; background:none; border:0; color:#9fb3a6;
  width:26px; height:26px; border-radius:6px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.sidebar .sb-toggle{ transition:background .16s ease-out, color .16s ease-out; }
.sidebar .sb-toggle:hover{ background:rgba(255,255,255,.08); color:#fff; }
.sidebar .sb-toggle svg{ transition:transform .22s cubic-bezier(.4,0,.2,1); }
.sidebar.rail .sb-toggle svg{ transform:rotate(180deg); }   /* points the way out */
.sidebar .sb-brand{ transition:opacity .16s ease-out; }
.sidebar .sb-brand:hover{ opacity:.85; }
.sidebar .sb-toggle svg{ width:15px; height:15px; }

.sidebar .sb-scroll{ flex:1; overflow-y:auto; overflow-x:hidden; padding:8px 8px 10px; }
.sidebar .sb-scroll::-webkit-scrollbar{ width:5px; }
.sidebar .sb-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:3px; }

.sidebar .sb-glabel{
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:#7e957f; padding:12px 8px 4px; white-space:nowrap;
}
.sidebar .sb-item{
  display:flex; align-items:center; gap:10px;
  padding:7px 9px; margin:1px 0;
  border-radius:8px; border-left:3px solid transparent;
  color:#cfdcd2; text-decoration:none; font-size:13.5px; font-weight:500;
  white-space:nowrap; overflow:hidden;
}
/* Nav polish. Deliberately fast (.16s) and eased-out: a sidebar is passed
   through constantly, so anything slower than ~200ms starts to feel like lag
   rather than finish. No bounce, no stagger — those read as playful, not
   premium, and they fight rapid navigation. */
.sidebar .sb-item{
  transition:background .16s ease-out, color .16s ease-out,
             border-left-color .16s ease-out, transform .16s ease-out;
}
.sidebar .sb-item:hover{
  background:rgba(255,255,255,.07); color:#fff;
  transform:translateX(2px);            /* a nudge, not a slide */
}
.sidebar .sb-item:active{ transform:translateX(1px) scale(.995); }
.sidebar .sb-item.active{
  background:rgba(255,255,255,.10); color:#fff;
  border-left-color:var(--gold);
}
/* The gold rule grows from the middle on hover, so the accent feels attached
   to the item rather than switched on. The ACTIVE item keeps its full bar. */
.sidebar .sb-item:not(.active):hover{ border-left-color:rgba(212,175,55,.45); }
.sidebar.rail .sb-item:hover{ transform:none; }   /* no room to nudge in a rail */
.sidebar .sb-item .ic{ width:17px; height:17px; flex:none; display:flex; }
.sidebar .sb-item .ic i{ font-size:15px; line-height:1; }
.sidebar .sb-item .lbl{ overflow:hidden; text-overflow:ellipsis; }

.sidebar .sb-foot{
  flex:none; border-top:1px solid rgba(255,255,255,.08); padding:10px 12px;
}
.sidebar .sb-user{ display:flex; align-items:center; gap:9px; }
.sidebar .sb-user .av{
  width:30px; height:30px; border-radius:50%; flex:none;
  background:rgba(255,255,255,.12); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:600;
}
.sidebar .sb-user .uw{ display:flex; flex-direction:column; min-width:0; }
.sidebar .sb-user .un{ font-size:12.5px; font-weight:600; color:var(--paper);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar .sb-user .ur{ font-size:10.5px; color:#8aa18e; white-space:nowrap; }
.sidebar .sb-user .out{
  margin-left:auto; background:none; border:0; color:#9fb3a6; cursor:pointer;
  width:26px; height:26px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
}
.sidebar .sb-user .out{ transition:background .16s ease-out, color .16s ease-out; }
.sidebar .sb-user .out:hover{ background:rgba(255,255,255,.1); color:#fff; }

/* Collapsed icon rail */
.sidebar.rail{ width:var(--sidebar-rail); }
.sidebar.rail .wm, .sidebar.rail .sb-glabel, .sidebar.rail .sb-item .lbl,
.sidebar.rail .sb-user .uw{ display:none; }
.sidebar.rail .sb-head{ padding-left:12px; }
.sidebar.rail .sb-item{ justify-content:center; padding:9px 0; }
.sidebar.rail .sb-toggle{ margin-left:0; }
.sidebar.rail .sb-head{ flex-direction:column; gap:7px; }
.sidebar.rail .sb-user{ justify-content:center; }
.sidebar.rail .sb-user .out{ margin-left:0; }

/* Collapsible nav group (e.g. Administration) — folds away the least-used
   section so the list doesn't force a scroll. */
.sidebar .sb-ghead{
  width:100%; display:flex; align-items:center; gap:6px;
  background:none; border:0; cursor:pointer; text-align:left;
}
.sidebar .sb-ghead:hover{ color:#cfdcd2; }
.sidebar .sb-ghead{ transition:color .16s ease-out; }
.sidebar .sb-ghead .chev{
  margin-left:auto; line-height:1;
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.sidebar .sb-ghead .chev i{ font-size:11px; }
.sidebar .sb-group.collapsible.open .sb-ghead .chev{ transform:rotate(180deg); }

/* Expand/collapse. This used to be `display:none`, which cannot animate at all
   — the section simply appeared, the most "unfinished" thing about the old nav.
   
   Animating max-height to a generous cap was the first attempt and looked
   wrong: with ~72px of content under a 512px cap, the height stops changing
   after ~14% of the duration, so opening snapped and closing sat still before
   dropping. Measured, not guessed — 0px at 40ms, full at 110ms, then 290ms of
   nothing.
   
   The fix is grid-template-rows, on a wrapper around ONLY the collapsible
   content — see the note under these rules for why it cannot go on the group
   itself. A single-row 0fr -> 1fr moves to the content's REAL height at a
   constant rate, with no cap to outgrow. */
.sidebar:not(.rail) .sb-gwrap{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .22s cubic-bezier(.4,0,.2,1);
}
.sidebar:not(.rail) .sb-group.collapsible.open .sb-gwrap{ grid-template-rows:1fr; }
.sidebar:not(.rail) .sb-gwrap > .sb-gitems{
  overflow:hidden; min-height:0;          /* min-height:0 is required to collapse */
  opacity:0; transition:opacity .16s ease-out;
}
.sidebar:not(.rail) .sb-group.collapsible.open .sb-gwrap > .sb-gitems{ opacity:1; }
/* The grid must wrap ONLY the collapsible content. Putting `auto 0fr` on the
   group itself (head + items) does NOT work: in an auto-height grid the `auto`
   row takes the content and the `fr` row divides the remaining free space,
   which is zero — measured, the row stayed at 0px with the rule correctly
   matching. A single-row grid makes `1fr` resolve to the content's own height,
   which is the whole point of the technique. */
.sidebar.rail .sb-ghead{ pointer-events:none; }   /* rail: items always show as icons */

/* Users page — section access as a multi-select dropdown */
.sec-multi{ min-width:190px; max-width:230px; }
.sec-multi .sec-toggle{ cursor:pointer; overflow:hidden; }
.sec-multi .sec-label{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sec-menu{ min-width:210px; border-color:var(--app-line); box-shadow:0 8px 28px rgba(20,30,24,.12); }
.sec-menu .sec-opt{ display:flex; align-items:center; gap:8px; cursor:pointer;
  font-size:13.5px; border-radius:7px; padding:6px 9px; }
.sec-menu .sec-opt:hover{ background:var(--app-hover); }
.sec-menu .sec-opt input{ margin:0; }

/* Users page — inline name/username editor */
.name-edit > summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:6px; }
.name-edit > summary::-webkit-details-marker{ display:none; }
.name-edit .sec-pen{ color:#9aa39c; font-size:12px; opacity:0; transition:opacity .12s; }
.name-edit > summary:hover .sec-pen{ opacity:1; }
.name-edit[open] > summary{ margin-bottom:6px; }
.name-form{ display:flex; flex-direction:column; gap:5px; max-width:220px; }

/* --------------------------------------------------------------- main col */
.bo-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.botop{
  height:var(--topbar-h); flex:none;
  background:var(--app-card); border-bottom:1px solid var(--app-line);
  display:flex; align-items:center; gap:10px; padding:0 16px;
  position:sticky; top:0; z-index:1020;
}
.botop .crumb{ font-size:13.5px; color:var(--muted); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Named "‹ Parent" breadcrumb at the top of a detail page — always returns to
   the parent list (restoring its last filter), the way QuickBooks does. */
.backlink{ display:inline-flex; align-items:center; gap:5px; font-size:13.5px;
  font-weight:600; color:var(--brand,#1B5739); text-decoration:none; margin:0 0 12px; }
.backlink:hover{ text-decoration:underline; }
.backlink .bi{ font-size:12px; }
@media print { .backlink{ display:none !important; } }
.botop .right{ margin-left:auto; display:flex; align-items:center; gap:9px; }
.bo-main > main{ padding:1rem; }

/* ================================================================== POS */
.topstrip{
  height:var(--topbar-h);
  background:var(--app-card); border-bottom:1px solid var(--app-line);
  display:flex; align-items:center; gap:12px; padding:0 16px;
  position:sticky; top:0; z-index:1030;
}
.topstrip .brand{ display:flex; align-items:center; gap:9px; text-decoration:none; }
.topstrip .brand .tile{ width:28px; height:28px; border-radius:7px; }
.topstrip .brand .wm{ font-weight:600; font-size:15.5px; color:var(--app-ink); letter-spacing:-.01em; }
.topstrip .sep{ width:1px; height:22px; background:var(--app-line); }
.topstrip .right{ margin-left:auto; display:flex; align-items:center; gap:9px; }
.topstrip .user{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); }
.topstrip .avatar{ width:28px; height:28px; border-radius:50%;
  background:var(--green-soft); color:var(--green);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; }

/* Phone: the strip's right-hand cluster (language, currency, avatar, logout)
   is fixed-size and has no shrink path, so at 375px it ran 12px past the
   viewport and the whole PAGE scrolled sideways — the till is chrome-free, so
   this strip is the only chrome and nothing else absorbed the excess.
   Shed the three labels that carry nothing an icon doesn't: the wordmark
   beside the logo, the word "Back" beside its chevron, and the user's name
   beside their avatar (kept as a title= tooltip). Every control stays present
   and tappable — this hides text, never an affordance. */
@media (max-width: 480px){
  .topstrip{ gap:8px; padding:0 10px; }
  .topstrip .sep{ display:none; }
  .topstrip .right{ gap:6px; }
  .topstrip .brand .wm,
  .topstrip .ts-label{ display:none; }
  .topstrip .user{ gap:0; }
}

/* Currency / language segmented controls in either chrome bar */
.ts-seg{ display:flex; border:1px solid var(--app-line); border-radius:8px; overflow:hidden; }
.ts-seg button{ padding:5px 10px; font-size:12px; font-weight:500; color:var(--muted);
  background:none; border:0; cursor:pointer; }
.ts-seg button.on{ background:var(--green); color:#fff; font-weight:600; }

/* POS payment guards (handoff §05: guarded-debt blocks) */
.pos-remain{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--gold-soft); border:1px solid var(--gold-line);
  color:var(--gold-2); border-radius:9px; padding:8px 12px; font-weight:600;
}
.pos-confirm{
  display:flex; gap:9px; align-items:flex-start;
  border:1px solid var(--gold-line); border-radius:9px; padding:8px 10px;
  font-size:12.5px; background:var(--app-card);
}
.pos-confirm input{ margin-top:2px; }

kbd{
  background:var(--app-bg); border:1px solid var(--app-line); border-radius:5px;
  color:var(--app-ink); font-size:.78em; padding:1px 6px;
}

/* ---------------------------------------------------------------- login */
/* Split-panel login: the brand introduces itself on green-2; the form sits
   on the paper ground. Escapes base.html's main padding to fill the screen. */
.login-split{
  display:flex; min-height:100vh; margin:-1rem;
}
.login-brand{
  width:44%; max-width:560px; flex:none;
  background:var(--green-2); color:var(--paper);
  display:flex; flex-direction:column;
  padding:40px 44px; position:relative; overflow:hidden;
}
.login-brand .lb-top{ display:flex; align-items:center; gap:11px; cursor:default; }
.login-brand .lb-top .pl-mark{ width:44px; height:44px; flex:none; }
.login-brand .lb-top .wm{ font-size:21px; font-weight:700; letter-spacing:-.015em; }

/* -- brand-mark entrance (adapted from design-handoff-v1 §02 Motion) -------
   The rail draws, then the coin (ring riding with it) rolls in from the left
   and rocks right-left on the rail with decaying swings until it settles —
   one continuous motion, no after-the-fact ring pop. Replays on hover/click
   (login.html re-adds .pl-anim). */
@keyframes pl-railGrow{ 0%{transform:scaleX(0)} 100%{transform:scaleX(1)} }
@keyframes pl-coinRock{
  0%   { transform:translateX(-66px) }   /* enters from off-rail left  */
  46%  { transform:translateX(9px)  }    /* swings past centre → right */
  64%  { transform:translateX(-6px) }    /* back left                  */
  79%  { transform:translateX(4px)  }    /* right again, smaller       */
  90%  { transform:translateX(-2px) }    /* left, smaller still        */
  100% { transform:translateX(0)    }    /* settles home               */
}
.pl-anim .rail{ transform-origin:left center; transform-box:fill-box;
  animation:pl-railGrow .5s cubic-bezier(.4,0,.2,1) both; }
.pl-anim .coin-g{
  animation:pl-coinRock 1.8s cubic-bezier(.45,.05,.35,1) .15s both; }
/* Motion is a preference, not a default. Everything above is decoration, so
   it all goes — including the collapse, which snaps like the old behaviour. */
@media (prefers-reduced-motion: reduce){
  .sidebar, .sidebar *{ transition:none !important; }
  .sidebar .sb-item:hover, .sidebar .sb-item:active{ transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .pl-anim .rail, .pl-anim .coin-g{ animation:none; }
}
.login-brand .lb-mid{ margin:auto 0; position:relative; z-index:1; }
.login-brand .lb-tag{
  font-size:clamp(26px, 2.6vw, 34px); font-weight:700; letter-spacing:-.02em;
  line-height:1.15; margin-bottom:26px;
}
.login-brand .lb-pillars{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:13px; }
.login-brand .lb-pillars li{
  display:flex; align-items:center; gap:12px;
  font-size:14.5px; font-weight:500; color:#cfdcd2;
}
.login-brand .lb-pillars i{
  width:34px; height:34px; flex:none; border-radius:9px;
  background:rgba(255,255,255,.08); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.login-brand .lb-mark{
  position:absolute; right:-90px; bottom:-70px; width:340px; height:340px;
  color:var(--paper); opacity:.07; pointer-events:none;
}
.login-brand .lb-foot{
  font-family:'IBM Plex Mono',monospace; font-size:11.5px;
  letter-spacing:.14em; color:#7e957f; position:relative; z-index:1;
}

.login-side{
  flex:1; min-width:0; display:flex; flex-direction:column;
  background:var(--app-bg); padding:22px 26px;
}
.login-side .ls-head{ display:flex; justify-content:flex-end; flex:none; }
.login-side .ls-body{ flex:1; display:flex; align-items:center; justify-content:center; }
.login-card{
  width:100%; max-width:380px;
  background:var(--app-card); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); padding:34px 34px 30px;
}
.login-card .lc-brand{
  display:flex; align-items:center; justify-content:center; gap:9px; margin-bottom:14px;
}
.login-card .lc-brand img{ width:30px; height:30px; border-radius:8px; }
.login-card .lc-brand span{ font-weight:700; font-size:17px; }
.login-card .lc-title{
  font-size:19px; font-weight:700; letter-spacing:-.01em;
  text-align:center; margin:0 0 22px; color:var(--app-ink);
}
.login-side .ls-foot{
  flex:none; display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:11.5px; color:var(--muted); padding-top:14px;
}
.login-side .ls-foot svg{ width:13px; height:13px; color:var(--muted); }

/* Language picker: compact dropdown (login + setup + start; replaced the
   old .lang-seg segmented button row) */
.lang-pick{ display:flex; align-items:center; gap:6px; margin:0; color:var(--muted); }
.lang-pick .bi{ font-size:15px; opacity:.7; }
.lang-pick select{ width:auto; min-width:150px; }

@media (max-width: 991px){
  .login-brand{ display:none; }
}

/* Toasts follow the semantic tokens */
.text-bg-success{ background-color:var(--green) !important; }
.text-bg-danger{ background-color:var(--debt) !important; }

/* ---- salary-payout decision panel (expense form) ---- */
.emp-decide{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
  background:var(--app-line); border:1px solid var(--app-line);
  border-radius:10px; overflow:hidden;
}
.emp-decide .ed-cell{
  background:var(--app-card); padding:10px 14px;
  display:flex; flex-direction:column; gap:2px; position:relative;
}
.emp-decide .ed-l{ font-size:11.5px; color:var(--muted); font-weight:500; }
.emp-decide .ed-v{ font-size:18px; font-weight:700; color:var(--app-ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.emp-decide .ed-accent{ background:var(--green-soft); }
.emp-decide .ed-accent .ed-v{ color:var(--green); }
.emp-decide .ed-debt{ color:var(--debt); }
.emp-decide .ed-muted .ed-v{ color:var(--muted); font-weight:600; font-size:14px; }
.emp-decide .ed-fill{
  position:absolute; top:9px; right:10px;
  font-size:11px; font-weight:600; color:var(--green);
  background:#fff; border:1px solid var(--green-line); border-radius:6px;
  padding:2px 8px; cursor:pointer;
}
.emp-decide .ed-fill:hover{ background:var(--green); color:#fff; }
@media (max-width: 720px){ .emp-decide{ grid-template-columns:repeat(2,1fr); } }

/* ---- license renewal banner ---- */
.lic-banner{
  display:flex; align-items:center; gap:10px;
  padding:8px 16px; font-size:13.5px; font-weight:500;
  position:sticky; top:0; z-index:1040;
}
.lic-banner i{ font-size:16px; }
.lic-banner a{ margin-left:auto; font-weight:600; white-space:nowrap; text-decoration:none; }
.lic-banner.lic-grace{ background:var(--gold-soft); color:var(--gold-2); border-bottom:1px solid var(--gold-line); }
.lic-banner.lic-grace a{ color:var(--gold-2); }
.lic-banner.lic-expired, .lic-banner.lic-tampered, .lic-banner.lic-invalid{
  background:var(--debt-soft); color:var(--debt); border-bottom:1px solid var(--debt-line); }
.lic-banner.lic-expired a, .lic-banner.lic-tampered a, .lic-banner.lic-invalid a{ color:var(--debt); }

/* ---- license status page ---- */
.lic-badge{ display:inline-flex; align-items:center; gap:6px; padding:3px 12px;
  border-radius:999px; font-size:13px; font-weight:600; }
.lic-badge.s-valid{ background:var(--green-soft); color:var(--green); border:1px solid var(--green-line); }
.lic-badge.s-grace{ background:var(--gold-soft); color:var(--gold-2); border:1px solid var(--gold-line); }
.lic-badge.s-expired, .lic-badge.s-tampered, .lic-badge.s-invalid{ background:var(--debt-soft); color:var(--debt); border:1px solid var(--debt-line); }
.lic-badge.s-unlicensed{ background:var(--app-hover); color:var(--muted); border:1px solid var(--app-line); }
.lic-facts{ display:grid; grid-template-columns:auto 1fr; gap:6px 18px; font-size:14px; margin:4px 0; }
.lic-facts dt{ color:var(--muted); }
.lic-facts dd{ margin:0; font-weight:600; font-variant-numeric:tabular-nums; }

/* ---- renewal two-option chooser ---- */
.renew-opt{ padding:4px 0; }
.renew-opt .ro-head{ display:flex; align-items:center; gap:9px; margin-bottom:4px; }
.renew-opt .ro-n{ width:22px; height:22px; flex:none; border-radius:50%;
  background:var(--green-soft); color:var(--green); font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center; }
.renew-opt .ro-head h3{ font-size:15px; font-weight:600; margin:0; color:var(--app-ink); }
.renew-or{ display:flex; align-items:center; text-align:center; color:var(--muted);
  font-size:12px; margin:14px 0; }
.renew-or::before, .renew-or::after{ content:""; flex:1; border-top:1px solid var(--app-line); }
.renew-or span{ padding:0 12px; }
.lic-contact{ display:flex; flex-wrap:wrap; gap:10px 20px; margin:6px 0 2px; }
.lic-contact a{ display:inline-flex; align-items:center; gap:7px; font-weight:600;
  font-size:15px; color:var(--green); text-decoration:none; }
.lic-contact a:hover{ text-decoration:underline; }

@media print{
  .sidebar, .botop, .topstrip, .lic-banner{ display:none !important; }
  body{ background:#fff; }
}

/* ---------------- top bar: global search + account menu ---------------- */
.botop{ gap:14px; }
.topsearch{ position:relative; flex:1; max-width:520px; display:flex; align-items:center; }
.topsearch > .bi{ position:absolute; left:12px; color:var(--muted); font-size:14px; pointer-events:none; }
.topsearch input{ width:100%; padding:8px 12px 8px 34px; border:1px solid var(--app-line); border-radius:10px; background:#fff; font-size:14px; color:var(--app-ink); }
.topsearch input:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(27,87,57,.12); }
.ts-pop{ position:absolute; top:calc(100% + 6px); left:0; right:0; background:#fff; border:1px solid var(--app-line); border-radius:12px; box-shadow:var(--shadow); z-index:1100; max-height:60vh; overflow:hidden auto; }
.ts-item{ display:flex; flex-direction:column; gap:1px; padding:9px 13px; text-decoration:none; color:var(--app-ink); border-bottom:1px solid var(--app-line-soft); }
.ts-item:last-child{ border-bottom:0; }
.ts-item:hover{ background:var(--app-hover); }
.ts-nm{ font-weight:600; font-size:13.5px; }
.ts-meta{ font-size:11.5px; color:var(--muted); font-family:'IBM Plex Mono',monospace; }
.ts-empty{ padding:12px 13px; color:var(--muted); font-size:13px; font-style:italic; }
.ts-newsale .bi{ font-size:13px; }
.acct{ position:relative; }
.acct-btn{ display:flex; align-items:center; gap:8px; background:none; border:1px solid transparent; border-radius:10px; padding:5px 9px; cursor:pointer; color:var(--app-ink); }
.acct-btn:hover{ background:var(--app-hover); }
.acct-btn .av{ width:28px; height:28px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:600; flex:none; }
.acct-nm{ font-size:13.5px; font-weight:500; }
.acct-store{ font-size:12px; font-weight:600; color:var(--green); background:var(--app-hover); border-radius:999px; padding:2px 9px; display:inline-flex; align-items:center; gap:4px; }
.acct-store .bi{ font-size:11px; }
.acct-btn > .bi{ font-size:11px; color:var(--muted); }
.acct-pop{ position:absolute; top:calc(100% + 6px); right:0; min-width:222px; background:#fff; border:1px solid var(--app-line); border-radius:12px; box-shadow:var(--shadow); z-index:1100; padding:6px; }
.acct-hdr{ padding:9px 11px 10px; border-bottom:1px solid var(--app-line-soft); margin-bottom:5px; }
.acct-shop{ font-weight:600; font-size:14px; color:var(--app-ink); }
.acct-u{ font-size:11.5px; color:var(--muted); }
.acct-pop a, .acct-pop button{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:9px 11px; border-radius:8px; border:0; background:none; color:var(--app-ink); font-size:13.5px; text-decoration:none; cursor:pointer; }
.acct-pop a:hover, .acct-pop button:hover{ background:var(--app-hover); }
.acct-pop .bi{ font-size:14px; color:var(--muted); width:16px; text-align:center; }

/* ======================================================= MOBILE SHELL
   Phone breakpoint (≤767.98px = Bootstrap md boundary): the sidebar
   becomes an off-canvas drawer behind a hamburger in the top bar.
   Everything in this section is inert at ≥768px — desktop unchanged. */
.bo-hamburger{
  display:none; align-items:center; justify-content:center;
  width:38px; height:38px; flex:none;
  background:none; border:0; border-radius:9px;
  color:var(--app-ink); font-size:22px; cursor:pointer;
}
.bo-hamburger:hover{ background:var(--app-hover); }
.bo-backdrop{ position:fixed; inset:0; background:rgba(19,33,27,.45); z-index:1045; }
@media (min-width: 768px){ .bo-backdrop{ display:none !important; } }

@media (max-width: 767.98px){
  .bo-hamburger{ display:flex; }
  .sidebar{
    position:fixed; left:0; top:0; bottom:0; height:100dvh;
    width:min(84vw, 300px);
    transform:translateX(-100%);
    transition:transform .18s ease;
    z-index:1050;
  }
  .sidebar.open{ transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,.35); }
  /* The desktop icon-rail state is meaningless in a drawer: neutralize it
     (JS also strips .rail on phones — this is the CSS backstop). */
  .sidebar.rail{ width:min(84vw, 300px); }
  .sidebar.rail .wm, .sidebar.rail .sb-glabel, .sidebar.rail .sb-item .lbl,
  .sidebar.rail .sb-user .uw{ display:revert; }
  .sidebar.rail .sb-item{ justify-content:flex-start; padding:7px 9px; }
  .sidebar.rail .sb-head{ flex-direction:row; padding-left:14px; }
  .sidebar.rail .sb-ghead{ pointer-events:auto; }
  .sidebar .sb-toggle{ display:none; }   /* rail toggle is desktop-only */
  .botop{ padding:0 10px; gap:8px; }
  .botop .crumb{ display:none; }         /* hamburger + search need the room */
}

/* ---------------------------------------------- MOBILE CONTENT (≤767.98px) */
@media (max-width: 767.98px){
  .bo-main > main{ padding:12px !important; }
  /* iOS zooms any focused input under 16px — hold the line at 16. */
  .form-control, .form-select{ font-size:16px; }
  .topsearch input{ font-size:16px; }
  /* Cards flush to the edge feel roomier on a 375px screen. */
  .card{ border-radius:10px; }
}
/* Touch targets on any coarse-pointer device (phone AND tablet). */
@media (pointer: coarse){
  .btn-sm{ padding:.45rem .7rem; }
  .sidebar .sb-item{ padding:10px 9px; }
  .acct-pop a, .acct-pop button{ padding:11px 11px; }
}

/* ------------------------------------------------------- POS ON TABLETS
   The POS grid (col-lg-7 / col-lg-5) already stacks below 992px: portrait
   tablets get item entry above payment. These rules only make the stacked
   layout comfortable to touch. Phones are served by /m/, not /pos. */
@media (pointer: coarse) and (max-width: 1199.98px){
  /* 44px, the same touch target the till uses everywhere else — 38 was below
     it, and logout/language are the controls a phone user reaches for most on
     the chrome-free strip. Fits inside --topbar-h (50px). */
  .topstrip .btn, .topstrip .ts-seg button{ min-height:44px; }
  /* Cart quantity/price/discount inputs need finger-sized hit areas. */
  main table.table input.form-control-sm,
  main table.table .btn-sm{ min-height:40px; font-size:15px; }
  .pos-remain{ padding:12px 14px; font-size:16px; }
  .pos-confirm{ padding:12px; font-size:14px; }
  .pos-confirm input{ width:20px; height:20px; }
}

/* Sidebar logo is now a link home (click Pultrack → dashboard). */
.sb-head .sb-brand{ display:flex; align-items:center; gap:8px; text-decoration:none; color:inherit; flex:1; min-width:0; }

/* Item editor — public menu photo management. */
.menu-photo-editor{
  display:grid; grid-template-columns:minmax(180px,260px) minmax(0,1fr);
  gap:20px; align-items:start;
}
.menu-photo-preview{
  position:relative; width:100%; aspect-ratio:1; overflow:hidden; border-radius:12px;
  border:1px solid var(--app-line); background:linear-gradient(145deg,var(--green-soft),var(--app-hover));
  color:var(--muted);
}
.menu-photo-preview img{ display:block; width:100%; height:100%; object-fit:cover; }
.menu-photo-preview.is-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:20px; }
.menu-photo-preview.is-empty i{ color:var(--green); font-size:32px; opacity:.62; }
.menu-photo-preview.is-empty span{ font-size:13px; }
.menu-photo-controls{ min-width:0; }
.menu-photo-controls .form-control,
.menu-photo-controls .form-select{ flex:1 1 260px; min-width:0; }
.menu-photo-controls .btn{ flex:none; min-height:40px; }

@media (max-width: 767.98px){
  .menu-photo-editor{ grid-template-columns:1fr; gap:16px; }
  .menu-photo-preview{ width:min(260px,100%); }
}

@media (max-width: 480px){
  .menu-photo-controls .d-flex .btn{ width:100%; }
}

/* ============================================================================
   F&B Till — full-screen touch ordering (/fnb/till). All interactive targets
   here are >=44px per the touch-target rule; this screen is meant to be run
   on a tablet, finger-first, no keyboard/mouse assumed.
   ============================================================================ */
.till-checks-row{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; align-items:stretch;
}
.till-check-card{
  flex:0 0 auto; min-width:140px; min-height:64px; text-align:left;
  background:var(--app-card); border:1px solid var(--app-line); border-radius:10px;
  padding:8px 12px; cursor:pointer; display:flex; flex-direction:column; gap:2px;
}
.till-check-card:hover{ background:var(--app-hover); }
.till-check-card.active{ border-color:var(--green); background:var(--green-soft); }
.till-check-card .tcc-label{ font-weight:700; color:var(--app-ink); }
.till-check-card .tcc-meta{ font-size:12px; color:var(--muted); }
.till-new-check-btn{
  flex:0 0 auto; min-width:96px; min-height:64px; border-radius:10px;
  border:1px dashed var(--app-line); background:transparent; color:var(--green);
  font-weight:600; font-size:14px;
}
.till-new-check-btn:hover{ background:var(--app-hover); }

.till-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.till-tab{
  min-height:44px; padding:0 16px; border-radius:22px; border:1px solid var(--app-line);
  background:var(--app-card); color:var(--app-ink); font-weight:600; font-size:14px;
}
.till-tab.active{ background:var(--green); color:#fff; border-color:var(--green); }

.till-menu-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(142px, 1fr));
  gap:10px;
}
.till-tile{
  /* padding-bottom is taller than the other sides on purpose: it reserves
     a fixed gutter for the absolutely-positioned .tt-avail badge below, so
     .tt-name/.tt-price (the only in-flow children) sit at the same offset
     whether or not a tile carries a badge. */
  position:relative; min-height:80px; border-radius:12px; border:1px solid var(--app-line);
  background:var(--app-card); padding:8px 8px 24px; text-align:left; display:grid;
  grid-template-columns:48px minmax(0,1fr); align-items:center; gap:8px;
}
.till-tile:active{ background:var(--app-hover); }
.till-tile .tt-media{
  position:relative; width:48px; height:48px; align-self:center; overflow:hidden;
  border-radius:9px; background:linear-gradient(145deg,var(--green-soft),var(--app-hover));
}
.till-tile .tt-media img{ position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:cover; }
.till-tile .tt-media-fallback{ position:absolute; inset:0; display:grid; place-items:center; color:var(--green); font-size:20px; opacity:.58; }
.till-tile .tt-media.missing img{ display:none; }
.till-tile .tt-copy{ min-width:0; display:flex; flex-direction:column; gap:4px; padding-inline-end:20px; }
.till-tile .tt-name{ display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-weight:600; font-size:14px; color:var(--app-ink); line-height:1.2; }
.till-tile .tt-price{ font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.till-tile .tt-gear{
  position:absolute; top:4px; right:4px; width:32px; height:32px; min-height:32px;
  border-radius:50%; border:none; background:transparent; color:var(--muted); font-size:15px;
}
.till-tile .tt-gear:active{ background:var(--app-hover); }
/* Out of flow, exactly like .tt-gear above: an in-flow badge would change
   .till-tile's child count (2 vs 3) and shift .tt-price, since .till-tile
   uses justify-content:space-between over a min-height taller than its
   content. Anchoring to the bottom instead keeps .tt-name/.tt-price fixed
   regardless of whether a badge is present. */
.till-tile .tt-avail{
  position:absolute; inset-inline-start:64px; inset-inline-end:8px; bottom:6px;
  font-size:11px; line-height:1.2; color:var(--muted);
}
.till-tile .tt-avail-out{ color:var(--bs-danger); font-weight:600; }

.till-cart-panel{ display:flex; flex-direction:column; height:100%; }
.till-cart-list{ flex:1; overflow-y:auto; max-height:52vh; }
.till-cart-line{
  display:flex; justify-content:space-between; align-items:flex-start; gap:8px;
  padding:10px 4px; border-bottom:1px solid var(--app-line-soft); min-height:44px;
  cursor:pointer;
}
.till-cart-line.voided{ opacity:.45; text-decoration:line-through; }
.till-cart-line .tcl-name{ font-weight:600; font-size:14.5px; }
.till-cart-line .tcl-mods{ font-size:12px; color:var(--muted); }
.till-cart-empty{ color:var(--muted); text-align:center; padding:32px 8px; }
.till-pay-btn{
  min-height:56px; font-size:20px; font-weight:700; border-radius:12px;
}
.till-toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--app-ink); color:#fff; padding:12px 18px; border-radius:10px;
  display:flex; align-items:center; gap:12px; z-index:2000; min-height:44px;
  box-shadow:var(--shadow);
}
.till-toast button{ min-height:36px; }
.till-error-banner{ position:sticky; top:0; z-index:1500; }

.guest-order-queue{
  border:1px solid var(--gold-line); background:var(--gold-soft);
  border-radius:12px; padding:10px 12px;
}
.goq-health{
  display:flex; align-items:center; gap:8px; margin-bottom:10px;
  border-color:var(--gold-line); background:var(--gold-soft); color:var(--app-ink);
}
.goq-health[hidden]{ display:none; }
.goq-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.goq-cards{ display:grid; gap:8px; }
.goq-card{
  display:flex; align-items:center; gap:12px; justify-content:space-between;
  background:var(--app-card); border:1px solid var(--gold-line); border-radius:10px;
  padding:10px 12px;
}
.goq-main{ min-width:0; }
.goq-name{ font-weight:700; }
.goq-meta,.goq-address{ color:var(--muted); font-size:12.5px; overflow-wrap:anywhere; }
.goq-map-link{display:inline-flex;align-items:center;gap:5px;margin-top:5px;color:var(--green);font-size:12px;font-weight:700;text-decoration:none}
.goq-stage{display:inline-flex;vertical-align:middle;margin-inline-start:6px;border-radius:999px;background:var(--green-soft);color:var(--green);padding:3px 7px;font-size:10px;text-transform:capitalize}
.goq-actions{ display:flex; gap:6px; flex:none; }
.till-guest-summary{
  display:flex; flex-direction:column; gap:2px; padding:9px 10px; margin-bottom:10px;
  border-radius:9px; background:var(--green-soft); border:1px solid var(--green-line);
  font-size:13px;
}

@media (max-width: 620px){
  .goq-card{ align-items:flex-start; flex-direction:column; }
  .goq-actions{ width:100%; justify-content:flex-end; }
}

@media (pointer: coarse){
  .till-tile{ min-height:84px; }
  .till-tab{ min-height:48px; }
  .till-check-card, .till-new-check-btn{ min-height:72px; }
}

/* ===== F&B floor plan =====================================================
   Positions are PERCENTAGES of a fixed 16:10 canvas, so a layout arranged on
   a laptop lands identically on the counter tablet. The canvas letterboxes
   inside its container rather than stretching, or the room would distort. */
.floor-wrap{ display:flex; gap:14px; align-items:flex-start; }
.floor-main{ flex:1; min-width:0; }

.floor-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.floor-tab{
  border:1px solid var(--app-line); background:var(--app-card); color:var(--app-ink);
  border-radius:999px; padding:8px 16px; min-height:44px; font-weight:600;
  cursor:pointer;
}
.floor-tab.active{ background:var(--green); border-color:var(--green); color:#fff; }

/* The room pans inside its own scroller rather than shrinking to fit. Tables
   are a fixed finger-size (they must stay tappable), so a canvas that
   collapsed to phone width made them overlap and clip each other. The page
   body itself never scrolls sideways. */
/* max-width is what makes overflow-x actually engage — without it the wrapper
   sizes to its 560px child and widens the PAGE instead of scrolling itself. */
.floor-canvas-wrap{ overflow-x:auto; overflow-y:hidden; max-width:100%; }
/* No tables yet: drop the minimum so the empty-state message fits a phone
   without panning. There is nothing to pan to. */
.floor-canvas.is-empty{ min-width:0; }
.floor-canvas{
  position:relative; width:100%; min-width:560px; aspect-ratio:16/10;
  background:var(--app-card); border:1px solid var(--app-line);
  border-radius:14px; overflow:hidden;
}

.floor-table{
  position:absolute; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:2px solid var(--app-line); background:var(--app-hover);
  color:var(--app-ink); border-radius:12px;
  cursor:grab; user-select:none; -webkit-user-select:none;
  /* Only the TABLE owns its pointer, so a drag is never stolen by the browser
     as a scroll. Empty floor stays pannable, which is how you reach the rest
     of the room on a phone. */
  touch-action:none;
  font-weight:700; line-height:1.15; text-align:center; padding:4px;
  overflow:hidden;              /* backstop: nothing escapes the tile outline */
}
.floor-table.round{ border-radius:50%; }
.floor-table.s-sm{ width:72px;  height:72px;  font-size:15px; }  /* 64 ellipsised a 4-figure total */
.floor-table.s-md{ width:84px;  height:84px;  font-size:17px; }
.floor-table.s-lg{ width:104px; height:104px; font-size:19px; }
/* Each meta line stays on ONE line. A wrapped "0 min" spilled outside the
   84px tile before this; a four-figure total would have broken the 104px one. */
.floor-table .ft-meta{
  font-size:10px; font-weight:500; color:var(--muted);
  white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
.floor-table .ft-label{ line-height:1.1; }
.floor-table-edit-mark{
  display:none; position:absolute; top:5px; inset-inline-end:6px;
  width:21px; height:21px; place-items:center; border-radius:50%;
  background:var(--gold); color:#fff; font-size:10px;
  box-shadow:0 2px 7px rgba(77,52,10,.24);
}
.floor-canvas.is-managing .floor-table{
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(194,138,44,.16);
  cursor:pointer;
}
.floor-canvas.is-managing .floor-table-edit-mark{ display:grid; }

.floor-table.occupied{
  background:var(--green-soft); border-color:var(--green); color:var(--green-2);
}
.floor-table.occupied .ft-meta{ color:var(--green-2); }
.floor-table.reserved{ background:#fff6dc; border-color:#d6a334; color:#6f5010; }
.floor-table.reserved .ft-meta{ color:#805d16; }
.floor-table.dragging{ cursor:grabbing; box-shadow:var(--shadow); z-index:5; opacity:.92; }
.floor-table:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }

.floor-rail{ width:190px; flex:0 0 190px; display:flex; flex-direction:column; gap:8px; }
.floor-rail-title{ font-size:12px; font-weight:700; color:var(--muted);
                   text-transform:uppercase; letter-spacing:.04em; }
.floor-empty{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px; color:var(--muted);
}

/* ===== Day close summary ==================================================
   Operational figures are cards rather than loose inline numbers: the scan
   path is label -> amount, while count and amount retain the existing “n · x”
   notation used by the Z-report workflow. */
.day-summary-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;
}
.day-summary-card{
  --day-accent:var(--green); --day-soft:var(--green-soft);
  position:relative; min-width:0; overflow:hidden;
  padding:14px 16px 15px; border:1px solid var(--app-line-soft);
  border-radius:13px; background:var(--app-card);
  box-shadow:0 1px 2px rgba(20,30,24,.04),0 6px 18px rgba(20,30,24,.045);
}
.day-summary-card::before{
  content:""; position:absolute; inset:0 0 auto; height:3px;
  background:var(--day-accent);
}
.day-summary-head{
  display:flex; align-items:center; gap:8px; color:var(--muted);
  font-size:12px; font-weight:650; letter-spacing:.02em;
}
.day-summary-icon{
  width:28px; height:28px; flex:0 0 28px; display:grid; place-items:center;
  border-radius:9px; background:var(--day-soft); color:var(--day-accent);
  font-size:14px;
}
.day-summary-value{
  display:flex; align-items:baseline; gap:6px; min-width:0; margin-top:10px;
  font-variant-numeric:tabular-nums;
}
.day-summary-value strong{
  min-width:0; font-size:clamp(18px,2vw,24px); line-height:1;
  letter-spacing:-.025em; white-space:nowrap;
}
.day-summary-value span{
  color:var(--muted); font-size:11px; font-weight:600; white-space:nowrap;
}
.day-summary-tips{ --day-accent:var(--gold-2); --day-soft:var(--gold-soft); }
.day-summary-voids,.day-summary-refunds{
  --day-accent:var(--debt); --day-soft:var(--debt-soft);
}

@media (max-width: 900px){
  .day-summary-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 430px){
  .day-summary-grid{ gap:8px; }
  .day-summary-card{ padding:12px; }
  .day-summary-value strong{ font-size:17px; }
}

@media (max-width: 900px){
  .floor-wrap{ flex-direction:column; }
  /* Stacked, the horizontal axis is the CROSS axis, where min-width:0 does not
     let a flex item shrink below its content — so .floor-main sized itself to
     the canvas's 560px minimum and dragged the page wide with it. An explicit
     width resolves against .floor-wrap instead, and the canvas overflows into
     its own scroller as intended. */
  .floor-main{ width:100%; }
  .floor-rail{ width:100%; flex:1 1 auto; flex-direction:row; flex-wrap:wrap; }
}
.sb-head .sb-brand .wm{ white-space:nowrap; overflow:hidden; }

/* ========================================================================
   Menu Studio — one Pultrack-native surface for Guest and Till presentation.
   Controls stay as normal forms; JavaScript only previews a selected image.
   ======================================================================== */
.ms-shell,.ms-form-shell{
  width:min(100%,1480px); margin:0 auto; color:var(--app-ink);
}
.ms-eyebrow{
  margin:0 0 5px; color:var(--gold-2); font-family:'IBM Plex Mono',monospace;
  font-size:10.5px; line-height:1.3; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase;
}
.ms-page-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  margin-bottom:22px;
}
.ms-page-copy h1,.ms-form-head h1{
  margin:0; font-size:clamp(25px,3vw,36px); line-height:1.08; font-weight:700;
  letter-spacing:-.035em;
}
.ms-page-copy > p:last-child,.ms-form-head > p:last-child{
  max-width:690px; margin:8px 0 0; color:var(--muted); font-size:14px;
}
.ms-head-actions{ display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.ms-head-actions .btn:not(.btn-link){ min-height:44px; display:inline-flex; align-items:center; gap:7px; }
.ms-live-link{ display:inline-flex; align-items:center; gap:6px; font-weight:600; text-decoration:none; }

.ms-stock-picker,.ms-category-create,.ms-manage-category,.ms-item-menu{ position:relative; }
.ms-stock-picker > summary,.ms-category-create > summary,
.ms-manage-category > summary,.ms-item-menu > summary{
  list-style:none; cursor:pointer; user-select:none;
}
.ms-stock-picker > summary::-webkit-details-marker,
.ms-category-create > summary::-webkit-details-marker,
.ms-manage-category > summary::-webkit-details-marker,
.ms-item-menu > summary::-webkit-details-marker{ display:none; }
.ms-stock-picker[open] > summary,.ms-category-create[open] > summary,
.ms-manage-category[open] > summary{
  border-color:var(--green); background:var(--green-soft); color:var(--green-2);
}
.ms-stock-popover,.ms-manage-popover{
  position:absolute; z-index:1010; top:calc(100% + 8px); right:0;
  width:min(380px,calc(100vw - 32px)); padding:14px;
  border:1px solid var(--app-line); border-radius:14px; background:#fff;
  box-shadow:0 18px 54px rgba(20,30,24,.16);
}
.ms-stock-popover > strong{ display:block; font-size:14px; margin-bottom:3px; }
.ms-stock-popover > p{ color:var(--muted); font-size:12.5px; line-height:1.45; margin:0 0 10px; }
.ms-stock-list{ display:flex; flex-direction:column; gap:5px; max-height:360px; overflow:auto; }
.ms-stock-list > a{
  min-height:54px; display:grid; grid-template-columns:minmax(0,1fr) auto 16px;
  align-items:center; gap:10px; padding:8px 9px; border-radius:9px;
  text-decoration:none; color:var(--app-ink);
}
.ms-stock-list > a:hover{ background:var(--app-hover); }
.ms-stock-list > a span:first-child{ display:flex; flex-direction:column; min-width:0; }
.ms-stock-list b{ font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ms-stock-list small{ color:var(--muted); font-size:11.5px; }
.ms-stock-price{ color:var(--green); font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ms-stock-empty{ display:flex; align-items:center; gap:8px; padding:14px 8px; color:var(--muted); font-size:13px; }
.ms-stock-empty i{ color:var(--green); }

.ms-category-panel{
  margin-bottom:24px; padding:16px; border:1px solid var(--app-line);
  border-radius:15px; background:var(--app-card); box-shadow:var(--shadow);
}
.ms-section-head,.ms-category-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
}
.ms-section-head h2,.ms-category-head h2{
  margin:0; font-size:18px; font-weight:700; letter-spacing:-.015em;
}
.ms-inline-form{
  position:absolute; z-index:1010; top:calc(100% + 8px); right:0;
  width:min(390px,calc(100vw - 32px)); padding:14px;
  border:1px solid var(--app-line); border-radius:13px; background:#fff;
  box-shadow:0 18px 54px rgba(20,30,24,.16);
}
.ms-inline-form label,.ms-category-edit-form label{
  display:block; margin-bottom:5px; color:var(--muted); font-size:12px; font-weight:600;
}
.ms-inline-form > div,.ms-category-edit-form > div{ display:flex; gap:7px; }
.ms-inline-form .btn,.ms-category-edit-form .btn{ min-height:44px; flex:none; }
.ms-inline-translations{
  margin-top:10px; padding-top:10px; border-top:1px solid var(--app-line-soft);
}
.ms-inline-translations summary{
  color:var(--green); cursor:pointer; font-size:12.5px; font-weight:700;
}
.ms-inline-translations p{
  margin:7px 0 10px; color:var(--muted); font-size:11.5px; line-height:1.4;
}
.ms-inline-translations input{ margin-bottom:9px; }
.ms-category-rail{
  display:flex; gap:8px; margin-top:13px; padding:2px 0 4px; overflow-x:auto;
  scrollbar-width:thin; scroll-snap-type:x proximity;
}
.ms-category-rail a{
  min-height:44px; flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
  padding:8px 13px; border:1px solid var(--green-line); border-radius:999px;
  background:var(--green-soft); color:var(--green-2); text-decoration:none;
  font-size:13px; font-weight:600; scroll-snap-align:start;
}
.ms-category-rail a:hover{ border-color:var(--green); background:#dcebe1; }
.ms-category-rail small{
  min-width:20px; height:20px; display:grid; place-items:center; padding:0 5px;
  border-radius:999px; background:#fff; color:var(--green); font-size:10.5px;
  font-variant-numeric:tabular-nums;
}
.ms-category-sections{ display:flex; flex-direction:column; gap:26px; }
.ms-category-section{ scroll-margin-top:calc(var(--topbar-h) + 16px); }
.ms-category-head{ align-items:center; margin-bottom:11px; padding:0 2px; }
.ms-category-head h2{ font-size:21px; }
.ms-category-head p{ margin:3px 0 0; color:var(--muted); font-size:12.5px; }
.ms-manage-category > summary{ min-height:44px; display:inline-flex; align-items:center; gap:7px; }
.ms-manage-popover{ width:min(420px,calc(100vw - 32px)); }
.ms-category-edit-form{ padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--app-line-soft); }
.ms-order-row{ display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:0 0 9px; }
.ms-order-row form{ min-width:0; }
.ms-order-row .btn{
  width:100%; min-height:44px; display:flex; align-items:center; justify-content:center; gap:7px;
}

.ms-item-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,285px),1fr)); gap:13px;
}
.ms-item-card{
  min-width:0; display:flex; flex-direction:column; overflow:visible;
  border:1px solid var(--app-line); border-radius:15px; background:#fff;
  box-shadow:0 1px 2px rgba(20,30,24,.04),0 6px 22px rgba(20,30,24,.055);
  transition:transform .16s ease-out,box-shadow .16s ease-out,border-color .16s ease-out;
}
.ms-item-card:hover{ transform:translateY(-2px); border-color:var(--green-line); box-shadow:var(--shadow); }
.ms-item-media{
  position:relative; display:block; aspect-ratio:16/9; overflow:hidden;
  border-radius:14px 14px 0 0; background:linear-gradient(145deg,#dcebe1,#f1eee5);
}
.ms-item-media img{
  position:relative; z-index:1; width:100%; height:100%; display:block;
  object-fit:cover; transition:transform .28s ease-out;
}
.ms-item-card:hover .ms-item-media img{ transform:scale(1.025); }
.ms-item-fallback,.ms-photo-fallback{
  position:absolute; inset:0; display:grid; place-items:center; color:var(--green);
  font-size:38px; opacity:.45;
}
.ms-item-media.is-empty img{ display:none; }
.ms-item-price{
  position:absolute; z-index:2; right:10px; bottom:9px; padding:5px 9px;
  border:1px solid rgba(255,255,255,.68); border-radius:999px;
  background:rgba(16,58,38,.88); color:#fff; backdrop-filter:blur(8px);
  font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums;
}
.ms-item-body{ flex:1; display:flex; flex-direction:column; padding:13px 13px 10px; }
.ms-item-title-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.ms-item-title-row > div{ min-width:0; }
.ms-item-title-row code{ display:block; margin-bottom:3px; font-size:10.5px; color:var(--muted); }
.ms-item-title-row h3{ margin:0; font-size:17px; line-height:1.2; letter-spacing:-.015em; }
.ms-item-title-row h3 a{ color:var(--app-ink); text-decoration:none; }
.ms-item-title-row h3 a:hover{ color:var(--green); }
.ms-icon-button{
  width:44px; height:44px; display:grid; place-items:center; border-radius:10px;
  color:var(--muted); cursor:pointer;
}
.ms-icon-button:hover{ background:var(--app-hover); color:var(--app-ink); }
.ms-item-popover{
  position:absolute; z-index:20; top:42px; right:0; width:230px; padding:7px;
  border:1px solid var(--app-line); border-radius:12px; background:#fff; box-shadow:var(--shadow);
}
.ms-item-popover > a{
  min-height:44px; display:flex; align-items:center; gap:9px; padding:8px 9px;
  border-radius:8px; color:var(--app-ink); text-decoration:none;
  font-size:13.5px; font-weight:600;
}
.ms-item-popover > a:hover{ background:var(--app-hover); }
.ms-item-popover .ms-order-row{ margin:5px 0 7px; }
.ms-item-popover .ms-order-row span{ display:none; }
.ms-item-description{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; min-height:34px; margin:8px 0 2px; color:var(--muted);
  font-size:12.5px; line-height:1.4;
}
.ms-channel-badges,.ms-health-row{ display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.ms-channel-badges > span,.ms-health-row > span{
  display:inline-flex; align-items:center; gap:4px; min-height:25px; padding:3px 7px;
  border:1px solid var(--app-line); border-radius:999px; background:var(--app-hover);
  color:var(--muted); font-size:10.5px; font-weight:600;
}
.ms-channel-badges > span.is-visible,.ms-health-row > span.is-ready{
  border-color:var(--green-line); background:var(--green-soft); color:var(--green);
}
.ms-channel-badges > span.is-hidden,.ms-health-row > span.is-missing{
  color:#847b6c; background:#f7f5ef;
}
.ms-health-row{ margin-top:auto; padding-top:9px; }
.ms-health-row > span{ border:0; background:transparent; padding-inline:0 6px; }
.ms-health-row > span.is-ready,.ms-health-row > span.is-missing{ border:0; background:transparent; }
.ms-visibility-form{
  min-height:48px; display:flex; align-items:center; gap:9px; padding:7px 11px;
  border-top:1px solid var(--app-line-soft); background:#fcfbf8; border-radius:0 0 15px 15px;
}
.ms-visibility-form > span:first-child{
  color:var(--muted); font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
}
.ms-visibility-form .btn{ min-height:36px; margin-left:auto; }
.ms-switch{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; cursor:pointer; }
.ms-switch input{ position:absolute; opacity:0; pointer-events:none; }
.ms-switch > span{
  position:relative; width:30px; height:18px; flex:none; border-radius:999px;
  background:#c9c5ba; transition:background .15s ease-out;
}
.ms-switch > span::after{
  content:""; position:absolute; top:3px; left:3px; width:12px; height:12px;
  border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2);
  transition:transform .15s ease-out;
}
.ms-switch input:checked + span{ background:var(--green); }
.ms-switch input:checked + span::after{ transform:translateX(12px); }
.ms-switch input:focus-visible + span{ outline:3px solid rgba(27,87,57,.25); outline-offset:2px; }
.ms-empty{
  min-height:122px; display:flex; align-items:center; justify-content:center; gap:12px;
  padding:20px; border:1px dashed var(--app-line); border-radius:13px;
  color:var(--muted); text-align:left;
}
.ms-empty > i{ font-size:25px; color:var(--green); opacity:.65; }
.ms-empty strong{ color:var(--app-ink); font-size:13.5px; }
.ms-items-empty div{ display:flex; flex-direction:column; gap:2px; }
.ms-items-empty span{ font-size:12px; }
.ms-category-empty{ margin-top:12px; }

/* Item creation / editing. */
.ms-form-head{ margin:2px 0 20px; }
.ms-item-form{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(270px,360px);
  gap:16px; align-items:start;
}
.ms-item-form-main{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.ms-form-card{ overflow:hidden; }
.ms-form-card .card-header{ padding:14px 16px; }
.ms-form-card .card-header h2,.ms-photo-card .card-header h2{
  margin:0; font-size:15px; font-weight:700;
}
.ms-form-card .card-header p{
  margin:3px 0 0; color:var(--muted); font-size:12px; font-weight:400;
}
.ms-form-card .card-body{ padding:16px; }
.ms-form-card .form-text{ color:var(--muted); font-size:11.5px; }
.ms-translation-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;
}
.ms-translation-locale{
  min-width:0; margin:0; padding:12px; border:1px solid var(--app-line);
  border-radius:12px; background:var(--app-hover);
}
.ms-translation-locale legend{
  display:flex; align-items:center; gap:7px; width:auto; margin:0 0 10px;
  color:var(--text); font-size:13px; font-weight:700;
}
.ms-translation-locale legend span{
  min-width:28px; padding:3px 5px; border-radius:7px; background:#fff;
  color:var(--green); text-align:center; font-size:10px; letter-spacing:.06em;
}
.ms-translation-locale .form-label{ margin-top:8px; font-size:11.5px; }
.ms-translation-locale .form-label:first-of-type{ margin-top:0; }
.ms-publication-options{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ms-publication-option{
  position:relative; min-height:70px; display:grid;
  grid-template-columns:40px minmax(0,1fr) 24px; align-items:center; gap:10px;
  padding:11px; border:1px solid var(--app-line); border-radius:12px;
  background:#fff; cursor:pointer;
}
.ms-publication-option:hover{ border-color:var(--green-line); background:var(--app-hover); }
.ms-publication-option > input{ position:absolute; opacity:0; pointer-events:none; }
.ms-publication-option:has(input:checked){ border-color:var(--green); background:var(--green-soft); }
.ms-publication-option:has(input:focus-visible){ outline:3px solid rgba(27,87,57,.24); outline-offset:2px; }
.ms-publication-icon,.ms-advanced-icon{
  width:40px; height:40px; display:grid; place-items:center; border-radius:10px;
  background:var(--app-hover); color:var(--green); font-size:18px;
}
.ms-publication-option:has(input:checked) .ms-publication-icon{ background:#fff; }
.ms-publication-option > span:nth-of-type(2){ display:flex; flex-direction:column; min-width:0; }
.ms-publication-option strong{ font-size:13.5px; }
.ms-publication-option small{ color:var(--muted); font-size:11.5px; }
.ms-checkmark{
  width:22px; height:22px; display:grid; place-items:center; border:1px solid var(--app-line);
  border-radius:50%; color:transparent; background:#fff; font-size:13px;
}
.ms-publication-option input:checked ~ .ms-checkmark{
  border-color:var(--green); background:var(--green); color:#fff;
}
.ms-advanced-links{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.ms-advanced-links > a{
  min-height:66px; display:grid; grid-template-columns:40px minmax(0,1fr) 16px;
  align-items:center; gap:10px; padding:10px; border:1px solid var(--app-line);
  border-radius:11px; color:var(--app-ink); text-decoration:none;
}
.ms-advanced-links > a:hover{ border-color:var(--green-line); background:var(--app-hover); }
.ms-advanced-links > a > span:nth-child(2){ display:flex; flex-direction:column; }
.ms-advanced-links strong{ font-size:13px; }
.ms-advanced-links small{ color:var(--muted); font-size:11.5px; }
.ms-advanced-links > a > .bi{ color:var(--muted); font-size:12px; }
.ms-photo-card{
  position:sticky; top:calc(var(--topbar-h) + 14px); overflow:hidden;
}
.ms-photo-card .card-body{ padding:14px; }
.ms-photo-preview{
  position:relative; width:100%; aspect-ratio:1; overflow:hidden; margin-bottom:12px;
  border:1px solid var(--app-line); border-radius:13px;
  background:linear-gradient(145deg,var(--green-soft),var(--app-hover));
}
.ms-photo-preview img{
  position:relative; z-index:1; width:100%; height:100%; display:block; object-fit:cover;
}
.ms-photo-preview.is-empty img{ display:none; }
.ms-photo-card .card-body > p{
  margin:0 0 11px; color:var(--muted); font-size:12px; line-height:1.45;
}
.ms-photo-library{
  margin:0 0 11px; border:1px solid var(--app-line); border-radius:11px;
  background:var(--app-hover); overflow:hidden;
}
.ms-photo-library > summary{
  min-height:44px; display:flex; align-items:center; gap:8px; padding:9px 11px;
  color:var(--green); font-size:12.5px; font-weight:700; cursor:pointer;
  list-style:none;
}
.ms-photo-library > summary::-webkit-details-marker{ display:none; }
.ms-photo-library > summary::after{
  content:"\F282"; margin-left:auto; font-family:"bootstrap-icons";
  font-size:11px; transition:transform .16s ease;
}
.ms-photo-library[open] > summary::after{ transform:rotate(180deg); }
.ms-photo-library-body{
  padding:0 11px 11px; border-top:1px solid var(--app-line);
}
.ms-photo-library-body > p{
  margin:10px 0; color:var(--muted); font-size:11.5px; line-height:1.45;
}
.ms-photo-library-body .form-label{ font-size:11.5px; }
.ms-photo-picker{
  width:100%; min-height:44px; display:flex; align-items:center;
  justify-content:center; gap:8px; cursor:pointer;
}
.ms-photo-filename{
  display:block; min-height:18px; margin-top:6px; color:var(--muted);
  font-size:11.5px; overflow-wrap:anywhere;
}
.ms-remove-photo{
  min-height:44px; display:flex; align-items:center; gap:8px;
  margin-top:8px; color:var(--debt); font-size:12.5px; cursor:pointer;
}
.ms-remove-photo input{ margin:0; }
.ms-form-actions{
  grid-column:1/-1; position:sticky; bottom:0; z-index:15;
  display:flex; align-items:center; gap:7px; padding:11px 13px;
  border:1px solid var(--app-line); border-radius:13px;
  background:rgba(255,255,255,.94); box-shadow:0 -8px 30px rgba(20,30,24,.08);
  backdrop-filter:blur(10px);
}
.ms-form-actions .btn-primary{
  min-height:46px; display:inline-flex; align-items:center; gap:7px;
}

.ms-shell :is(a,button,summary,input,select,textarea):focus-visible,
.ms-form-shell :is(a,button,summary,input,select,textarea):focus-visible{
  outline:3px solid rgba(27,87,57,.28); outline-offset:2px;
}

@media (max-width:991.98px){
  .ms-page-head{ flex-direction:column; }
  .ms-head-actions{ justify-content:flex-start; }
  .ms-item-form{ grid-template-columns:minmax(0,1fr) minmax(240px,310px); }
}
@media (max-width:767.98px){
  .ms-page-head{ gap:14px; margin-bottom:17px; flex-direction:column; }
  .ms-head-actions{ width:100%; display:grid; grid-template-columns:1fr 1fr; }
  .ms-head-actions > .btn:not(.btn-link),.ms-head-actions > details > summary{
    width:100%; justify-content:center;
  }
  .ms-head-actions .ms-live-link{ grid-column:1/-1; justify-content:center; }
  .ms-stock-picker{ min-width:0; }
  .ms-stock-popover{ left:0; right:auto; }
  .ms-category-panel{ padding:13px; }
  .ms-section-head{ align-items:center; }
  .ms-category-create > summary{ min-height:44px; }
  .ms-category-create > summary .bi{ margin-right:3px; }
  .ms-category-head{ align-items:center; }
  .ms-manage-category > summary span{ display:none; }
  .ms-item-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .ms-item-card:hover{ transform:none; }
  .ms-item-media{ aspect-ratio:1; }
  .ms-item-body{ padding:10px 10px 8px; }
  .ms-item-title-row h3{ font-size:14px; }
  .ms-item-title-row code{ font-size:9.5px; }
  .ms-item-description{ min-height:0; font-size:11.5px; }
  .ms-channel-badges > span{ font-size:9.5px; }
  .ms-health-row{ display:none; }
  .ms-visibility-form{ align-items:flex-start; flex-wrap:wrap; }
  .ms-visibility-form > span:first-child{ width:100%; }
  .ms-visibility-form .btn{ flex:1 1 100%; width:100%; margin-left:0; }
  .ms-item-form{ grid-template-columns:1fr; }
  .ms-photo-card{ position:static; grid-row:1; }
  .ms-photo-card .card-body{
    display:grid; grid-template-columns:minmax(120px,180px) minmax(0,1fr);
    gap:0 13px; align-items:start;
  }
  .ms-photo-preview{ grid-row:1/6; margin:0; }
  .ms-photo-card .card-body > p,.ms-photo-library,.ms-photo-picker,.ms-photo-filename,.ms-remove-photo{ grid-column:2; }
  .ms-publication-options,.ms-advanced-links{ grid-template-columns:1fr; }
  .ms-translation-grid{ grid-template-columns:1fr; }
  .ms-form-actions{ margin-inline:-1px; }
}
@media (max-width:480px){
  .ms-head-actions{ grid-template-columns:1fr; }
  .ms-head-actions .ms-live-link{ grid-column:auto; }
  .ms-section-head{ align-items:flex-start; }
  .ms-inline-form,.ms-manage-popover,.ms-item-popover{
    position:fixed; z-index:1060; top:auto; left:12px; right:12px;
    bottom:12px; width:auto;
  }
  .ms-item-grid{ grid-template-columns:1fr; }
  .ms-item-media{ aspect-ratio:16/9; }
  .ms-health-row{ display:flex; }
  .ms-photo-card .card-body{ display:block; }
  .ms-photo-preview{ width:min(220px,100%); margin-bottom:12px; }
  .ms-form-actions{ display:grid; grid-template-columns:1fr; }
  .ms-form-actions .btn{ width:100%; justify-content:center; }
}
@media (pointer:coarse){
  .ms-category-rail a,.ms-stock-list > a,.ms-item-popover > a,
  .ms-advanced-links > a{ min-height:44px; }
  .ms-switch{ min-height:36px; }
}
@media (prefers-reduced-motion:reduce){
  .ms-item-card,.ms-item-media img,.ms-switch > span,.ms-switch > span::after{
    transition:none !important;
  }
  .ms-item-card:hover,.ms-item-card:hover .ms-item-media img{ transform:none; }
}