/* ============================================================
   AmbrosiaTracker — global styles
   Tokens inherited from POS visual system: plain, boring, correct.
   ============================================================ */

:root {
  --bg:         #FAFAF9;
  --surface:    #FFFFFF;
  --surface-2:  #F4F4F5;
  --surface-3:  #E9E9EB;
  --border:     #E4E4E7;
  --border-strong: #D4D4D8;
  --text:       #18181B;
  --text-muted: #71717A;
  --text-soft:  #A1A1AA;
  --accent:     #16A34A;
  --accent-700: #15803D;
  --accent-bg:  #DCFCE7;
  --info:       #2563EB;
  --info-bg:    #DBEAFE;
  --danger:     #DC2626;
  --danger-bg:  #FEE2E2;
  --warn:       #F59E0B;
  --warn-bg:    #FEF3C7;
  /* Readable amber TEXT on --warn-bg. (This used to be defined as
     `var(--warn-strong)` — a self-reference, so it resolved to nothing and
     every amber label in LIGHT mode silently inherited its parent colour.
     Dark mode overrides it further down and was unaffected.) */
  --warn-strong: #B45309;
  --disabled:   #D4D4D8;
  --grid-dot:   #D4D4D8;
  --ph-a:       #F4F4F5;
  --ph-b:       #FAFAF9;
  --ph-c:       #EDEDF0;
  --ph-d:       #F8F8FA;
  --accent-hover: #15A049;
  --undo-hover: #F0FDF4;
  --ink-hover:  #000;
  --scrim:      rgba(0,0,0,0.5);
  --scrim-soft: rgba(0,0,0,0.4);
  --shadow-card: 0 4px 12px rgba(0,0,0,0.04);
  --shadow-modal: 0 10px 30px rgba(0,0,0,0.15);
  --shadow-detail: 0 12px 40px rgba(0,0,0,0.25);
  --hint-fade:  rgba(255,255,255,0);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input, textarea { font: inherit; color: inherit; }

.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }
.ucase { text-transform: uppercase; letter-spacing: 0.05em; }

/* ============================================================
   App shell
   ============================================================ */

.app {
  display: grid;
  /* 240px, not 220: Armenian and Russian screen names run ~25% longer than the
     English ones and were being ellipsised in the rail. */
  grid-template-columns: 240px 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas: "nav top" "nav main";
  height: 100vh;
  min-height: 100vh;
}

/* ----- top bar ----- */
.topbar {
  grid-area: top;
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
/* Account menu (the top-right pill + dropdown that holds logout) */
.topbar .account-menu { position: relative; }
.topbar .account-menu .acct { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.topbar .account-menu .acct .name { font-size: 14px; font-weight: 600; }
.topbar .account-menu .acct .kind {
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-muted);
}
.topbar .account-menu #accountButton.non-admin {
  border-color: var(--warn); background: var(--warn-bg);
}
.topbar .account-menu #accountButton.non-admin .avatar { background: var(--warn); color: var(--warn-strong); }
.topbar .account-menu #accountButton.non-admin .acct .kind { color: var(--warn-strong); }

.account-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  z-index: 120;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 10px;
  box-shadow: var(--shadow-modal);
  padding: 6px;
}
.account-dropdown[hidden] { display: none; }
.account-dropdown .ad-head {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px 6px;
}
.account-dropdown .ad-name { font-size: 14px; font-weight: 700; }
.account-dropdown .ad-sub { font-size: 11px; color: var(--text-muted); }
.account-dropdown .ad-staff {
  padding: 6px 10px;
  font-size: 12px; color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.account-dropdown .ad-logout {
  display: flex; align-items: center; gap: 8px;
  width: 100%; height: 38px; padding: 0 10px; margin-top: 4px;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--text);
  font-size: 13px; font-weight: 600; text-align: left;
}
.account-dropdown .ad-logout:hover { background: var(--danger-bg); color: var(--danger); }
.account-dropdown .ad-logout svg { flex: 0 0 auto; }
/* A subtle frame while acting as a restricted (non-admin) device */
body.non-admin-device .app { box-shadow: inset 0 0 0 2px var(--warn); }

/* ----- Notification bell (provider announcements) ----- */
.topbar .bell-menu { position: relative; }
.bell-toggle { position: relative; }
.bell-badge {
  position: absolute; top: -4px; right: -6px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px;
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
}
.bell-badge[hidden] { display: none; }
.bell-dropdown {
  position: absolute; top: calc(100% + 6px); right: -60px;
  z-index: 120;
  width: 340px; max-height: 62vh;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 10px;
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}
.bell-dropdown[hidden] { display: none; }
.bd-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.bd-title { font-size: 13px; font-weight: 700; }
.bd-markall { font-size: 11px; font-weight: 700; color: var(--accent); }
.bd-markall:hover { text-decoration: underline; }
.bd-list { overflow-y: auto; padding: 4px; }
.bd-empty { padding: 22px 12px; text-align: center; font-size: 12px; color: var(--text-muted); }
.bd-item {
  display: flex; gap: 10px; align-items: flex-start;
  width: 100%; padding: 9px 10px;
  border-radius: 8px; text-align: left;
}
.bd-item:hover { background: var(--surface-2); }
.bd-item .bd-dot {
  flex: 0 0 auto;
  width: 8px; height: 8px; margin-top: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.bd-item.kind-warning .bd-dot { background: var(--warn); }
.bd-item.kind-billing .bd-dot { background: var(--danger); }
.bd-item.is-read .bd-dot { background: var(--border-strong); }
.bd-item.is-read .bd-content { opacity: 0.65; }
.bd-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bd-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.bd-private {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--warn-bg); color: var(--warn-strong);
  font-size: 9px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
}
.bd-body { font-size: 12px; color: var(--text-muted); white-space: pre-line; }
.bd-time { font-size: 10px; color: var(--text-muted); }

/* ----- Payment escalation (unpaid invoice, 3 levels) -----
   1 topbar pill · 2 pill (red) + breathing click-through veil · 3 hard red
   lock. The server refuses mutations at level 3 — the lock is the honest UI.
   The pill lives in the topbar free space (#billingBarMount), not floating
   over screen content. */
.billing-bar-mount { display: flex; align-items: center; min-width: 0; }
.billing-bar-mount:empty { display: none; }
.billing-pill {
  display: flex; align-items: center; gap: 8px;
  min-width: 0; max-width: 520px; padding: 7px 14px 7px 8px;
  border: 1px solid var(--warn); border-radius: 999px;
  background: var(--warn-bg); color: var(--warn-strong);
  font-size: 12.5px; font-weight: 600;
}
.billing-pill .bp-ic {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--warn); color: #fff;
  font-size: 12px; font-weight: 800; line-height: 18px; text-align: center;
}
.billing-pill .bp-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.billing-pill:hover { filter: brightness(1.03); }
.billing-pill.level-2 {
  border-color: var(--danger);
  background: var(--danger-bg); color: var(--danger);
  animation: billing-pill-pulse 2.6s ease-in-out infinite;
}
.billing-pill.level-2 .bp-ic { background: var(--danger); }
@keyframes billing-pill-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 60, 60, 0); }
  50% { box-shadow: 0 0 0 4px rgba(220, 60, 60, 0.25); }
}

/* "Not saving" badge — Postgres is unreachable and the app is serving from
   memory. Same yellow language as the billing pill; click opens the why. */
.db-badge-mount { position: relative; display: flex; align-items: center; }
.db-badge-mount:empty { display: none; }
.db-badge {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 7px;
  border: 1px solid var(--warn); border-radius: 999px;
  background: var(--warn-bg); color: var(--warn-strong);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.db-badge:hover { filter: brightness(1.03); }
.db-badge .dbb-ic {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--warn); color: #fff;
  font-size: 11.5px; font-weight: 800; line-height: 17px; text-align: center;
}
.db-badge-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: min(320px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); color: var(--text);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  font-size: 12.5px; white-space: normal;
}
.db-badge-pop strong { display: block; margin-bottom: 5px; color: var(--warn-strong); }
.db-badge-pop p { margin: 0; color: var(--muted); line-height: 1.5; }
/* Narrow screens: the topbar has no free space — keep just the icon dot. */
@media (max-width: 720px) {
  .billing-pill { padding: 6px; }
  .billing-pill .bp-text { display: none; }
}
.billing-veil {
  position: fixed; inset: 0;
  z-index: 320;
  pointer-events: none; /* level 2 warns, it never blocks */
  box-shadow: inset 0 0 0 3px var(--danger), inset 0 0 120px rgba(220, 60, 60, 0.22);
  animation: billing-breathe 2.6s ease-in-out infinite;
}
@keyframes billing-breathe {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
.billing-lock {
  position: fixed; inset: 0;
  z-index: 2000; /* above EVERYTHING — welcome screen, modals, the PIN keypad */
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(140, 20, 20, 0.4);
  backdrop-filter: blur(3px);
}
/* The red pulse lives on a pseudo-layer so the card itself stays steady. */
.billing-lock::before {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 4px var(--danger), inset 0 0 160px rgba(220, 40, 40, 0.5);
  animation: billing-breathe 3.2s ease-in-out infinite;
}
body.billing-locked { overflow: hidden; }
.billing-lock .bl-card {
  position: relative;
  max-width: 460px; padding: 28px 30px;
  border: 2px solid var(--danger); border-radius: 14px;
  background: var(--surface);
  text-align: center;
  box-shadow: var(--shadow-modal);
}
.billing-lock .bl-badge {
  width: 44px; height: 44px; margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--danger); color: #fff;
  font-size: 26px; font-weight: 800; line-height: 44px;
}
.billing-lock h2 { margin: 0 0 8px; font-size: 20px; color: var(--danger); }
.billing-lock p { margin: 0 0 10px; font-size: 13.5px; color: var(--text); }
.billing-lock .bl-contact { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }

/* Welcome / account picker (shown on logout) */
#welcomeMount:empty { display: none; }
.welcome-screen {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  background: var(--bg);
  background-image: radial-gradient(circle, var(--grid-dot) 1px, transparent 1px);
  background-size: 22px 22px;
}
.welcome-screen .welcome-inner {
  width: 100%; max-width: 720px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.welcome-screen .welcome-logo { border-radius: 12px; }
.welcome-screen h1 { margin: 14px 0 2px; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.welcome-screen .welcome-sub { margin: 0 0 24px; color: var(--text-muted); font-size: 14px; }
.welcome-screen .account-grid {
  width: 100%;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px;
}

/* B2B gates: device activation / suspended-account lock (pre-state views). */
.welcome-screen .gate-inner { max-width: 400px; }
.gate-form {
  width: 100%;
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface);
  text-align: left;
}
.gate-form label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
}
.gate-form input {
  padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg); color: var(--text);
  font-size: 14px;
}
.gate-form input:focus { outline: none; border-color: var(--accent); }
.gate-form .btn { justify-content: center; padding: 11px 14px; font-size: 14px; }
.gate-error { margin: 0; color: var(--danger); font-size: 13px; }

/* Settings → Business account */
.business-rows { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.business-rows .row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 0; border-bottom: 1px dashed var(--border);
  font-size: 13px;
}
.business-rows .row span { color: var(--text-muted); }
.business-deactivate { display: flex; gap: 8px; margin-top: 12px; max-width: 420px; }
.business-deactivate input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg); color: var(--text);
}
.account-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 14px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text);
  position: relative;
  transition: border-color 80ms linear, box-shadow 80ms linear, transform 80ms linear;
}
.account-card:hover { border-color: var(--border-strong); box-shadow: 0 6px 18px rgba(0,0,0,0.06); transform: translateY(-2px); }
.account-card .ac-square {
  width: 64px; height: 64px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text-muted);
  border: 1px solid var(--border);
}
.account-card.admin .ac-square { background: var(--accent-bg); color: var(--accent-700); border-color: var(--accent); }
.account-card .ac-name { font-size: 15px; font-weight: 600; }
.account-card .ac-type { font-size: 11px; color: var(--text-muted); }
.account-card.current { border-color: var(--accent); }
.account-card .ac-current {
  position: absolute; top: 8px; right: 8px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent-700); background: var(--accent-bg);
  padding: 2px 6px; border-radius: 999px;
}

.account-card .ac-lock {
  position: absolute; top: 8px; right: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}

/* Online-order confirmation — a slide-in queue (bottom-right) that expands to a
   full-screen Accept/Reject. Device-targeted; shows on any screen. */
.confq {
  position: fixed; right: 16px; bottom: 16px; z-index: 1150;
  width: min(320px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 8px;
  animation: confq-in 0.22s ease-out;
}
@keyframes confq-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.confq-title { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; gap: 6px; padding-left: 2px; }
.confq-card {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; border: 1px solid var(--border); border-left: 4px solid var(--accent, #16a34a);
  border-radius: 12px; background: var(--surface); color: var(--text);
  box-shadow: 0 12px 28px rgba(0,0,0,0.16); cursor: pointer; text-align: left;
}
.confq-card:hover { border-color: var(--border-strong); }
.confq-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-700); background: var(--accent-bg); border-radius: 999px; padding: 2px 8px; flex: 0 0 auto; }
:root[data-theme="dark"] .confq-badge { color: var(--accent); }
.confq-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.confq-num { font-weight: 700; font-size: 14px; }
.confq-meta { font-size: 12px; color: var(--text-muted); }
.confq-go { color: var(--text-muted); flex: 0 0 auto; }

.confm-scrim {
  position: fixed; inset: 0; z-index: 1250;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(15, 18, 22, 0.55); backdrop-filter: blur(3px);
}
.confm {
  width: 100%; max-width: 460px; max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 18px; padding: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.3); animation: confq-in 0.16s ease-out;
}
.confm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.confm-head h2 { margin: 4px 0 0; font-size: 22px; }
.confm-badge { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent-700); }
:root[data-theme="dark"] .confm-badge { color: var(--accent); }
.confm-x { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); color: var(--text-muted); cursor: pointer; flex: 0 0 auto; }
.confm-x:hover { color: var(--text); }
.confm-cust { margin: 14px 0; padding: 10px 12px; background: var(--surface-2); border-radius: 10px; display: flex; flex-direction: column; gap: 6px; }
.confm-cust .cc-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.confm-cust .cc-row a { color: var(--accent-700); text-decoration: none; }
:root[data-theme="dark"] .confm-cust .cc-row a { color: var(--accent); }
.confm-lines { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.confm-line { display: flex; align-items: baseline; gap: 10px; font-size: 14px; }
.confm-line .cl-q { color: var(--text-muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.confm-line .cl-n { flex: 1; }
.confm-line .cl-opts { display: block; font-size: 12px; color: var(--text-muted); }
.confm-line .cl-p { font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.confm-tot { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.confm-tot .ct-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-muted); }
.confm-tot .ct-total { font-size: 17px; font-weight: 800; color: var(--text); }
.confm-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 18px; }
.confm-actions .btn { justify-content: center; height: 52px; font-size: 16px; font-weight: 700; border-radius: 12px; }
.confm-actions .confm-reject { color: var(--danger); border-color: var(--border); background: var(--surface); }
.confm-actions .confm-reject:hover { background: var(--danger-bg); border-color: var(--danger); }
@media (max-width: 480px) { .confq { left: 12px; right: 12px; width: auto; } }

/* Staff PIN keypad — overlays the picker / app when a protected name is tapped */
.pin-overlay {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(15, 18, 22, 0.55);
  backdrop-filter: blur(3px);
}
.pin-pad {
  position: relative;
  width: 100%; max-width: 320px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 18px;
  padding: 26px 22px 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
  text-align: center;
}
.pin-pad.pp-error { animation: pp-shake 0.32s ease; }
@keyframes pp-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}
.pin-pad .pp-close {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); color: var(--text-muted); cursor: pointer;
}
.pin-pad .pp-close:hover { color: var(--text); border-color: var(--border-strong); }
.pin-pad .pp-name { font-size: 18px; font-weight: 700; margin: 0 0 2px; }
.pin-pad .pp-sub { font-size: 12px; color: var(--text-muted); margin: 0 0 16px; min-height: 16px; }
.pin-pad.pp-error .pp-sub { color: var(--danger, #d64545); }
.pin-pad .pp-dots {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-bottom: 20px; min-height: 14px;
}
.pin-pad .pp-dot {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: transparent; transition: background 80ms linear, border-color 80ms linear;
}
.pin-pad .pp-dot.on { background: var(--accent-700, var(--text)); border-color: var(--accent-700, var(--text)); }
.pin-pad .pp-keys {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 16px;
}
.pin-pad .pp-key {
  height: 58px;
  font-size: 22px; font-weight: 600;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-2); color: var(--text); cursor: pointer;
  transition: background 60ms linear, transform 60ms linear;
}
.pin-pad .pp-key:hover { background: var(--surface); border-color: var(--border-strong); }
.pin-pad .pp-key:active { transform: scale(0.96); }
.pin-pad .pp-key-fn { font-size: 15px; font-weight: 500; color: var(--text-muted); }
.pin-pad .pp-ok { width: 100%; justify-content: center; }
.pin-pad .pp-ok[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Locked screen (device has no access to this screen) */
.locked-screen {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 40px; text-align: center;
  background: var(--bg);
}
.locked-screen .lock-badge {
  width: 88px; height: 88px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text-soft);
  border: 1px solid var(--border);
}
.locked-screen h2 { margin: 4px 0 0; font-size: 22px; }
.locked-screen p { margin: 0; color: var(--text-muted); max-width: 420px; }
.locked-screen .btn { margin-top: 6px; }
.cfg .details .det-section-foot { margin-top: 10px; }
.cfg .details .det-section-foot .btn { width: 100%; justify-content: center; }
.topbar .screen-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
}
.topbar .crumbs {
  font-size: 13px;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 8px;
}
.topbar .crumbs .sep { color: var(--text-soft); }
.topbar .spacer { flex: 1 1 auto; }
.topbar .clock {
  font-family: var(--mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  min-width: 56px;
  text-align: right;
}
.topbar .staff-pill {
  display: inline-flex; align-items: center; gap: 10px;
  height: 36px; padding: 0 10px 0 4px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface);
}
.topbar .staff-pill:hover { background: var(--surface-2); }
.topbar .staff-pill .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--text); color: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.topbar .staff-pill .name { font-size: 14px; font-weight: 500; }
.topbar .signin {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--text); background: var(--text); color: var(--surface);
  border-radius: 6px;
  font-size: 14px; font-weight: 500;
}
.topbar .signin:hover { background: var(--ink-hover); }

/* ----- left nav ----- */
.nav {
  grid-area: nav;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* ----- collapsible left rail (desktop; phones keep the tab bar + drawer) -----
   Collapsed, the rail leaves the grid and parks off-canvas, so the content
   takes the full width. Sliding the pointer to the left edge peeks it back as
   an overlay (no layout shift); the pin in its header locks it open again. */
@media (min-width: 721px) {
  .desktop-only { display: inline-flex; }
  body.nav-collapsed .app { grid-template-columns: 0 1fr; }
  /* Collapsed, the rail simply rides the grid's 0-width column (it already has
     overflow:hidden), so it needs no offset trickery to disappear. Only while
     PEEKING does it leave the grid and float over the content. */
  body.nav-collapsed .nav { width: 0; min-width: 0; border-right: 0; }
  body.nav-collapsed.nav-peek .nav {
    position: fixed; top: 0; bottom: 0; left: 0; width: 240px; z-index: 60;
    border-right: 1px solid var(--border);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22);
  }
  #navPeekZone { position: fixed; top: 0; left: 0; bottom: 0; width: 12px; z-index: 59; }
  body:not(.nav-collapsed) #navPeekZone { display: none; }
  /* The pin only makes sense while the rail is peeking. */
  .nav-pin { margin-left: auto; border: 0; background: none; padding: 4px; border-radius: 6px; color: var(--text-muted); cursor: pointer; display: none; }
  .nav-pin:hover { background: var(--surface-3); color: var(--text); }
  body.nav-collapsed.nav-peek .nav-pin { display: inline-flex; }
  body.nav-collapsed .nav-toggle { color: var(--accent-700); }
}
@media (max-width: 720px) {
  /* The rail is already replaced by the tab bar/drawer on phones. */
  .desktop-only { display: none !important; }
  #navPeekZone { display: none; }
}
.nav .brand {
  height: 56px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.nav .brand .logo {
  width: 24px; height: 24px;
  border-radius: 5px;
  display: block;
  object-fit: contain;
  flex: 0 0 auto;
}
.nav .brand .name {
  font-size: 14px; font-weight: 600;
  letter-spacing: 0;
}
.nav .location {
  display: flex; flex-direction: column;
  padding: 12px 16px;
  border: 0; text-align: left;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  gap: 4px;
}
.nav .location:hover { background: var(--surface-3); }
.nav .location .lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--text-muted); text-transform: uppercase;
}
.nav .location .name-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.nav .location .name { font-size: 15px; font-weight: 600; color: var(--text); }
.nav .location .chev { color: var(--text-muted); }
.nav .location .sub {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-muted);
}
.nav .location .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.nav .location .dot.inactive { background: var(--text-soft); }

/* The module list scrolls on its own once the plan has more screens than fit
   (brand/location above and the foot below stay pinned). min-height:0 is what
   actually lets it shrink — without it the flex item keeps its content height
   and the overflow:hidden on .nav silently clips the last modules. */
.nav .menu-wrap { position: relative; display: flex; flex: 1 1 auto; min-height: 0; }
/* Nothing else signals that the list scrolls — the scrollbar is thin and only
   appears on hover on some platforms — so fade the last row out and bounce a
   chevron while there is more below. Mirrors the Cook detail scroll hint. */
.nav .menu-fade {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 44px;
  pointer-events: none;
  display: none;
  align-items: flex-end; justify-content: center;
  padding-bottom: 3px;
  background: linear-gradient(to bottom, var(--hint-fade) 0%, var(--surface-2) 78%);
  color: var(--text-soft);
}
.nav .menu-fade .chev { display: inline-block; font-size: 14px; line-height: 1; animation: scrollHintBounce 1.2s ease-in-out infinite; }
.nav .menu-wrap[data-overflow="true"][data-at-bottom="false"] .menu-fade { display: flex; }
@media (prefers-reduced-motion: reduce) {
  .nav .menu-fade .chev { animation: none; }
}
.nav .menu {
  display: flex; flex-direction: column;
  padding: 8px 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.nav .menu::-webkit-scrollbar { width: 8px; }
.nav .menu::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 4px;
  border: 2px solid transparent; background-clip: content-box;
}
.nav .menu::-webkit-scrollbar-thumb:hover { background: var(--text-soft); background-clip: content-box; }
.nav .menu .item { flex: 0 0 auto; }
.nav .brand, .nav .location, .nav .nav-foot { flex: 0 0 auto; }
.nav .menu .item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  height: 44px; padding: 0 16px 0 20px;
  border: 0;
  background: transparent;
  font-size: 14px; font-weight: 500; color: var(--text);
  text-align: left;
}
.nav .menu .item:hover { background: var(--surface-3); }
.nav .menu .item[aria-current="true"] {
  background: var(--surface);
  font-weight: 600;
}
.nav .menu .item[aria-current="true"]::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--accent);
}
.nav .menu .item .ico {
  /* Screens without a glyph fall back to a two-letter code ("OH", "WH"); at the
     inherited 14px those clipped the 18px box, so the box is a little wider and
     the text a little smaller. font-size only affects the text fallback —
     inline SVG icons are sized by their own width/height attributes. */
  width: 20px; height: 18px;
  font-size: 11px; font-weight: 700; letter-spacing: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  flex: 0 0 auto;
}
.nav .menu .item[aria-current="true"] .ico { color: var(--text); }

.nav .nav-foot {
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  font-size: 11px; color: var(--text-soft);
}

/* ============================================================
   Main area
   ============================================================ */
.main { grid-area: main; min-height: 0; overflow: hidden; position: relative; }

/* Reusable vertical-scroll container. The main area clips overflow, so each
   screen owns its scrolling. Any screen whose content is a single growing
   column can opt in by wrapping its markup in scrollArea() (screens/index.js)
   — i.e. class="scroll-area". Screens that own their layout (canvas, split
   panes with their own internal scroll) simply do not use it, so it is never
   enforced where it is not wanted. */
.scroll-area { height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden; }

/* ============================================================
   Buttons (shared)
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  white-space: nowrap;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  font-size: 13px; font-weight: 500; color: var(--text);
}
.btn:hover { background: var(--surface-2); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn.primary {
  background: var(--text); color: var(--surface);
  border-color: var(--text);
}
.btn.primary:hover { background: var(--ink-hover); }
.btn.danger {
  color: var(--danger);
}
.btn.danger:hover { background: var(--danger-bg); border-color: var(--danger-bg); }
.btn:disabled { color: var(--text-soft); background: var(--surface); cursor: not-allowed; }

.iconbtn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  color: var(--text-muted);
}
.iconbtn:hover { background: var(--surface-2); color: var(--text); }

/* ============================================================
   Screen 1: System Configurator
   ============================================================ */
.cfg {
  display: grid;
  grid-template-columns: 1fr 320px;
  height: 100%;
  min-height: 0;
}

.cfg .canvas-wrap {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
  display: flex; flex-direction: column;
}
.cfg .canvas {
  position: absolute;
  top: 0; left: 0;
  /* Starting size only. canvas-kit grows the inline width/height to cover the
     nodes, so a box dragged past the edge keeps its dotted ground and its
     wires; min-* keeps this the floor so the world never shrinks below it. */
  width: 1800px;
  height: 1100px;
  min-width: 1800px;
  min-height: 1100px;
  transform-origin: 0 0;
  will-change: transform;
  background:
    radial-gradient(circle, var(--grid-dot) 1px, transparent 1px) 0 0 / 24px 24px;
}

.cfg .canvas-toolbar {
  height: 48px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
  /* visible (not overflow-x:auto) so the Add dropdown can escape the bar */
  overflow: visible;
}
.cfg .canvas-toolbar .btn { flex: 0 0 auto; }
.cfg .canvas-toolbar .group {
  display: flex; align-items: center; gap: 6px;
}
.cfg .canvas-toolbar .group .group-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-soft); padding-right: 2px;
}

/* Add dropdown (replaces the row of create buttons) */
.cfg .canvas-toolbar .cfg-add { position: relative; }
.cfg-add-toggle { display: inline-flex; align-items: center; gap: 6px; }
.cfg-add-caret { font-size: 11px; opacity: 0.7; line-height: 1; }
.cfg-add-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 70;
  display: none; flex-direction: column; gap: 2px;
  min-width: 210px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}
.cfg-add.open .cfg-add-menu { display: flex; }
.cfg-add-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 9px 10px;
  border: 0; border-radius: 7px; background: none;
  font: inherit; font-size: 13px; color: var(--text);
  text-align: left; cursor: pointer;
}
.cfg-add-item:hover { background: var(--surface-2); }
.cfg-add-item svg { color: var(--text-muted); flex: 0 0 auto; }
.cfg .canvas-toolbar .spacer { flex: 1 1 auto; }
.cfg .canvas-toolbar .toolbar-hint {
  font-size: 12px; color: var(--text-muted); white-space: nowrap;
  flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis;
}
.cfg .canvas-toolbar .toolbar-hint b { color: var(--text); font-weight: 600; }
.cfg .canvas-toolbar .dirty {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--warn);
}
.cfg .canvas-toolbar .dirty .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--warn);
}

.cfg .canvas-scroll {
  flex: 1 1 auto;
  overflow: hidden;
  position: relative;
  cursor: grab;
}
.cfg .canvas-scroll.panning { cursor: grabbing; }
.cfg .zoom-readout {
  position: absolute;
  right: 12px; bottom: 12px;
  display: flex; align-items: center; gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  z-index: 4;
  font-size: 12px;
  font-family: var(--mono);
  color: var(--text-muted);
}
.cfg .zoom-readout button {
  height: 24px;
  padding: 0 8px;
  border-radius: 4px;
  color: var(--text-muted);
}
.cfg .zoom-readout button:hover { background: var(--surface-2); color: var(--text); }
.cfg .zoom-readout .pct { padding: 0 6px; min-width: 44px; text-align: center; color: var(--text); }
/* Wires sit UNDER the boxes — the standard node-graph layering. Endpoints land
   exactly on a border, so a box cleanly caps every wire that reaches it and
   nothing is ever drawn across the box content. (It used to be the other way
   round, with a surface-coloured halo behind each wire, which painted a band
   over whatever box the line crossed and rubbed out other wires at crossings.)
   overflow is explicit: an outermost <svg> clips to its box by UA default. */
.cfg svg.lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.cfg .node { z-index: 2; }
/* A 2px stroke is a miserable click target, and now that boxes cover part of
   each wire there is less of it to aim at — so a fat transparent twin takes the
   clicks and the visible stroke opts out. Hover is read off the group so both
   paths light the same wire. */
.cfg svg.lines path.conn-hit {
  stroke: transparent; stroke-width: 14; fill: none;
  pointer-events: stroke; cursor: pointer;
}
.cfg svg.lines path.conn { stroke: var(--text-muted); stroke-width: 2; fill: none; pointer-events: none; }
/* Receipt-machine links. Same violet hue ties both to the printer; solid = the
   one real host device it's plugged into, dashed = devices that merely route
   their receipts to it. (hover/selected rules below still override the colour.) */
.cfg svg.lines path.conn.printer-physical { stroke: #7c5cff; stroke-width: 2.5; }
.cfg svg.lines path.conn.printer-virtual { stroke: #7c5cff; stroke-width: 1.75; stroke-dasharray: 5 4; opacity: 0.8; }
.cfg svg.lines g:hover path.conn { stroke: var(--text); stroke-width: 2.5; }
/* matched through `g` so a selected wire still reads as selected under hover */
.cfg svg.lines g path.conn.selected { stroke: var(--accent); stroke-width: 3; }
.cfg svg.lines path.conn.dragging { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 4; }
.cfg svg.lines path.conn.synthetic { stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 3 5; cursor: default; pointer-events: none; opacity: 0.7; }

/* Configurator nodes */
.node {
  position: absolute;
  width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  user-select: none;
  cursor: pointer;
  transition: border-color 80ms linear, background-color 80ms linear;
}
.node:hover:not([data-selected="true"]):not([data-conn-target="true"]) {
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.node.dragging { cursor: grabbing; }
.node[data-selected="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.node[data-conn-target="true"] {
  border-style: dashed;
  border-color: var(--info);
}
.node .node-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px 8px 12px;
  border-bottom: 1px solid var(--border);
}
.node .type-chip {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-family: var(--mono);
}
.node .status {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px;
}
.node .status.active   { background: var(--accent-bg); color: var(--accent-700); }
.node .status.inactive { background: var(--surface-2); color: var(--text-muted); }
.node .node-body { padding: 8px 12px 12px; }
.node .node-name {
  font-size: 14px; font-weight: 600; color: var(--text);
  margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
.node .stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px 8px;
}
.node .stats.two { grid-template-columns: 1fr 1fr; }
.node .stats.one { grid-template-columns: 1fr; }
.node .stat .v {
  font-size: 14px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.node .stat .k {
  font-size: 10px; font-weight: 500; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.node .warn-flag {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 8px;
  font-size: 11px; color: var(--warn);
  font-weight: 500;
}
.node .warn-flag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }
.node .meta {
  margin-top: 6px;
  font-size: 11px; color: var(--text-muted);
}

/* Details panel */
.cfg .details {
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  min-height: 0;
}
.cfg .details .det-head {
  height: 48px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
}
.cfg .details .det-head .label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.cfg .details .det-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%;
  color: var(--text-muted);
  gap: 8px; padding: 32px;
  text-align: center;
}
.cfg .details .det-empty .t1 { font-size: 14px; font-weight: 500; color: var(--text); }
.cfg .details .det-empty .t2 { font-size: 12px; color: var(--text-muted); }
.cfg .details .det-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.cfg .details .det-section {
  margin-bottom: 20px;
}
.cfg .details .det-section h4 {
  margin: 0 0 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.cfg .details .field {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 10px;
}
.cfg .details .field label {
  font-size: 11px; color: var(--text-muted);
}
.cfg .details .field input,
.cfg .details .field select {
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 10px;
  background: var(--surface);
}
.cfg .details .field input:focus,
.cfg .details .field select:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}
.cfg .details .toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  height: 32px;
}
.cfg .details .attach-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.cfg .details .attach-list .row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.cfg .details .attach-list .row:last-child { border-bottom: 0; }
.cfg .details .attach-list .row .meta {
  font-size: 11px; color: var(--text-muted);
  font-family: var(--mono);
}
.cfg .details .attach-list .row .rm {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted); border-radius: 4px;
}
.cfg .details .attach-list .row .rm:hover { color: var(--danger); background: var(--danger-bg); }
.cfg .details .attach-empty {
  font-size: 12px; color: var(--text-muted);
  padding: 8px 10px;
  border: 1px dashed var(--border);
  border-radius: 6px;
}
.cfg .details .scope-note {
  margin: 8px 2px 0; font-size: 12px; color: var(--text-muted);
}
/* Connect-mode highlight on the panel link button */
.cfg .details .det-head .iconbtn.active {
  background: var(--accent-bg); color: var(--accent-700); border-color: var(--accent);
}
.cfg .details .warn-list .row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  font-size: 12px;
  background: var(--warn-bg);
  border-radius: 6px;
  color: var(--warn-strong);
  margin-bottom: 6px;
}
.cfg .details .warn-list .row .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }

.cfg .details .det-foot {
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  display: flex; gap: 8px; justify-content: flex-end;
}

.cfg .toggle {
  position: relative;
  width: 32px; height: 18px;
  border-radius: 999px;
  background: var(--border-strong);
  border: 0; padding: 0;
  transition: background 80ms linear;
  flex: 0 0 auto;
}
.cfg .toggle::after {
  content: ""; position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: var(--surface);
  border-radius: 50%;
  transition: left 80ms linear;
}
.cfg .toggle[data-on="true"] { background: var(--accent); }
.cfg .toggle[data-on="true"]::after { left: 16px; }

.cfg .connect-prompt {
  position: absolute; top: 64px; left: 50%; transform: translateX(-50%);
  background: var(--info-bg); color: var(--info);
  border: 1px solid var(--info);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px; font-weight: 500;
  z-index: 5;
  display: flex; align-items: center; gap: 10px;
}
.cfg .connect-prompt button {
  font-size: 12px; color: var(--info);
  border-bottom: 1px solid var(--info);
}

/* ---- ՀԴՄ fiscal terminals ------------------------------------------------
   A ՀԴՄ node reports live health rather than configuration, so its head chip
   is a four-tone pill instead of the active/inactive pair the other node types
   use. `idle` is the honest colour for "we have not asked the device yet". */
.node .status.fx-ok   { background: var(--accent-bg); color: var(--accent-700); }
.node .status.fx-warn { background: var(--warn-bg);   color: var(--warn-strong); }
.node .status.fx-bad  { background: var(--danger-bg); color: var(--danger); }
.node .status.fx-idle { background: var(--surface-2); color: var(--text-muted); }

/* Fiscal links are DERIVED from the terminal record (deviceIds/brandIds), not
   real graph edges, so they are drawn like the synthetic anchor lines — never
   clickable — but tinted so it is obvious what they mean. A terminal with no
   scope fans out to every till, drawn fainter to read as "all of them". */
.cfg svg.lines path.conn.synthetic.fiscal {
  stroke: var(--warn); stroke-dasharray: 6 4; opacity: 0.35; stroke-width: 1.5;
}
.cfg svg.lines path.conn.synthetic.fiscal.fiscal-scoped { opacity: 0.85; stroke-width: 2; stroke-dasharray: none; }

/* Details rail: health pill + the two device actions. */
.cfg .details .fx-pill,
.fx-editor .fx-pill {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  padding: 2px 8px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-muted);
}
.cfg .details .fx-pill.ok,   .fx-editor .fx-pill.ok   { background: var(--accent-bg); color: var(--accent-700); }
.cfg .details .fx-pill.warn, .fx-editor .fx-pill.warn { background: var(--warn-bg);   color: var(--warn-strong); }
.cfg .details .fx-pill.bad,  .fx-editor .fx-pill.bad  { background: var(--danger-bg); color: var(--danger); }
.cfg .details .fx-err { color: var(--danger); }
.cfg .details .fx-actions,
.fx-editor .fx-actions { display: flex; gap: 8px; margin-top: 8px; }
.cfg .details .fx-actions .btn,
.fx-editor .fx-actions .btn { flex: 1 1 0; justify-content: center; }

/* ---- ՀԴՄ editor modal ----------------------------------------------------
   The panel is a sibling of .cfg (it renders next to the canvas, not inside
   it), so NONE of the .cfg-scoped controls above reach it — .toggle,
   .toggle-row and .scope-note are all re-declared here under .fx-editor
   rather than reused. Same trap as the device editor. */
.fx-editor .fx-head-tools { display: flex; align-items: center; gap: 10px; }
.fx-editor .fx-group { margin-top: 18px; }
.fx-editor .fx-group:first-child { margin-top: 4px; }
.fx-editor .fx-group > h4 {
  margin: 0 0 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-muted);
}
.fx-editor .fx-sub {
  margin: 14px 0 4px;
  font-size: 12px; font-weight: 600; color: var(--text);
}
.fx-editor .scope-note { margin: 6px 2px 0; font-size: 12px; color: var(--text-muted); }
.fx-editor .toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0;
  font-size: 13px;
}
.fx-editor .toggle {
  position: relative;
  width: 34px; height: 20px; border-radius: 999px;
  background: var(--border-strong); border: 0; padding: 0;
  cursor: pointer; flex: 0 0 auto;
  transition: background 80ms linear;
}
.fx-editor .toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface);
  transition: left 80ms linear;
}
.fx-editor .toggle[data-on="true"] { background: var(--accent); }
.fx-editor .toggle[data-on="true"]::after { left: 16px; }
/* A toggle sitting in a .grid-2 cell needs the cell, not the switch, to be the
   grid child — otherwise the hint under it escapes the column. */
.fx-editor .fx-toggle-field { display: flex; flex-direction: column; justify-content: center; }
.fx-editor label.fx-full { display: block; margin-top: 10px; font-size: 12px; font-weight: 500; color: var(--text-muted); }
.fx-editor label.fx-full select {
  width: 100%; margin-top: 4px;
  height: 34px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 13px;
}
/* "set" / "not set" next to a write-only credential label. The field itself is
   always blank — this chip is the only signal that a secret is stored.
   The label is a COLUMN flex box (.ie-panel .grid-2 label), so the chip needs
   its own row wrapper or it stretches into a full-width green bar. */
.fx-editor .fx-label-row { display: flex; align-items: center; gap: 6px; }
.fx-editor .fx-secret {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-muted);
}
.fx-editor .fx-secret.on { background: var(--accent-bg); color: var(--accent-700); }
.fx-editor .fx-readonly { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.fx-editor .fx-ro-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 10px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.fx-editor .fx-ro-row:last-child { border-bottom: 0; }
.fx-editor .fx-ro-l { color: var(--text-muted); flex: 0 0 auto; }
.fx-editor .fx-ro-v { color: var(--text); text-align: right; word-break: break-word; }

/* ============================================================
   Screen 2: Sales Terminal
   ============================================================ */
.sales {
  height: 100%;
  display: flex; flex-direction: column;
  background: var(--bg);
  min-height: 0;
}

/* ---- Sales terminal selector ---- */
/* One row: the terminal selector (grows) + the shift chip, sharing the bar so
   the chip never drops to its own line. The bar owns the surface + separator. */
.terminal-bar { position: relative; flex: 0 0 auto; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 6px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
/* The printing switch, the ՀԴՄ switch and the shift chip share one wrapper so a
   phone has a single thing to fold away (see mobile/pos.css). At desk widths the
   wrapper is not a box at all — the three stay direct flex items of the bar and
   the wide layout is byte-for-byte what it was. */
.tb-desk { display: contents; }
.terminal-bar .term-current {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 6px 8px; border-radius: 8px;
  background: none; border: 0;
  font-family: inherit; color: var(--text); cursor: pointer;
  text-align: left;
}
.terminal-bar .term-current:hover { background: var(--surface-2); }
.terminal-bar .term-current .ic {
  width: 30px; height: 30px; border-radius: 7px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--text-muted);
}
.terminal-bar .term-current .tx { display: flex; flex-direction: column; line-height: 1.2; }
.terminal-bar .term-current .tx .lbl {
  font-size: 9px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-soft);
}
.terminal-bar .term-current .tx .nm { font-size: 14px; font-weight: 600; }
.terminal-bar .term-current .scope {
  margin-left: auto;
  font-size: 12px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%;
}
.terminal-bar .term-current .chev { flex: 0 0 auto; color: var(--text-muted); transition: transform 0.15s; }
.terminal-bar .term-current.open .chev { transform: rotate(180deg); }

.terminal-bar .term-menu {
  position: absolute; top: calc(100% + 6px); left: 16px;
  width: 360px; max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.22);
  padding: 10px; z-index: 40;
}
.terminal-bar .tm-head {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); padding: 4px 6px 8px;
}
.terminal-bar .tm-list { display: flex; flex-direction: column; gap: 4px; }
.terminal-bar .tm-row {
  display: flex; align-items: stretch; gap: 4px;
  border-radius: 8px;
}
.terminal-bar .tm-row.active { background: var(--surface-2); }
.terminal-bar .tm-pick {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 5px;
  padding: 9px 10px; border: 0; background: none; border-radius: 8px;
  font-family: inherit; color: var(--text); cursor: pointer; text-align: left;
}
.terminal-bar .tm-pick:hover { background: var(--surface-2); }
.terminal-bar .tm-pick .nm { font-size: 13px; font-weight: 600; }
.terminal-bar .tm-pick .nm .cur { margin-left: 6px; font-size: 11px; font-weight: 500; color: var(--accent-700); }
.terminal-bar .tm-pick .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.terminal-bar .tm-del {
  flex: 0 0 auto; width: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: none; border-radius: 8px;
  color: var(--text-soft); cursor: pointer;
}
.terminal-bar .tm-del:hover { background: var(--danger-bg); color: var(--danger); }
.terminal-bar .brand-chip {
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  background: var(--surface-3); color: var(--text-muted);
  border: 1px solid var(--border);
}
.terminal-bar .brand-chip.all { background: var(--accent-bg); color: var(--accent-700); border-color: var(--accent); }
.terminal-bar .tm-add { margin-top: 8px; width: 100%; justify-content: center; }
.terminal-bar .tm-form { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.terminal-bar .tm-form .tm-name {
  width: 100%; height: 34px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font-size: 13px;
}
.terminal-bar .tm-form-label {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  margin: 10px 2px 6px;
}
.terminal-bar .tm-brands { display: flex; flex-direction: column; gap: 2px; }
.terminal-bar .tm-brand {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px; border-radius: 6px;
  font-size: 13px; color: var(--text); cursor: pointer;
}
.terminal-bar .tm-brand:hover { background: var(--surface-2); }
.terminal-bar .tm-brand input { width: 15px; height: 15px; accent-color: var(--accent); }
.terminal-bar .tm-hint { font-size: 11px; color: var(--text-soft); margin: 6px 2px; }
.terminal-bar .tm-form-actions { display: flex; gap: 8px; margin-top: 4px; }

.bill-head .sub.other-brands { color: var(--text-soft); font-size: 11px; margin-top: 2px; display: block; }

.sales .step-bar {
  height: 48px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px;
}
.sales .step-bar .crumb {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500;
  color: var(--text-muted);
  background: none; border: 0;
  padding: 4px 6px; border-radius: 6px;
  font-family: inherit;
}
button.crumb:hover { background: var(--surface-2); color: var(--text); cursor: pointer; }
button.crumb.done { color: var(--text); }
button.crumb.done .num { background: var(--accent); color: var(--surface); }
button.crumb.active { color: var(--text); cursor: default; }
button.crumb.active:hover { background: transparent; }
.sales .step-bar .crumb.active { color: var(--text); }
.sales .step-bar .crumb.context {
  color: var(--text-muted);
  font-size: 12px;
  font-family: var(--mono);
  padding: 4px 8px;
  background: var(--surface-2);
  border-radius: 4px;
}
.sales .step-bar .crumb .num {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  background: var(--surface-2); color: var(--text-muted);
}
.sales .step-bar .crumb.active .num { background: var(--text); color: var(--surface); }
.sales .step-bar .crumb.done .num { background: var(--accent); color: var(--surface); }
.sales .step-bar .sep { color: var(--text-soft); font-size: 11px; }
.sales .step-bar .spacer { flex: 1 1 auto; }
.sales .step-bar .back {
  font-size: 13px; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 4px;
}
.sales .step-bar .back:hover { color: var(--text); }

.sales .step-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 24px;
}
.sales .section-h {
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 12px;
}

/* Place picker */
.places { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; max-width: 1100px; }
.places .col-h { margin-bottom: 12px; }
.delivery-tile {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 100%; height: 260px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  text-align: left;
}
.delivery-tile:hover { border-color: var(--border-strong); }
.delivery-tile .top { display: flex; flex-direction: column; gap: 8px; }
.delivery-tile .label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.delivery-tile .name { font-size: 28px; font-weight: 700; letter-spacing: 0; }
.delivery-tile .bottom { display: flex; align-items: end; justify-content: space-between; }
.delivery-tile .count {
  font-size: 12px; color: var(--text-muted);
}
.delivery-tile .arrow { color: var(--text-muted); }

.tables {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
}
.table-tile {
  min-height: 112px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  display: flex; flex-direction: column;
  padding: 12px 14px;
  text-align: left;
  position: relative;
}
.table-tile:hover { border-color: var(--border-strong); }
.table-tile .lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.table-tile .num {
  font-size: 32px; font-weight: 700; letter-spacing: 0;
  margin-top: 2px;
}
.table-tile .status {
  margin-top: auto;
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500;
  color: var(--text-muted);
}
.table-tile .status .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-soft);
}
.table-tile.open .status { color: var(--accent-700); }
.table-tile.open .status .dot { background: var(--accent); }
.table-tile.active { border-color: var(--warn); }
.table-tile.active .status { color: var(--warn-strong); }
.table-tile.active .status .dot { background: var(--warn); }
.table-tile.active .num { color: var(--text); }
.table-tile.active::after {
  content: "ACTIVE ORDER";
  position: absolute; top: 8px; right: 8px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
  color: var(--warn);
}

/* Occupied table — split into Open + small "+ new" affordance */
.table-tile.occupied {
  min-height: 112px;
  padding: 0;
  border: 1px solid var(--warn);
  background: var(--surface);
  border-radius: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  overflow: hidden;
  position: relative;
}
.table-tile.occupied:hover { border-color: var(--warn); }
.table-tile.occupied .bill {
  position: relative;
  min-width: 0;
  display: flex; flex-direction: column;
  padding: 12px 14px;
  text-align: left;
  background: var(--warn-bg);
  border: 0; border-right: 1px solid var(--warn-bg);
  color: var(--text);
}
.table-tile.occupied .bill:hover { background: var(--warn); color: var(--warn-strong); }
.table-tile.occupied .bill .lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--warn-strong);
}
.table-tile.occupied .bill .num {
  font-size: 32px; font-weight: 700;
  margin-top: 2px;
}
.table-tile.occupied .bill .status {
  margin-top: auto;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 5px;
  font-size: 12px; color: var(--warn-strong);
  font-variant-numeric: tabular-nums;
}
.table-tile.occupied .bill .status svg {
  width: 13px; height: 13px;
  align-self: center; flex: 0 0 auto;
}
.table-tile.occupied .bill .status .amt { font-weight: 700; }
.table-tile.occupied .bill .status .cnt { font-size: 11px; font-weight: 500; opacity: 0.85; white-space: nowrap; }
.table-tile.occupied .new {
  border: 0;
  background: var(--warn-bg);
  color: var(--warn-strong);
  display: flex; align-items: center; justify-content: center;
}
.table-tile.occupied .new:hover { background: var(--warn); }

/* Active deliveries list under the Delivery tile */
.active-orders-block {
  margin-top: 16px;
}
.active-orders-block .block-h {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 8px 0;
}
.active-orders-list {
  display: flex; flex-direction: column;
  gap: 6px;
}
.active-order-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  text-align: left;
}
.active-order-row:hover { background: var(--surface-2); border-color: var(--border-strong); }
.active-order-row .num {
  font-family: var(--mono);
  font-size: 13px; font-weight: 700;
  color: var(--text);
}
.active-order-row .meta {
  font-size: 12px; color: var(--text-muted);
}
.active-order-row .status {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
}
.active-order-row .status.st-cooking  { background: var(--warn-bg);   color: var(--warn-strong); border-color: var(--warn); }
.active-order-row .status.st-ready    { background: var(--info-bg);   color: var(--info);   border-color: var(--info); }
.active-order-row .status.st-new      { background: var(--surface);   color: var(--text-muted); }
.active-order-row .arrow { color: var(--text-muted); }

/* ============================================================
   Table checkout / bill overlay
   ============================================================ */
.bill-scrim {
  position: fixed; inset: 0;
  background: var(--scrim);
  z-index: 160;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  animation: fadein 120ms linear;
}
.bill-panel {
  width: 100%; max-width: 460px;
  max-height: calc(100vh - 64px);
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-detail);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.bill-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.bill-head .lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.bill-head h2 { margin: 2px 0 4px; font-size: 24px; font-weight: 700; }
.bill-head .sub { font-size: 12px; color: var(--text-muted); }
.bill-head .bh-close {
  width: 32px; height: 32px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-muted);
}
.bill-head .bh-close:hover { background: var(--surface-2); color: var(--text); }

/* ⋮ table actions (move / merge / split) */
.bill-head .bh-menu-wrap { position: relative; flex: 0 0 auto; margin-left: auto; margin-right: 8px; }
.bill-head .bh-menu {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-muted); background: transparent; cursor: pointer;
}
.bill-head .bh-menu:hover, .bill-head .bh-menu[aria-expanded="true"] { background: var(--surface-2); color: var(--text); }
.bill-head .bh-dropdown {
  position: absolute; right: 0; top: 38px; z-index: 5; min-width: 200px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.16); padding: 5px; display: flex; flex-direction: column;
}
.bill-head .bh-dropdown button {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border: 0; background: transparent; border-radius: 7px;
  font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; text-align: left;
}
.bill-head .bh-dropdown button:hover { background: var(--surface-2); }

/* Move / merge: destination picker */
.mv-floor { margin: 14px 2px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.mv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.mv-table {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 6px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); cursor: pointer;
}
.mv-table:hover { border-color: var(--accent); background: var(--accent-bg); }
.mv-table .n { font-size: 20px; font-weight: 700; }
/* Named tables ("Bar", "Takeaway") show the name under the number here and on
   the reservations floor, so a move/booking target is unambiguous. */
.mv-table .mv-name,
.floor-table .ft-name,
.rsv-ft .rsv-ft-name {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; font-weight: 600; color: var(--text-soft);
}
.mv-table .s { font-size: 10.5px; color: var(--text-muted); text-align: center; }
.mv-table.occ { border-style: dashed; }
.mv-table.occ .s { color: var(--warn); font-weight: 600; }
.bill-foot .mv-back { align-self: flex-start; }

/* Split bill: selectable lines + qty steppers */
.bill-line.split {
  cursor: pointer; border-radius: 8px; padding: 6px 8px; margin: 0 -8px;
  grid-template-columns: 38px 1fr auto auto; align-items: center;
}
.bill-line.split:hover { background: var(--surface-2); }
.bill-line.split.on { background: var(--accent-bg); }
.bill-line.split.on .q { color: var(--accent-700); font-weight: 700; }
.split-step { display: inline-flex; gap: 4px; margin-right: 8px; }
.split-step button {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  color: var(--text); cursor: pointer;
}
.split-step button:disabled { opacity: .35; cursor: default; }
.split-tick { width: 20px; display: inline-flex; justify-content: center; color: var(--accent-700); margin-right: 8px; }
.split-actions { display: flex; gap: 8px; align-items: stretch; }
.split-actions .bill-settle.split { flex: 1; }
.split-actions .bill-settle.split:disabled { opacity: .5; cursor: default; }

.bill-body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  padding: 8px 20px;
}
.bill-round { padding: 12px 0; border-bottom: 1px dashed var(--border); }
.bill-round:last-child { border-bottom: 0; }
.bill-round .br-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.bill-round .br-head .num {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: var(--text-muted);
}
.bill-round .br-head .status {
  font-family: var(--mono);
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text-muted);
}
.bill-round .br-head .status.st-cooking   { background: var(--warn-bg); color: var(--warn-strong); border-color: var(--warn); }
.bill-round .br-head .status.st-ready     { background: var(--info-bg); color: var(--info); border-color: var(--info); }
.bill-round .br-head .status.st-completed { background: var(--accent-bg); color: var(--accent-700); border-color: var(--accent); }
.bill-round .br-note {
  font-size: 11px; font-style: italic; color: var(--warn-strong);
  border-left: 3px solid var(--warn); padding-left: 8px;
  margin-bottom: 8px;
}
.bill-round .br-lines { display: flex; flex-direction: column; gap: 6px; }
.bill-line {
  display: grid; grid-template-columns: 28px 1fr auto;
  gap: 8px; align-items: baseline;
}
.bill-line .q { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.bill-line .n { font-size: 13px; color: var(--text); min-width: 0; }
.bill-line .n .opts {
  display: block; font-size: 11px; font-weight: 600; color: var(--info);
  margin-top: 1px;
}
.bill-line .n .ln-note {
  display: block; font-size: 11px; font-style: italic; color: var(--text-soft);
  margin-top: 1px;
}
.bill-line .amt { font-size: 13px; font-weight: 600; }

.bill-foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--border);
  padding: 14px 20px 18px;
  background: var(--surface-2);
}
.bill-totals { margin-bottom: 12px; }
.bill-totals .row {
  display: flex; justify-content: space-between; align-items: center;
  height: 24px;
}
.bill-totals .row .l { font-size: 12px; color: var(--text-muted); }
.bill-totals .row .v { font-size: 13px; font-weight: 500; }
.bill-totals .row.total .l { font-size: 14px; font-weight: 700; color: var(--text); }
.bill-totals .row.total .v { font-size: 20px; font-weight: 700; }
.bill-pay { display: flex; flex-direction: column; gap: 10px; }
.bill-pay .pm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bill-pay .pm {
  height: 40px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--text-muted);
}
.bill-pay .pm:hover { background: var(--surface-3); }
.bill-pay .pm[aria-pressed="true"] {
  border-color: var(--text); color: var(--text); background: var(--surface);
}
.bill-settle {
  height: 56px;
  background: var(--accent); color: var(--surface);
  border: 0; border-radius: 8px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
}
.bill-settle:hover { background: var(--accent-hover); }
.bill-settle:active { background: var(--accent-700); }
.bill-settle .l {
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bill-settle .v { font-size: 18px; font-weight: 700; }

/* Brand picker */
.brands {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  max-width: 1100px;
}
.brand-tile {
  display: flex; flex-direction: column;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: left;
  min-height: 132px;
}
.brand-tile:hover { border-color: var(--border-strong); }
.brand-tile .row {
  display: flex; align-items: center; justify-content: space-between;
}
.brand-tile .name { font-size: 18px; font-weight: 600; letter-spacing: 0; }
.brand-tile .status {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 3px;
}
.brand-tile .status.open { background: var(--accent-bg); color: var(--accent-700); }
.brand-tile .status.closed { background: var(--surface-2); color: var(--text-muted); }
.brand-tile .prep-row {
  display: flex; align-items: baseline; gap: 6px;
  margin-top: 12px;
  font-size: 12px; color: var(--text-muted);
}
.brand-tile .prep-row .v {
  font-size: 22px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.brand-tile .thresholds {
  display: flex; gap: 12px;
  margin-top: 4px;
  font-size: 11px; color: var(--text-muted);
  font-family: var(--mono);
}
.brand-tile .thresholds .yel { color: var(--warn); }
.brand-tile .thresholds .red { color: var(--danger); }
.brand-tile[aria-disabled="true"] {
  cursor: not-allowed; opacity: 0.55;
}

/* Menu view (3-col) */
.menu-view {
  display: grid;
  grid-template-columns: 180px 1fr 380px;
  height: 100%;
  min-height: 0;
}
.menu-cats {
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.menu-cats .cat {
  position: relative; display: flex; align-items: center;
  width: 100%; height: 48px;
  padding: 0 12px 0 16px;
  font-size: 14px; font-weight: 500;
  color: var(--text);
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.menu-cats .cat[aria-current="true"] {
  background: var(--surface);
  font-weight: 600;
}
.menu-cats .cat[aria-current="true"]::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--accent);
}
.menu-cats .cat .count {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.menu-items {
  padding: 16px;
  overflow-y: auto;
  background: var(--bg);
}
.menu-items .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}
.item-tile {
  height: 144px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0;
  text-align: left;
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
}
.item-tile:hover { border-color: var(--border-strong); }
.item-tile .ph {
  flex: 1 1 auto;
  background:
    repeating-linear-gradient(45deg, var(--ph-a) 0 6px, var(--ph-b) 6px 12px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 10px; color: var(--text-soft);
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}
.item-tile .info {
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.item-tile .name {
  font-size: 14px; font-weight: 600; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
.item-tile .price { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.item-tile.unavailable { opacity: 0.6; }
.item-tile.unavailable .price { color: var(--text-muted); }
.item-tile .stock {
  position: absolute; top: 8px; left: 8px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
  background: var(--surface); border: 1px solid var(--border);
  padding: 2px 6px; border-radius: 3px;
}
.item-tile .stock.low { color: var(--warn); border-color: var(--warn); }
.item-tile .stock.out { color: var(--danger); border-color: var(--danger); }
.item-tile .stock.off { color: var(--text-muted); border-color: var(--border-strong); background: var(--surface-2); }

/* Cart panel */
.cart {
  background: var(--surface);
  border-left: 1px solid var(--border);
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
}
.cart .cart-order-note {
  padding: 12px 16px 0;
  background: transparent;
}
.cart .cart-order-note textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 34px;
  height: 34px;
  resize: none;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  background: var(--surface);
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
  transition: min-height 140ms ease, height 140ms ease, border-color 120ms ease;
}
.cart .cart-order-note textarea::placeholder { color: var(--text-soft); }
/* Collapsed + empty: keep the hint on ONE line. Longer languages (hy/ru run
   ~25% over English) used to wrap it and the 34px box sliced the second row in
   half. The rule is scoped to :placeholder-shown, so the moment there is real
   text the grow rule below takes over and normal wrapping resumes. */
.cart .cart-order-note textarea:placeholder-shown:not(:focus) {
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
/* Grow on focus, or whenever there is already text */
.cart .cart-order-note textarea:focus,
.cart .cart-order-note textarea:not(:placeholder-shown) {
  min-height: 64px;
  height: 64px;
  resize: vertical;
  overflow: auto;
}
.cart .cart-order-note textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}
.cart .cart-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
}
.cart .cart-head .row {
  display: flex; align-items: center; justify-content: space-between;
}
.cart .cart-head .title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.cart .cart-head .order-id {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
}
.cart .cart-head .clear {
  font-size: 12px; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 4px;
}
.cart .cart-head .clear:disabled { color: var(--text-soft); cursor: not-allowed; }
.cart .cart-head .clear:not(:disabled):hover { color: var(--text); }

.cart .lines { overflow-y: auto; min-height: 0; }
.cart .line {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.cart .line .qty-stack {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.cart .line .qty-btn {
  width: 24px; height: 22px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.cart .line .qty-btn:hover { background: var(--surface-2); color: var(--text); }
.cart .line .qty-val {
  font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 22px;
}
.cart .line .body { min-width: 0; }
.cart .line .name { font-size: 13px; font-weight: 500; }
.cart .line .note {
  margin-top: 4px;
  font-size: 11px; color: var(--text-muted);
  font-style: italic;
}
.cart .line .note-edit {
  margin-top: 4px;
  font-size: 11px; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 4px;
}
.cart .line .note-edit:hover { color: var(--text); }
.cart .line .right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.cart .line .right .price {
  font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.cart .line .right .sub {
  font-size: 11px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.cart .line .rm {
  width: 22px; height: 22px;
  color: var(--text-soft); border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cart .line .rm:hover { color: var(--danger); background: var(--danger-bg); }

.cart .empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 32px; gap: 6px;
  height: 100%; text-align: center;
}
.cart .empty .t1 { font-size: 14px; font-weight: 500; }
.cart .empty .t2 { font-size: 12px; color: var(--text-muted); }

.cart .totals { padding: 8px 16px; border-top: 1px solid var(--border); }
.cart .totals .row {
  display: flex; justify-content: space-between; align-items: center;
  height: 24px;
}
.cart .totals .row .l { font-size: 12px; color: var(--text); }
.cart .totals .row .v { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.cart .totals .row.total .l { font-size: 13px; font-weight: 600; }
.cart .totals .row.total .v { font-size: 16px; font-weight: 700; }
.cart .totals .row.hint {
  height: auto;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.cart .totals .row.hint .l,
.cart .totals .row.hint .v {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.cart .pay-section {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
}
.cart .pay-section .pm-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cart .pm {
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 13px; font-weight: 600;
  color: var(--text-muted);
}
.cart .pm:hover { background: var(--surface-2); }
.cart .pm[aria-pressed="true"] {
  border-color: var(--text); color: var(--text);
  background: var(--surface);
}
.cart .create {
  height: 56px;
  background: var(--accent); color: var(--surface);
  border-radius: 8px;
  border: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
}
.cart .create:hover { background: var(--accent-hover); }
.cart .create:active { background: var(--accent-700); }
.cart .create:disabled { background: var(--disabled); color: var(--text-muted); cursor: not-allowed; }
.cart .create .l { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.cart .create .v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ============================================================
   Screen 3: Cook Screen
   ============================================================ */
.cook {
  height: 100%;
  display: flex; flex-direction: column;
  background: var(--bg);
  min-height: 0;
}
.cook .filters {
  min-height: 52px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  padding: 7px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.cook .filters .group {
  display: flex; gap: 4px; flex: 0 0 auto;
  padding-right: 12px;
  border-right: 1px solid var(--border);
}
.cook .filters .group:last-child { border-right: 0; }
.cook .chip {
  height: 28px; padding: 0 10px; flex: 0 0 auto;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  font-size: 12px; font-weight: 500; color: var(--text);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.cook .chip:hover { background: var(--surface-2); }
.cook .chip[aria-pressed="true"] {
  background: var(--text); color: var(--surface); border-color: var(--text);
}
.cook .chip .count {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  opacity: 0.7;
}
.cook .filters .spacer { flex: 1 1 auto; }
.cook .filters .count-readout {
  font-size: 12px; color: var(--text-muted);
  font-family: var(--mono);
  padding-right: 12px;
}

.cook .board-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}
.cook .board {
  display: flex;
  gap: 16px;
  padding: 16px;
  align-items: flex-start;
}
.cook .board .col {
  flex: 1 1 0;
  display: flex; flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.cook .board[data-cols="1"] .col { flex: 1 1 auto; }
/* default flex distribution for 2/3 columns already even */
.order-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: block;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 80ms linear, box-shadow 80ms linear;
}
.order-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 1px 0 var(--border-strong), 0 4px 12px rgba(0,0,0,0.04);
}
.order-card.s-red:hover    { border-color: var(--danger); }
.order-card.s-yellow:hover { border-color: var(--warn); }
.order-card.s-normal:hover { border-color: var(--accent); }
.order-card .strip { height: 4px; background: var(--text-soft); }
.order-card.s-red .strip    { background: var(--danger); }
.order-card.s-yellow .strip { background: var(--warn); }
.order-card.s-normal .strip { background: var(--accent); }
.order-card.s-pending .strip { background: var(--accent); }
.order-card.s-completed { opacity: 0.55; }
.order-card.s-completed .strip { background: var(--text-soft); }

/* Urgency body tint — yellow and red flood the whole card, green stays as just the strip */
.order-card.s-yellow { background: var(--warn-bg); border-color: var(--warn); }
.order-card.s-yellow .head, .order-card.s-yellow .items, .order-card.s-yellow .foot { background: transparent; }
.order-card.s-yellow .head { border-bottom-color: rgba(245, 158, 11, 0.35); }
.order-card.s-yellow .item-row { border-bottom-color: rgba(245, 158, 11, 0.25); }

.order-card.s-red { background: var(--danger-bg); border-color: var(--danger); }
.order-card.s-red .head, .order-card.s-red .items, .order-card.s-red .foot { background: transparent; }
.order-card.s-red .head { border-bottom-color: rgba(220, 38, 38, 0.35); }
.order-card.s-red .item-row { border-bottom-color: rgba(220, 38, 38, 0.25); }

.order-card.s-pending { background: var(--accent-bg); border-color: var(--accent); opacity: 0.85; }
.order-card.s-pending .head, .order-card.s-pending .items, .order-card.s-pending .foot { background: transparent; }
.order-card.s-pending .head { border-bottom-color: rgba(22, 163, 74, 0.35); }
.order-card.s-pending .item-row { border-bottom-color: rgba(22, 163, 74, 0.25); }

/* Pending-completion banner */
.pending-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  background: var(--accent);
  color: var(--surface);
  font-family: var(--mono);
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pending-banner .lbl { flex: 1; }
.pending-banner .count {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  background: rgba(0,0,0,0.18);
  padding: 2px 8px;
  border-radius: 4px;
}
.pending-banner .undo {
  height: 28px; padding: 0 12px;
  background: var(--surface); color: var(--accent-700);
  border: 0; border-radius: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pending-banner .undo:hover { background: var(--undo-hover); }
.cook-detail .pending-banner { border-radius: 0; }

.order-card .head {
  padding: 10px 14px 8px;
  display: flex; flex-direction: column; gap: 6px;
  border-bottom: 1px solid var(--border);
}
.order-card .head .row1 {
  display: flex; align-items: center; justify-content: space-between;
}
.order-card .head .id {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  color: var(--text-soft);
  letter-spacing: 0.02em;
}
.order-card .head .timer {
  font-family: var(--mono);
  font-size: 18px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.order-card.s-red    .head .timer { color: var(--danger); }
.order-card.s-yellow .head .timer { color: var(--warn); }
.order-card .head .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.order-card .head .mid { font-size: 13px; color: var(--text-muted); }
.order-card .head .sub { font-size: 10px; color: var(--text-soft); font-family: var(--mono); }
.order-card .head .brand {
  font-size: 18px; font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.order-card .head .place {
  font-family: var(--mono);
  font-size: 11px; color: var(--text-soft);
  font-weight: 500;
}
.order-card .head .placed .y { color: var(--warn); }
.order-card .head .placed .r { color: var(--danger); }
.order-card .head .order-note {
  margin-top: 4px;
  padding: 2px 0 2px 10px;
  background: transparent;
  border-radius: 0;
  border-left: 3px solid var(--warn);
  font-size: 12px;
  font-weight: 500;
  font-style: italic;
  color: var(--warn-strong);
  line-height: 1.4;
}

/* status pill — shared between card head and detail head */
.status-pill {
  font-family: var(--mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
}
.status-pill.st-new       { background: var(--surface);    color: var(--text-muted); border-color: var(--border); }
.status-pill.st-cooking   { background: var(--warn-bg);    color: var(--warn-strong);            border-color: var(--warn); }
.status-pill.st-ready     { background: var(--info-bg);    color: var(--info);        border-color: var(--info); }
.status-pill.st-completed { background: var(--accent-bg);  color: var(--accent-700);  border-color: var(--accent); }

.order-card .items {
  display: flex; flex-direction: column;
}
.item-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.item-row:last-child { border-bottom: 0; }
.item-row .ico {
  position: relative;
  width: 64px; height: 64px;
  align-self: start;
  background:
    repeating-linear-gradient(45deg, var(--ph-c) 0 8px, var(--ph-d) 8px 16px);
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 6px;
  border: 1px solid var(--border);
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--text-soft);
}
.item-row .ico::after {
  content: "PHOTO";
}
.item-row .qty-badge {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--text); color: var(--surface);
  border: 2px solid var(--surface);
  border-radius: 11px;
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.item-row .body { min-width: 0; }
.item-row .name { font-size: 14px; font-weight: 600; }
.item-row .options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.item-row .options .opt {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--info-bg);
  color: var(--info);
  border: 1px solid var(--info);
  line-height: 1.3;
  white-space: nowrap;
}
.detail-item .options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.detail-item .options .opt {
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 5px;
  background: var(--info-bg);
  color: var(--info);
  border: 1px solid var(--info);
  letter-spacing: 0.02em;
}
/* Removed ingredients on a cook ticket. Read from across the pass, so they get
   more weight than an option chip — options are a nice-to-have, a missed "no
   peanuts" comes back. */
.item-row .no-list { margin-top: 6px; }
.item-row .no-chip { font-size: 11px; padding: 2px 7px; border-radius: 4px; border-width: 1.5px; }
.detail-item .no-list { margin-top: 6px; gap: 6px; }
.detail-item .no-chip { font-size: 13px; padding: 4px 10px; border-radius: 5px; border-width: 1.5px; }
.cook .board[data-cols="3"] .item-row .no-chip { font-size: 10px; padding: 2px 6px; }
.item-row .note {
  font-size: 11px; color: var(--text-soft);
  margin-top: 2px;
  font-style: italic;
}
.item-row .meta {
  display: flex; gap: 8px;
  margin-top: 4px;
  font-size: 10px; font-family: var(--mono); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.item-row .meta .station { color: var(--info); }
.item-row .meta .cook { color: var(--text-muted); }
.item-row .recipe {
  font-size: 10px; color: var(--text-soft);
  margin-top: 2px;
  overflow-wrap: anywhere;
}

/* 3-up cards are narrow — hide the recipe (still visible in the detail overlay)
   and collapse the inline status button to just the "next" label so the body
   text does not get squeezed to one-word-per-line. */
.cook .board[data-cols="3"] .item-row { gap: 10px; padding: 10px; }
.cook .board[data-cols="3"] .item-row .recipe { display: none; }
.cook .board[data-cols="3"] .item-row .status {
  min-width: 0;
  padding: 0 8px;
  grid-template-columns: 1fr;
}
.cook .board[data-cols="3"] .item-row .status .cur,
.cook .board[data-cols="3"] .item-row .status .arrow { display: none; }
.cook .board[data-cols="3"] .item-row .options .opt { font-size: 10px; padding: 2px 6px; }
.item-row .status {
  min-width: 132px;
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
}
.item-row .status .cur { text-align: right; color: var(--text-muted); }
.item-row .status .arrow { color: var(--text-soft); font-weight: 400; }
.item-row .status .nxt { text-align: left; color: var(--text); font-weight: 800; }
.item-row .status:hover { background: var(--surface-2); }
.item-row .status:disabled { opacity: 0.5; cursor: not-allowed; }
.item-row .status[data-status="new"]        { background: var(--surface); }
.item-row .status[data-status="cooking"]    { background: var(--warn-bg);   border-color: var(--warn); }
.item-row .status[data-status="cooking"] .cur { color: var(--warn-strong); }
.item-row .status[data-status="ready"]      { background: var(--info-bg);   border-color: var(--info); }
.item-row .status[data-status="ready"] .cur { color: var(--info); }
.item-row .status[data-status="completed"]  { background: var(--accent-bg); border-color: var(--accent); }
.item-row .status[data-status="completed"] .cur { color: var(--accent-700); }

.item-row .meta .cook.st-cooking   { color: var(--warn-strong); }
.item-row .meta .cook.st-ready     { color: var(--info); }
.item-row .meta .cook.st-completed { color: var(--accent-700); }

.order-card .foot {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.order-card .foot button {
  height: 36px;
  border: 0;
  background: var(--surface);
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-right: 1px solid var(--border);
}
.order-card .foot button:last-child { border-right: 0; }
.order-card .foot button:hover { background: var(--surface-3); color: var(--text); }
.order-card .foot button[aria-pressed="true"] { color: var(--surface); background: var(--text); }

/* ============================================================
   Cook view-mode toggle (1 / 2 / 3 columns)
   ============================================================ */
.cook .view-toggle {
  display: inline-flex; flex: 0 0 auto;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  overflow: hidden;
}
.cook .view-toggle button {
  height: 28px; min-width: 36px; padding: 0 10px;
  border: 0;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12px; font-weight: 500; white-space: nowrap;
  border-right: 1px solid var(--border);
}
.cook .filters .count-readout { flex: 0 0 auto; white-space: nowrap; }
.cook .view-toggle button:last-child { border-right: 0; }
.cook .view-toggle button:hover { background: var(--surface-2); color: var(--text); }
.cook .view-toggle button[aria-pressed="true"] {
  background: var(--text); color: var(--surface);
}

/* ============================================================
   Cook order — detail overlay
   ============================================================ */
.cook-detail-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 150;
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
  animation: fadein 120ms linear;
}
.cook-detail-scrim.no-anim { animation: none; }
.cook-detail {
  width: 100%;
  max-width: 980px;
  max-height: calc(100vh - 64px);
  background: var(--surface);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cook-detail .det-strip,
.cook-detail .det-head,
.cook-detail .det-foot { flex: 0 0 auto; }
.cook-detail .det-strip { height: 6px; background: var(--text-soft); }
.cook-detail.s-red    .det-strip { background: var(--danger); }
.cook-detail.s-yellow .det-strip { background: var(--warn); }
.cook-detail.s-normal .det-strip { background: var(--accent); }

.cook-detail .det-head {
  padding: 16px 24px 14px;
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 24px;
  align-items: start;
}
.cook-detail .det-head .left {
  display: flex; flex-direction: column; gap: 4px;
}
.cook-detail .det-head .id-row {
  display: flex; align-items: baseline; gap: 12px;
}
.cook-detail .det-head .id {
  font-family: var(--mono);
  font-size: 22px; font-weight: 700;
}
.cook-detail .det-head .brand {
  font-size: 18px; font-weight: 600;
}
.cook-detail .det-head .place {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-muted);
}
.cook-detail .det-head .meta {
  display: flex; gap: 14px;
  font-size: 12px; color: var(--text-muted);
  font-family: var(--mono);
}
.cook-detail .det-head .meta .y { color: var(--warn); }
.cook-detail .det-head .meta .r { color: var(--danger); }
.cook-detail .det-head .right {
  display: flex; align-items: start; gap: 12px;
}
.cook-detail .det-head .timer {
  font-family: var(--mono);
  font-size: 36px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1;
}
.cook-detail.s-red    .det-head .timer { color: var(--danger); }
.cook-detail.s-yellow .det-head .timer { color: var(--warn); }
.cook-detail .det-head .close {
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.cook-detail .det-head .close:hover { background: var(--surface-2); color: var(--text); }
.cook-detail .det-head .order-note {
  grid-column: 1 / -1;
  background: var(--warn-bg);
  color: var(--warn-strong);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
}

.cook-detail .det-items-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex; flex-direction: column;
}
.cook-detail .det-items {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-color: var(--text-soft) var(--surface-2);
  scrollbar-width: thin;
}
.cook-detail .det-items::-webkit-scrollbar { width: 14px; }
.cook-detail .det-items::-webkit-scrollbar-track {
  background: var(--surface-2);
  border-left: 1px solid var(--border);
}
.cook-detail .det-items::-webkit-scrollbar-thumb {
  background: var(--text-soft);
  border-radius: 7px;
  border: 3px solid var(--surface-2);
}
.cook-detail .det-items::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

.cook-detail .scroll-hint {
  position: absolute;
  left: 0; right: 14px;
  bottom: 0;
  pointer-events: none;
  display: none;
  align-items: end; justify-content: center;
  padding-bottom: 8px;
  height: 64px;
  background: linear-gradient(to bottom, var(--hint-fade) 0%, var(--surface) 80%);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cook-detail .scroll-hint .chev {
  display: inline-block;
  margin-right: 6px;
  animation: scrollHintBounce 1.2s ease-in-out infinite;
}
@keyframes scrollHintBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}
.cook-detail .det-items-wrap[data-overflow="true"][data-at-bottom="false"] .scroll-hint {
  display: flex;
}
.detail-item {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  flex: 0 0 auto;
}
.detail-item .photo {
  position: relative;
  width: 200px; height: 150px;
  background:
    repeating-linear-gradient(45deg, var(--ph-c) 0 10px, var(--ph-d) 10px 20px);
  border-radius: 6px;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--text-soft);
}
.detail-item .photo::after {
  content: attr(data-label);
  position: absolute; left: 8px; top: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 9px;
  color: var(--text-muted);
}
.detail-item .info {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}
.detail-item .name-row {
  display: flex; align-items: baseline; gap: 12px;
}
.detail-item .name {
  font-size: 18px; font-weight: 700;
  letter-spacing: 0;
}
.detail-item .qty {
  font-family: var(--mono);
  font-size: 16px; font-weight: 700;
  color: var(--text-muted);
}
.detail-item .meta-row {
  display: flex; gap: 8px;
  font-size: 11px; font-family: var(--mono);
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted);
}
.detail-item .meta-row .station { color: var(--info); }
.detail-item .note {
  background: var(--warn-bg);
  color: var(--warn-strong);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  margin-top: 2px;
}
.detail-item .recipe {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.detail-item .cook {
  font-size: 11px;
  color: var(--text-soft);
  font-family: var(--mono);
}
.detail-item .actions {
  display: flex; flex-direction: column;
  gap: 6px; justify-content: center;
  min-width: 132px;
}
.detail-item .actions .big-status {
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.detail-item .actions .big-status[aria-pressed="true"] {
  color: var(--surface);
}
.detail-item .actions .big-status[data-s="new"][aria-pressed="true"]       { background: var(--text); border-color: var(--text); }
.detail-item .actions .big-status[data-s="cooking"][aria-pressed="true"]   { background: var(--warn); border-color: var(--warn); }
.detail-item .actions .big-status[data-s="ready"][aria-pressed="true"]     { background: var(--info); border-color: var(--info); }
.detail-item .actions .big-status[data-s="completed"][aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }

.cook-detail .det-foot {
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  display: flex;
  gap: 8px;
  background: var(--surface-2);
}
.cook-detail .det-foot .lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  align-self: center;
  padding-right: 8px;
}
.cook-detail .det-foot .order-status {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.cook-detail .det-foot .order-status button {
  height: 36px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cook-detail .det-foot .order-status button[aria-pressed="true"] {
  background: var(--text); color: var(--surface); border-color: var(--text);
}
.cook-detail .det-foot .order-status button:hover { background: var(--surface-2); }
.cook-detail .det-foot .order-status button[aria-pressed="true"]:hover { background: var(--ink-hover); }

/* ============================================================
   Modal (configurator create/edit)
   ============================================================ */
.scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  animation: fadein 100ms linear;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 480px;
  background: var(--surface);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  overflow: hidden;
}
.modal .head {
  display: flex; align-items: center; justify-content: space-between;
  height: 48px; padding: 0 16px 0 20px;
  border-bottom: 1px solid var(--border);
}
.modal .head .title { font-size: 15px; font-weight: 600; }
.modal .body { padding: 20px; }
.modal .foot {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  display: flex; gap: 8px; justify-content: flex-end;
}

/* ============================================================
   Toast
   ============================================================ */
.toast-wrap {
  position: fixed; top: 72px; left: 50%; transform: translateX(-50%);
  z-index: 200;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--text); color: var(--surface);
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px; font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  animation: toastIn 120ms ease-out;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   Mini backend screens beyond the imported design trio
   ============================================================ */

#screenMount { height: 100%; min-height: 0; }

.panel.screen-panel,
.orders-history-panel,
.warehouse-panel {
  height: 100%;
  min-height: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-heading {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}

.panel-heading span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.panel-heading strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.muted { color: var(--text-muted); }

.item-row .cook-photo {
  background-size: cover;
  background-position: center;
}

.item-row .cook-photo::after { content: ""; }

.item-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  min-width: 248px;
}

.line-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(54px, 1fr));
  gap: 4px;
  width: 100%;
}

.line-status {
  height: 26px;
  padding: 0 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.line-status:hover { background: var(--surface-2); color: var(--text); }
.line-status:disabled { color: var(--text-soft); background: var(--surface-2); cursor: not-allowed; }
.line-status[aria-pressed="true"] { color: var(--surface); }
.line-status[data-s="new"][aria-pressed="true"] { background: var(--text); border-color: var(--text); }
.line-status[data-s="cooking"][aria-pressed="true"] { background: var(--warn); border-color: var(--warn); }
.line-status[data-s="ready"][aria-pressed="true"] { background: var(--info); border-color: var(--info); }
.line-status[data-s="completed"][aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }

.order-card .foot button:disabled {
  color: var(--text-soft);
  background: var(--surface-2);
  cursor: not-allowed;
}

.history-filter-bar,
.warehouse-filter-row,
.subscreen-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.history-filter-bar input {
  height: 34px;
  min-width: 260px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 10px;
  background: var(--surface);
}

.history-filter-bar div,
.warehouse-filter-row,
.subscreen-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.history-filter-bar button,
.warehouse-filter-row button,
.subscreen-tabs button,
.summary-box button,
.production-card button {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.history-filter-bar button:hover,
.warehouse-filter-row button:hover,
.subscreen-tabs button:hover,
.summary-box button:hover,
.production-card button:hover {
  background: var(--surface-2);
  color: var(--text);
}

.history-filter-bar button.active,
.warehouse-filter-row button.active,
.subscreen-tabs button.active {
  background: var(--text);
  border-color: var(--text);
  color: var(--surface);
}

.orders-history-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(340px, 420px) 1fr;
  overflow: hidden;
}

.history-list {
  overflow-y: auto;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
}

/* Grouped check — several table rounds settled as one bill */
.history-bill {
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.history-bill .history-bill-head {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "no where total" "chev where when";
  column-gap: 10px;
  align-items: center;
  padding: 8px 14px;
  background: var(--surface-3);
  border-left: 3px solid var(--accent);
  border-bottom: 1px solid var(--border);
  text-align: left;
  cursor: pointer;
}
.history-bill .history-bill-head:hover { background: var(--surface-2); }
.history-bill .history-bill-head.selected { background: var(--accent-bg); }
.history-bill.active .history-bill-head { border-left-color: var(--accent); }
.history-bill .bill-chev {
  grid-area: chev;
  font-size: 10px; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent-700);
  white-space: nowrap;
}
.history-bill .bill-no {
  grid-area: no;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: var(--text);
}
.history-bill .bill-where {
  grid-area: where;
  font-size: 11px; color: var(--text-muted);
  text-transform: capitalize;
}
.history-bill .bill-total {
  grid-area: total;
  font-size: 14px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  justify-self: end;
}
.history-bill .bill-when {
  grid-area: when;
  font-size: 10px; color: var(--text-soft);
  justify-self: end;
}
.history-bill .history-bill-members {
  padding-left: 14px;
  border-left: 3px solid var(--surface-3);
}
.history-bill.active .history-bill-members { border-left-color: var(--accent-bg); }
.history-bill .history-bill-members .history-row { background: var(--surface-2); }
.history-bill .history-bill-members .history-row:last-child { border-bottom: 0; }

/* Check linkage banner in the order detail */
.history-check-banner {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0 0;
  padding: 10px 12px;
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  border-radius: 8px;
}
.history-check-banner .ck-no {
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: var(--accent-700);
}
.history-check-banner .ck-meta { flex: 1; font-size: 12px; color: var(--accent-700); }
.history-check-banner .ck-total {
  font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent-700);
}

/* Combined check receipt — one round per section */
.check-round {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}
.check-round .check-round-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.check-round .check-round-head .cr-open {
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: var(--text);
  border-bottom: 1px solid transparent;
}
.check-round .check-round-head .cr-open:hover { border-bottom-color: var(--text); }
.check-round .check-round-head .cr-meta { flex: 1; font-size: 11px; color: var(--text-muted); }
.check-round .check-round-head strong { font-variant-numeric: tabular-nums; }
.check-round .history-line-list { padding: 10px; gap: 8px; }
.check-round .history-line { border: 0; background: transparent; padding: 4px; }
.history-line .ln-opts { color: var(--info); font-weight: 600; font-size: 11px; margin: 2px 0; }
.check-grand-total {
  margin-top: 14px;
  border: 1px solid var(--accent);
  background: var(--accent-bg);
}
.check-grand-total strong { color: var(--accent-700); font-size: 18px; }

.history-row {
  width: 100%;
  min-height: 72px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  text-align: left;
  border-bottom: 1px solid var(--border);
  background: transparent;
}

.history-row:hover { background: var(--surface-3); }
.history-row.active { background: var(--surface); box-shadow: inset 3px 0 0 var(--accent); }
.history-row b { display: block; font-family: var(--mono); font-size: 13px; }
.history-row small { display: block; margin-top: 3px; color: var(--text-muted); }
.history-row strong { font-variant-numeric: tabular-nums; }

.history-row em,
.history-status {
  align-self: center;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  line-height: 1;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Clickable client chip in the order header */
.history-client-chip {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px;
  padding: 5px 8px 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px; color: var(--text);
}
.history-client-chip:hover { background: var(--surface-2); border-color: var(--border-strong); }
.history-client-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.history-client-chip .nm { font-weight: 600; }
.history-client-chip .ph { font-family: var(--mono); color: var(--text-muted); }
.history-client-chip .chev { color: var(--text-muted); font-size: 14px; }

.history-row em.cooking,
.history-status.cooking { background: var(--warn-bg); border-color: var(--warn); color: var(--warn-strong); }
.history-row em.ready,
.history-status.ready { background: var(--info-bg); border-color: var(--info); color: var(--info); }
.history-row em.completed,
.history-status.completed { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-700); }

.order-history-detail {
  overflow-y: auto;
  padding: 20px;
  background: var(--bg);
}

.history-detail-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
/* hd-order soaks up the free space so the status (and client pill, when
   present) always pin to the right — even when there is no client. */
.history-detail-head .hd-order { flex: 0 0 auto; margin-right: auto; }

/* Compact client pill living in the header empty space, before the status */
.history-detail-head .hd-client {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px 8px 8px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface);
  max-width: 420px;
}
.history-detail-head .hd-client:hover { background: var(--surface-2); border-color: var(--border-strong); }
.history-detail-head .hd-client .avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  background: var(--surface-3); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
}
.history-detail-head .hd-client .hc-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.history-detail-head .hd-client .hc-name {
  font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.history-detail-head .hd-client .hc-sub {
  font-size: 12px; color: var(--text-muted); font-family: var(--mono);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.history-detail-head .hd-client .hc-go { font-size: 13px; font-weight: 600; color: var(--accent-700); white-space: nowrap; }

.history-detail-head span,
.history-meta-grid span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.history-detail-head h2 { margin: 4px 0 2px; font-family: var(--mono); }
.history-detail-head p { margin: 0; color: var(--text-muted); }

.history-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.history-meta-grid div,
.summary-box,
.production-card,
.stock-card,
.movement-list > div {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.history-meta-grid div { padding: 12px; }
.history-meta-grid strong { display: block; margin-top: 4px; font-size: 13px; }

.history-action-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.history-action-row button {
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
}

.history-action-row button:hover { background: var(--surface-2); color: var(--text); }
.history-action-row button.active { background: var(--text); border-color: var(--text); color: var(--surface); }
.history-action-row button:disabled { color: var(--text-soft); background: var(--surface-2); cursor: not-allowed; }

.history-line-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-line {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.history-line img,
.stock-card img,
.production-card img {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  object-fit: cover;
}

.history-line b { display: block; }
.history-line p { margin: 3px 0; color: var(--text-muted); }
.history-line small { color: var(--text-soft); }

.history-total-row {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 16px;
}

.warehouse-subscreen,
.split-content {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  padding: 20px;
  overflow: auto;
}

.warehouse-subscreen h2 { margin: 0 0 4px; }
.warehouse-subscreen p { margin: 0 0 14px; }

.stock-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.stock-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  padding: 12px;
}

.stock-title {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.stock-title span {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
}

.stock-card p { margin: 4px 0; font-weight: 700; }
.stock-card small { color: var(--text-muted); }
.stock-card.negative { border-color: var(--danger); }
.stock-card.attention { border-color: var(--warn); }
.danger { color: var(--danger) !important; }
.warning { color: var(--warn) !important; }

.summary-box {
  align-self: start;
  padding: 16px;
}

.summary-box b { display: block; margin-bottom: 6px; }
.summary-box p { margin: 0 0 12px; color: var(--text-muted); }

.production-card {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 18px;
  padding: 16px;
  align-self: start;
}

.production-card img {
  width: 160px;
  height: 160px;
}

.production-card h2 { margin: 0 0 6px; }
.production-card ul { margin: 12px 0; padding-left: 18px; color: var(--text-muted); }

/* ============================================================
   Prefab Production screen
   ============================================================ */
.production-panel { display: flex; flex-direction: column; min-height: 0; }
.production-toolbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.production-toolbar .prod-wh {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted);
}
.production-toolbar .prod-wh select {
  height: 32px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text);
  font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 500;
}
.production-toolbar .muted { font-size: 12px; }

.production-grid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  align-content: start;
}

.prod-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  gap: 12px;
}
.prod-card .pc-head {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 6px; margin: -6px;
  border: 0; border-radius: 8px;
  background: transparent; color: inherit; text-align: left;
  cursor: pointer;
  transition: background-color 80ms linear;
}
.prod-card .pc-head:hover { background: var(--surface-2); }
.prod-card .pc-head .pc-id { flex: 1; min-width: 0; }
.prod-card .pc-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.prod-card .pc-head .pc-sub { font-size: 12px; color: var(--text-muted); }
.prod-card .pc-head .pc-open {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 11px; font-weight: 600; color: var(--text-soft);
  flex: 0 0 auto; opacity: 0; transition: opacity 80ms linear;
}
.prod-card .pc-head:hover .pc-open { opacity: 1; color: var(--accent-700); }
.prod-card .pc-head .pc-open svg { width: 13px; height: 13px; }
.prod-card .pc-flag {
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px;
}
.prod-card .pc-flag.danger { background: var(--danger-bg); color: var(--danger); }

.prod-card .pc-recipe {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; background: var(--surface-2);
  display: flex; flex-direction: column; gap: 4px;
}
.prod-card .pc-recipe-h {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px;
}
.prod-card .pc-ing {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline;
  font-size: 13px;
}
.prod-card .pc-ing .ing-need { font-weight: 600; font-variant-numeric: tabular-nums; }
.prod-card .pc-ing .ing-have { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.prod-card .pc-ing.short .ing-name { color: var(--danger); }
.prod-card .pc-ing.short .ing-have { color: var(--danger); font-weight: 600; }
.prod-card .pc-norecipe {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; font: inherit; font-size: 12px; color: var(--text-muted); text-align: left;
  background: var(--surface-2); border: 1px dashed var(--border);
  border-radius: 8px; padding: 10px; cursor: pointer;
  transition: border-color 80ms linear, background 80ms linear;
}
.prod-card .pc-norecipe:hover { border-color: var(--accent); background: var(--accent-bg); }
.prod-card .pc-norecipe .pc-norecipe-txt { display: inline-flex; align-items: center; gap: 8px; }
.prod-card .pc-norecipe svg { flex: 0 0 auto; color: var(--text-soft); }
.prod-card .pc-norecipe .pc-norecipe-cta {
  display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
  font-weight: 600; color: var(--accent-700); white-space: nowrap;
}
.prod-card .pc-norecipe:hover .pc-norecipe-cta svg,
.prod-card .pc-norecipe .pc-norecipe-cta svg { color: var(--accent-700); }
:root[data-theme="dark"] .prod-card .pc-norecipe .pc-norecipe-cta,
:root[data-theme="dark"] .prod-card .pc-norecipe .pc-norecipe-cta svg { color: var(--accent); }

.prod-card .pc-controls {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.prod-card .pc-qty {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted);
}
.prod-card .pc-qty input {
  width: 84px; height: 34px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text);
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
  text-transform: none; letter-spacing: 0;
}
.prod-card .pc-qty .u { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.prod-card .pc-expiry {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.prod-card .pc-expiry svg { color: var(--text-soft); }

.prod-card .pc-produce {
  width: 100%; height: 42px; justify-content: center;
  font-size: 13px; font-weight: 600;
}
.prod-card .pc-produce:disabled { background: var(--disabled); color: var(--text-muted); border-color: var(--disabled); cursor: not-allowed; }
.prod-card .pc-warn {
  font-size: 11px; color: var(--warn-strong);
  background: var(--warn-bg); border-radius: 6px; padding: 6px 8px;
  text-align: center;
}

.prod-card .pc-batches {
  border-top: 1px solid var(--border); padding-top: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.prod-card .pc-batches-h {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.prod-card .pc-batch {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface-2);
}
.prod-card .pc-batch .pb-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.prod-card .pc-batch .pb-info b { font-size: 13px; font-variant-numeric: tabular-nums; }
.prod-card .pc-batch .pb-info small { font-size: 11px; color: var(--text-muted); }
.prod-card .pc-batch .pb-barcode {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  background: #fff; padding: 3px 5px; border-radius: 4px;
  border: 1px solid var(--border);
}
.prod-card .pc-batch .pb-barcode svg { display: block; height: 30px; width: auto; }
.prod-card .pc-batch .pb-show { flex: 0 0 auto; white-space: nowrap; }
.prod-card .pc-batch .iconbtn { flex: 0 0 auto; color: var(--text-muted); }
.prod-card .pc-batch .iconbtn:hover { background: var(--surface-3); color: var(--text); }

.movement-list {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.movement-list > div {
  min-height: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
}

.movement-list b { font-family: var(--mono); }
.movement-list span { color: var(--text-muted); }
.movement-list strong { font-variant-numeric: tabular-nums; }

/* ============================================================
   Actions History (stock movements) — filters + ledger
   ============================================================ */
/* A data table — let it use the width (was left-pinned at 940px, hugging the
   left of wide screens with dead space on the right). Wide cap + centered so
   it fills the screen but stays sane on an ultra-wide monitor. */
.movements-screen { display: flex; flex-direction: column; gap: 14px; padding: 4px 24px 40px; max-width: 1400px; margin: 0 auto; }
.mv-head h2 { margin: 0; font-size: 20px; }
.mv-head .muted { margin: 2px 0 0; font-size: 13px; }
.mv-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mv-search { display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); flex: 1 1 220px; min-width: 180px; }
.mv-search svg { color: var(--text-muted); flex: 0 0 auto; }
.mv-search input { flex: 1; border: 0; background: none; padding: 9px 0; font: inherit; color: var(--text); outline: none; }
.mv-filters .seg { display: inline-flex; background: var(--surface-2); padding: 3px; border-radius: 9px; gap: 2px; }
.mv-filters .seg-btn { padding: 6px 12px; border: 1px solid transparent; border-radius: 7px; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.mv-filters .seg-btn:hover { color: var(--text); }
.mv-filters .seg-btn.active { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.mv-wh-select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.mv-date { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.mv-date input { padding: 7px 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.mv-summary { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--text-muted); padding: 0 2px; }
.mv-summary .mv-sum-in { color: var(--accent-700); font-weight: 700; }
:root[data-theme="dark"] .mv-summary .mv-sum-in { color: var(--accent); }
.mv-summary .mv-sum-out { color: var(--danger); font-weight: 700; }
.mv-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.mv-row { display: grid; grid-template-columns: 128px 1fr minmax(120px, 1.2fr) 120px; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; border-top: 1px solid var(--border); }
.mv-list .mv-row:first-child { border-top: 0; }
.mv-row:hover { background: var(--surface-2); }
.mv-row.open { background: var(--surface-2); }
.mv-when { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mv-item { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-reason { font-size: 13px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-reason .mv-wh { font-size: 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }
.mv-row.open .mv-reason .mv-wh { background: var(--surface); }
.mv-delta { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.mv-delta.in { color: var(--accent-700); }
:root[data-theme="dark"] .mv-delta.in { color: var(--accent); }
.mv-delta.out { color: var(--danger); }
.mv-detail { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 20px; padding: 4px 14px 14px; background: var(--surface-2); border-top: 1px dashed var(--border); }
.mv-drow { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 3px 0; }
.mv-drow span { color: var(--text-muted); }
.mv-drow strong { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .movements-screen { padding-left: 8px; padding-right: 8px; }
  .mv-row { grid-template-columns: 1fr auto; grid-template-areas: "item delta" "reason reason" "when when"; gap: 3px 10px; }
  .mv-item { grid-area: item; }
  .mv-delta { grid-area: delta; }
  .mv-reason { grid-area: reason; }
  .mv-when { grid-area: when; }
}

@media (max-width: 980px) {
  .app { grid-template-columns: 180px 1fr; }
  .menu-view { grid-template-columns: 150px 1fr 320px; }
  .cfg { grid-template-columns: 1fr; }
  .cfg .details { display: none; }
  .orders-history-layout,
  .warehouse-subscreen,
  .split-content {
    grid-template-columns: 1fr;
  }
  .history-meta-grid { grid-template-columns: 1fr 1fr; }
  .item-row {
    grid-template-columns: 52px 1fr;
  }
  .item-actions {
    grid-column: 1 / -1;
    align-items: stretch;
    min-width: 0;
  }
}

/* ============================================================
   Theme toggle (moon / sun) in topbar
   ============================================================ */
.theme-toggle { color: var(--text-muted); }
.theme-toggle:hover { color: var(--text); }
.theme-toggle .ic.sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ic.moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ic.sun { display: inline-block; }

/* ============================================================
   Dark theme
   ============================================================ */
:root[data-theme="dark"] {
  --bg:         #0F0F11;
  --surface:    #18181B;
  --surface-2:  #1F1F23;
  --surface-3:  #2A2A30;
  --border:     #2E2E34;
  --border-strong: #3F3F46;
  --text:       #FAFAFA;
  --text-muted: #A1A1AA;
  --text-soft:  #71717A;
  --accent:     #22C55E;
  --accent-700: #16A34A;
  --accent-bg:  rgba(34, 197, 94, 0.18);
  --info:       #60A5FA;
  --info-bg:    rgba(96, 165, 250, 0.18);
  --danger:     #F87171;
  --danger-bg:  rgba(248, 113, 113, 0.18);
  --warn:       #FBBF24;
  --warn-bg:    rgba(251, 191, 36, 0.16);
  --warn-strong: #FCD34D;
  --disabled:   #3F3F46;
  --grid-dot:   #2E2E34;
  --ph-a:       #1F1F23;
  --ph-b:       #25252A;
  --ph-c:       #1F1F23;
  --ph-d:       #25252A;
  --accent-hover: #16A34A;
  --undo-hover: rgba(255, 255, 255, 0.08);
  --hint-fade:  rgba(0, 0, 0, 0);
  --ink-hover:  #E4E4E7;
  color-scheme: dark;
}

/* Pending banner reverse-tile reads against accent green */
:root[data-theme="dark"] .pending-banner { color: #0B1B0E; }
:root[data-theme="dark"] .pending-banner .undo { color: var(--accent-700); }

/* Item-row status arrows benefit from a touch more contrast */
:root[data-theme="dark"] .item-row .status[data-status="cooking"] .cur,
:root[data-theme="dark"] .item-row .meta .cook.st-cooking,
:root[data-theme="dark"] .table-tile.active .status,
:root[data-theme="dark"] .status-pill.st-cooking,
:root[data-theme="dark"] .cook-detail .det-head .order-note,
:root[data-theme="dark"] .detail-item .note,
:root[data-theme="dark"] .history-row em.cooking,
:root[data-theme="dark"] .history-status.cooking { color: var(--warn-strong); }

/* Forms blend better with surface background in dark mode */
:root[data-theme="dark"] .cfg .details .field input,
:root[data-theme="dark"] .cfg .details .field select,
:root[data-theme="dark"] .history-filter-bar input {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

:root[data-theme="dark"] input::placeholder { color: var(--text-soft); }

/* ============================================================
   Warehouse (rewritten)
   ============================================================ */
.warehouse {
  display: flex; flex-direction: column;
  height: 100%;
  background: var(--bg);
  min-height: 0;
}
.warehouse-header {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex: 0 0 auto;
}
.warehouse-header .spacer { flex: 1 1 auto; }
.warehouse-header .wh-select {
  display: flex; flex-direction: column; gap: 2px;
}
.warehouse-header .wh-select label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.warehouse-header .wh-select select {
  height: 32px; padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface);
  font-size: 13px; min-width: 220px;
}
.warehouse-header .wh-stat {
  display: flex; flex-direction: column;
  gap: 2px;
  padding: 4px 12px;
  border-left: 1px solid var(--border);
}
.warehouse-header .wh-stat .k {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.warehouse-header .wh-stat strong {
  font-size: 20px; font-variant-numeric: tabular-nums;
  color: var(--text);
}
.warehouse-header .wh-stat.negative strong { color: var(--danger); }
.warehouse-header .wh-stat.attention strong { color: var(--warn); }

.warehouse-tabs {
  display: flex; gap: 2px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex: 0 0 auto;
}
.warehouse-tabs .tab {
  height: 40px; padding: 0 16px;
  border: 0; background: transparent;
  font-size: 13px; font-weight: 500; color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.warehouse-tabs .tab[aria-pressed="true"] {
  color: var(--text); border-bottom-color: var(--text);
  font-weight: 600;
}

.warehouse-filter {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: nowrap;
  flex: 0 0 auto;
}
.warehouse-filter .spacer { flex: 1 1 auto; }
.warehouse-filter .chips {
  display: flex; gap: 4px;
}
/* Category chips take the leftover width and collapse overflow into a "More" menu. */
.warehouse-filter .cat-wrap {
  display: flex; align-items: center; gap: 4px;
  flex: 1 1 0; min-width: 0;
  padding-right: 12px;
  border-right: 1px solid var(--border);
}
/* The All-categories chip lives outside the clipping row so it is always fully shown. */
.warehouse-filter .cat-all { flex: 0 0 auto; }
.warehouse-filter .cat-chips {
  flex: 1 1 0; min-width: 0;
  overflow: hidden;
}
.warehouse-filter .filter-right {
  display: flex; align-items: center; gap: 16px;
  flex: 0 0 auto;
}
.warehouse-filter .cat-more { position: relative; flex: 0 0 auto; }
.warehouse-filter .cat-more[hidden] { display: none; }
.warehouse-filter .cat-more-btn { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.warehouse-filter .cat-more-btn .cnt { opacity: 0.6; font-variant-numeric: tabular-nums; }
.warehouse-filter .cat-more-btn svg { opacity: 0.6; }
/* Invisible bridge so moving the cursor onto the dropdown does not drop the hover. */
.warehouse-filter .cat-more::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 8px; }
.warehouse-filter .cat-more-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  display: none; flex-direction: column; gap: 2px;
  min-width: 190px; max-height: 300px; overflow-y: auto;
  padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}
.warehouse-filter .cat-more:hover .cat-more-pop,
.warehouse-filter .cat-more:focus-within .cat-more-pop { display: flex; }
.warehouse-filter .cat-more-pop .chip { width: 100%; justify-content: flex-start; text-align: left; }
.warehouse-filter .chip {
  height: 30px; padding: 0 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
  font-size: 13px; font-weight: 500; color: var(--text);
  white-space: nowrap;
  /* Never let a chip shrink below its label (the global `.chip { min-width: 0 }`
     flex reset was crushing Armenian names to 1–2 glyphs) — chips keep their
     natural width and the extras overflow into the "More (N)" menu instead. */
  flex: 0 0 auto;
  min-width: max-content;
}
.warehouse-filter .chip[aria-pressed="true"] {
  background: var(--text); color: var(--surface); border-color: var(--text);
}
.warehouse-filter .scope-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-muted);
}
.warehouse-filter .search {
  height: 32px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface);
  min-width: 220px;
  font-size: 13px;
}

.warehouse-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px;
}

.item-list {
  display: flex; flex-direction: column;
  gap: 8px;
}
.item-list.empty { padding: 32px; }
.item-list-body {
  display: flex; flex-direction: column;
  gap: 8px;
}
.item-list-head, .item-list .item-row {
  display: grid;
  /* Expiry column is 186px, not 170: the localized "Expired: 01 Aug 2026" label
     runs longer in Armenian/Russian and was losing its year to the ellipsis. */
  grid-template-columns: 48px minmax(0, 1fr) 140px 140px 120px 186px 96px;
  align-items: center;
  gap: 12px;
}
/* Count (stocktake) mode: expected / cost / counted-input replace the browsing
   columns; rows are static divs, not edit buttons. */
.item-list.counting .item-list-head,
.item-list.counting .item-row {
  grid-template-columns: 48px minmax(0, 1fr) 150px 130px 280px;
}
.item-list-head {
  padding: 0 12px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.item-list .item-row {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  text-align: left;
}
.item-list .item-row:hover { border-color: var(--border-strong); background: var(--surface-2); }
.item-list .item-row.selected { border-color: var(--text); }
.item-list .item-row.negative { border-left: 3px solid var(--danger); }
.item-list .item-row.attention { border-left: 3px solid var(--warn); }
.item-list .item-row.negative.attention { border-left-color: var(--danger); }
.item-list .item-row .img {
  width: 48px; height: 48px; border-radius: 6px;
  background-size: cover; background-position: center;
  background-color: var(--surface-2);
  border: 1px solid var(--border);
}
.item-list .item-row .info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.item-list .item-row .info .name { font-size: 14px; font-weight: 600; }
.item-list .item-row .info .meta {
  font-size: 11px; font-family: var(--mono); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.item-list .item-row .stock-col {
  display: flex; flex-direction: column; gap: 2px;
}
.item-list .item-row .stock-col .num { font-size: 15px; font-weight: 700; }
.item-list .item-row .stock-col .sub { font-size: 10px; color: var(--text-muted); }
.item-list .item-row .expiry-col {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.item-list .item-row .expiry-col .exp-label {
  font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.item-list .item-row .expiry-col .sub { font-size: 10px; color: var(--text-muted); }
.item-list .item-row .expiry-col.exp-empty .exp-label { color: var(--text-soft); font-weight: 500; }
.item-list .item-row .expiry-col.exp-none .exp-label { color: var(--text-muted); font-weight: 500; }
.item-list .item-row .expiry-col.exp-ok .exp-label { color: var(--text); }
.item-list .item-row .expiry-col.exp-soon .exp-label { color: var(--warn-strong); }
.item-list .item-row .expiry-col.exp-soon .sub { color: var(--warn); }
.item-list .item-row .expiry-col.exp-expired .exp-label { color: var(--danger); }
.item-list .item-row .expiry-col.exp-expired .sub { color: var(--danger); }
.item-list .item-row .badges { display: flex; gap: 4px; flex-wrap: wrap; justify-content: end; }
.item-list .item-row .badge {
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  padding: 2px 6px; border-radius: 999px;
}
.item-list .item-row .badge.negative { background: var(--danger-bg); color: var(--danger); }
.item-list .item-row .badge.attention { background: var(--warn-bg); color: var(--warn-strong); }

/* Categories pane */
.cat-pane { display: flex; flex-direction: column; gap: 12px; }
.cat-pane .cat-head {
  display: flex; align-items: center; justify-content: space-between;
}
.cat-pane .cat-head h3 { margin: 0; font-size: 16px; }
.cat-pane .cat-list { display: flex; flex-direction: column; gap: 4px; }
.cat-row {
  display: grid;
  grid-template-columns: 1fr 180px 100px 36px;
  align-items: center; gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 6px;
}
.cat-row input.cat-name {
  height: 32px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface);
}
.cat-row select {
  height: 32px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface);
}
.cat-row .usage { color: var(--text-muted); font-size: 12px; text-align: right; }

/* Item editor / modal */
.ie-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 160;
  padding: 24px;
}
.ie-panel {
  width: 100%; max-width: 880px;
  max-height: calc(100vh - 48px);
  background: var(--surface);
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.25);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.ie-panel.small { max-width: 560px; }
.ie-panel .ie-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex: 0 0 auto;
}
.ie-panel .ie-head .lbl {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.ie-panel .ie-head h3 { margin: 0; font-size: 18px; }
.ie-panel .ie-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  gap: 20px;
}
.ie-panel section h4 {
  margin: 0 0 12px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.ie-panel .grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.ie-panel .grid-2 label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted);
}
.ie-panel .grid-2 label.full { grid-column: 1 / -1; }
.ie-panel .grid-2 input,
.ie-panel .grid-2 select {
  height: 36px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface);
  font-size: 13px; color: var(--text);
  text-transform: none; letter-spacing: 0;
}
.ie-panel .ie-actions {
  display: flex; gap: 8px;
  padding-top: 4px;
}

/* Sticky footer: destructive action parked far left, primary save on the
   right, always visible no matter how far the body is scrolled. */
.ie-panel .ie-foot {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  /* Wrap rather than squeeze: Armenian/Russian button labels are wider than the
     English ones and were being shrunk until the text spilled out of the pill. */
  flex-wrap: wrap;
}
.ie-panel .ie-foot .btn { flex: 0 0 auto; } /* keep labels whole — long ones move the row to wrap instead */
.ie-panel .ie-foot .ie-save-state {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  min-width: 0; /* long labels (e.g. Armenian) wrap instead of squeezing the buttons */
}
.ie-panel .ie-foot .ie-save-state.dirty { color: var(--warn-strong); }
.ie-panel .ie-foot .ie-save-state.dirty .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--warn);
}
.ie-panel .ie-foot .ie-save-state.saved {
  color: var(--accent-700);
  animation: savedFlash 240ms ease-out;
}
.ie-panel .ie-foot .ie-save-state.saved svg { color: var(--accent); }
@keyframes savedFlash {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}
/* While there are unsaved edits, tint the footer so the Save call-to-action reads */
.ie-panel:has(.ie-save-state.dirty) .ie-foot { background: var(--warn-bg); border-top-color: var(--warn); }

/* Consumables editor */
.consumables-editor .ce-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.consumables-editor .ce-rows { display: flex; flex-direction: column; gap: 6px; }
/* Flex, not a fixed grid: a line carries a variable tail (process picker,
   prepared weight, replacement badge, ⋮) and the same editor renders in both
   the wide Warehouse pane and the narrow Studio inspector. A rigid column
   count spilled the buttons onto their own row in the narrow one. */
.consumables-editor .ce-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.consumables-editor .ce-row .combo { flex: 1 1 130px; min-width: 0; }
.consumables-editor .ce-row input[type="number"] { flex: none; width: 68px; }
.consumables-editor .ce-row .unit,
.consumables-editor .ce-row .ce-alt-badge,
.consumables-editor .ce-row .iconbtn { flex: none; }
.consumables-editor .ce-row .iconbtn { width: 26px; height: 26px; }
.consumables-editor .ce-row select,
.consumables-editor .ce-row input {
  height: 32px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); font-size: 12px;
}
.consumables-editor .ce-row .unit { color: var(--text-muted); font-size: 11px; }

/* Searchable combobox (ingredient picker) */
.combo { position: relative; min-width: 0; }
.combo .combo-field {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; height: 32px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 12px; text-align: left; cursor: pointer;
}
.combo .combo-field:hover { border-color: var(--border-strong); }
.combo .combo-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo .combo-value.placeholder { color: var(--text-soft); }
.combo .combo-chev { color: var(--text-muted); flex: 0 0 auto; display: inline-flex; }
.combo .combo-pop {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 8px;
  box-shadow: var(--shadow-modal);
  padding: 6px; display: flex; flex-direction: column; gap: 6px;
  overflow: hidden;
}
.combo .combo-pop[hidden] { display: none; }
.combo .combo-search {
  height: 32px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px;
}
.combo .combo-search { flex: 0 0 auto; }
.combo .combo-search:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.combo .combo-options { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.combo .combo-option {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border: 0; border-radius: 6px;
  background: transparent; color: var(--text);
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.combo .combo-option:hover { background: var(--surface-2); }
.combo .combo-option.selected { background: var(--accent-bg); color: var(--accent-700); font-weight: 600; }
.combo .combo-option[hidden] { display: none; }
.combo .combo-option .opt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo .combo-option .opt-unit { font-size: 11px; color: var(--text-muted); font-family: var(--mono); flex: 0 0 auto; }
.combo .combo-empty { padding: 10px; font-size: 12px; color: var(--text-muted); text-align: center; }
.combo .combo-empty[hidden] { display: none; }

/* Image upload next to the URL field */
.picture-section .image-input-row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end;
}
.picture-section .image-upload { display: flex; align-items: center; }
.picture-section .image-upload .btn { white-space: nowrap; }
.picture-section .upload-status {
  margin-top: 8px; font-size: 12px; color: var(--text-muted);
}
.picture-section .upload-status.err { color: var(--danger); }
.picture-section .upload-status[hidden] { display: none; }

/* Batches table */
.batches .b-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.batches-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.batches-table thead {
  background: var(--surface-2);
}
.batches-table th, .batches-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.batches-table th {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.batches-table .batch-row.expired { background: var(--warn-bg); }
.batches-table .batch-row.negative { background: var(--danger-bg); }
.batches-table .batch-row.negative td { color: var(--danger); }
.batches-table td.mono.expired { color: var(--warn); font-weight: 700; }
.batches-table td.actions {
  display: flex; gap: 4px;
  white-space: nowrap;
}

.iconbtn.danger { color: var(--danger); }
.iconbtn.danger:hover { background: var(--danger-bg); }

/* ============================================================
   Item icons (emoji | image | placeholder)
   ============================================================ */
.item-icon {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--border);
  flex: 0 0 auto;
  overflow: hidden;
  line-height: 1;
}
.item-icon.emoji { background: var(--surface-2); }
.item-icon.emoji-svg,
.item-icon.img {
  background-size: cover; background-position: center;
  background-color: var(--surface-2);
}
.item-icon.emoji-svg {
  background-size: 72%;
  background-repeat: no-repeat;
}
.item-icon.empty {
  background: repeating-linear-gradient(45deg, #EDEDF0 0 8px, #F8F8FA 8px 16px);
}

/* Item editor header icon */
.ie-panel .ie-head .ie-title {
  display: flex; align-items: center; gap: 12px;
}

/* Picture section: emoji chooser + image URL fallback */
.picture-section h4 {
  margin: 0 0 4px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.picture-section .muted { margin: 0 0 12px; font-size: 12px; }
.icon-chooser {
  display: flex; flex-direction: column; gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.icon-chooser .icon-preview {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
}
/* Preview doubles as the trigger that opens the picker */
.icon-preview-btn {
  position: relative;
  padding: 0; border: 0; background: transparent;
  cursor: pointer; border-radius: 10px;
}
.icon-edit-badge {
  position: absolute; right: -6px; bottom: -6px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--text); color: var(--surface);
  border: 2px solid var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.icon-preview-btn:hover .icon-edit-badge { background: #000; }
.icon-preview-emoji,
.icon-preview-img,
.icon-preview-empty {
  width: 96px; height: 96px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  background-repeat: no-repeat;
  background-position: center;
  display: flex; align-items: center; justify-content: center;
}
.icon-preview-btn:hover .icon-preview-emoji,
.icon-preview-btn:hover .icon-preview-img,
.icon-preview-btn:hover .icon-preview-empty { border-color: var(--border-strong); }
.icon-preview-emoji { background-size: 78%; }
.icon-preview-emoji.glyph { font-size: 56px; line-height: 1; }
.icon-preview-img { background-size: cover; }
.icon-preview-empty {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-soft);
  background: repeating-linear-gradient(45deg, #EDEDF0 0 8px, #F8F8FA 8px 16px);
}

/* Emoji picker panel — only rendered when the chooser is open */
.emoji-popover {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  overflow: hidden;
}
.emoji-popover-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 12px; font-weight: 600; color: var(--text-muted);
}
.emoji-popover-head .spacer { flex: 1 1 auto; }
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 40px);
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
  padding: 10px;
  align-content: start;
}
.emoji-grid .emoji-chip {
  width: 40px; height: 40px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px;
}
.emoji-grid .emoji-chip:hover { background: var(--surface-2); border-color: var(--border); }
.emoji-grid .emoji-chip.selected { border-color: var(--accent); background: var(--accent-bg); }
.emoji-grid .emoji-chip .chip-svg {
  width: 28px; height: 28px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.picture-section .image-url {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted);
}
.picture-section .image-url input {
  height: 36px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); font-size: 13px;
  text-transform: none; letter-spacing: 0;
}

/* POS menu tile emoji (SVG from pack, with text fallback) */
.item-tile .ph .ph-emoji-svg {
  display: block; width: 56px; height: 56px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.item-tile .ph .ph-emoji { font-size: 40px; line-height: 1; }

/* Cook screen emoji slots (SVG reuses cook-photo; text glyph fallback) */
.item-row .ico.cook-emoji {
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; line-height: 1;
  background: var(--surface-2);
}
.item-row .ico.cook-emoji::after { content: none; }
.detail-item .photo.emoji-svg {
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--surface-2);
}
.detail-item .photo.emoji {
  display: flex; align-items: center; justify-content: center;
  font-size: 72px; line-height: 1;
  background: var(--surface-2);
}

/* ============================================================
   Barcode scan bar + receiving mode
   ============================================================ */
.scan-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.scan-bar .scan-ico { color: var(--text-muted); display: inline-flex; }
.scan-bar .scan-input {
  height: 36px; flex: 0 1 360px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  font-family: var(--mono); font-size: 14px;
}
.scan-bar .scan-input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.scan-bar .scan-hint { font-size: 11px; color: var(--text-muted); }
.scan-bar .spacer { flex: 1 1 auto; }

/* Batch modal item facts strip */
.batch-item-facts {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding: 8px 12px; margin-bottom: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px; color: var(--text-muted);
}
.batch-item-facts .mono { font-family: var(--mono); display: inline-flex; align-items: center; gap: 4px; }
.batch-item-facts strong { color: var(--text); }

/* Receiving modal */
.receiving-scrim { z-index: 158; }
.receiving-panel { max-width: 760px; }
.receiving-scan {
  display: flex; align-items: center; gap: 10px;
  padding: 12px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent-bg);
  margin-bottom: 12px;
}
.receiving-scan .scan-ico { color: var(--accent-700); display: inline-flex; }
.receiving-scan .scan-input {
  height: 40px; flex: 1 1 auto;
  padding: 0 12px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--surface);
  font-family: var(--mono); font-size: 16px;
}
.receiving-scan .recv-wh {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted);
}
.receiving-scan .recv-wh select {
  height: 32px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  text-transform: none; letter-spacing: 0; font-size: 13px;
}
.recv-last {
  font-size: 12px; font-weight: 600;
  padding: 6px 10px; border-radius: 6px; margin-bottom: 12px;
}
.recv-last.known { background: var(--accent-bg); color: var(--accent-700); }
.recv-last.unknown { background: var(--warn-bg); color: #92400E; }

.recv-unknown { margin-bottom: 16px; }
.recv-unknown h4, .recv-lines h4 {
  margin: 0 0 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.recv-unknown-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--warn);
  background: var(--warn-bg);
  border-radius: 6px; margin-bottom: 6px;
}
.recv-unknown-row .mono { font-family: var(--mono); font-weight: 700; }
.recv-unknown-row .x-count { font-family: var(--mono); color: #92400E; }
.recv-unknown-row .spacer { flex: 1 1 auto; }

.recv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.recv-table thead { background: var(--surface-2); }
.recv-table th, .recv-table td {
  padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left;
}
.recv-table th {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.recv-table td input {
  height: 32px; width: 100%; max-width: 120px;
  padding: 0 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); font-size: 13px;
}
.recv-item { display: flex; align-items: center; gap: 10px; }
.recv-item-name { display: flex; flex-direction: column; font-weight: 600; }
.recv-item-name small {
  font-weight: 400; font-size: 10px; font-family: var(--mono);
  text-transform: uppercase; color: var(--text-muted);
}
.recv-row.pulse { animation: recvPulse 0.6s ease-out; }
@keyframes recvPulse {
  from { background: var(--accent-bg); }
  to { background: transparent; }
}
.receiving-foot { border-top: 1px solid var(--border); padding-top: 12px; }

/* ============================================================
   Item barcodes (multiple per item) + unknown-barcode resolve
   ============================================================ */
.barcode-list { margin: 4px 0 4px; }
.barcode-list .barcode-label {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 6px;
}
.barcode-list .barcode-label .muted { font-weight: 400; text-transform: none; letter-spacing: 0; }
.barcode-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.barcode-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-2);
  font-family: var(--mono); font-size: 12px;
}
.barcode-chip .rm {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--text-muted);
}
.barcode-chip.internal { border-color: var(--accent); background: var(--accent-bg); }
.barcode-chip .tag {
  font-size: 8px; font-weight: 800; letter-spacing: 0.06em;
  color: var(--accent-700);
  padding: 1px 5px; border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--accent);
}
.barcode-chip .rm:hover { background: var(--danger-bg); color: var(--danger); }
.barcode-add { display: flex; gap: 8px; align-items: center; }
.barcode-add input { flex: 1 1 auto; min-width: 0; }
/* The scan field absorbs the slack; the button never shrinks. Russian
   ("Сгенерировать") is more than twice the width of "Generate" and was being
   squeezed until the label spilled past the pill. */
.barcode-add .btn { flex: 0 0 auto; white-space: nowrap; }
.barcode-empty { font-size: 12px; color: var(--text-soft); }
.barcode-add input {
  height: 34px; width: 100%;
  padding: 0 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface);
  font-family: var(--mono); font-size: 13px;
}

.btn.block { width: 100%; justify-content: center; }
.resolve-scrim { z-index: 162; }
.resolve-or {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted);
}
.resolve-or::before, .resolve-or::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--border);
}
.resolve-search {
  height: 36px; width: 100%;
  padding: 0 10px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); font-size: 13px;
}
.resolve-list {
  display: flex; flex-direction: column; gap: 4px;
  max-height: 280px; overflow-y: auto;
}
.resolve-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); text-align: left;
}
.resolve-item:hover { border-color: var(--border-strong); background: var(--surface-2); }
.resolve-item-name { display: flex; flex-direction: column; font-weight: 600; flex: 1 1 auto; }
.resolve-item-name small {
  font-weight: 400; font-size: 10px; font-family: var(--mono);
  text-transform: uppercase; color: var(--text-muted);
}
.resolve-item .resolve-add { color: var(--accent-700); display: inline-flex; }

/* ============================================================
   Settings screen
   ============================================================ */
.settings {
  height: 100%; overflow-y: auto;
  padding: 24px 28px;
  /* Was 880px — cramped into a narrow column on any normal desktop, leaving
     most of the screen empty. Sections themselves don't get wider (their
     content still reads left-to-right at a sane line length), there's just
     more breathing room around them. */
  max-width: 1180px;
}
.settings-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
}
.settings-head h2 { margin: 0; font-size: 20px; }
.settings-head .loc-select {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted);
}
.settings-head .loc-select select {
  height: 34px; min-width: 220px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); font-size: 13px;
  text-transform: none; letter-spacing: 0;
}
.settings-section {
  padding: 20px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface);
}
.settings-section h3 { margin: 0 0 4px; font-size: 15px; }
.settings-section .muted { margin: 0 0 16px; font-size: 13px; }

/* My Plan (read-only subscription summary) */
.plan-block { margin-top: 16px; max-width: 420px; }
.plan-block .plan-sub {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); margin-bottom: 8px;
}
.plan-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.plan-chip {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border);
}
.plan-chip.on { background: var(--accent-bg); color: var(--accent-700); border-color: transparent; }
:root[data-theme="dark"] .plan-chip.on { color: var(--accent); }
.plan-chip.ok { background: var(--accent-bg); color: var(--accent-700); border-color: transparent; }
.plan-chip.warn { background: var(--warn-bg); color: var(--warn-strong); border-color: transparent; }
.plan-section .plan-over { color: var(--warn-strong); }
.plan-contact { display: flex; flex-direction: column; gap: 3px; }
.plan-contact .pc-name { font-weight: 700; font-size: 14px; }
.plan-contact .pc-line { color: var(--accent-700); text-decoration: none; font-size: 13px; width: fit-content; }
.plan-contact .pc-line:hover { text-decoration: underline; }
:root[data-theme="dark"] .plan-contact .pc-line { color: var(--accent); }
.plan-contact .pc-note { margin-top: 2px; font-size: 12px; }
.currency-row { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.currency-select { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
.currency-select select,
.currency-select input {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font-size: 14px; min-width: 160px;
}
.currency-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); padding-bottom: 8px; }
.currency-check input { width: 16px; height: 16px; }
.currency-preview { font-size: 13px; color: var(--muted); padding-bottom: 8px; }
.currency-preview strong { color: var(--text); font-size: 15px; }
.paper-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.paper-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface);
  min-height: 130px; justify-content: center;
}
.paper-card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.paper-card.active { border-color: var(--accent); background: var(--accent-bg); }
.paper-card .paper-shape {
  display: block;
  border: 1.5px dashed var(--text-muted);
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, #0000 0 3px, var(--text-soft) 3px 4px);
  opacity: 0.7;
}
.paper-card.active .paper-shape { border-color: var(--accent); opacity: 0.9; }
.paper-card .pl { font-size: 12px; font-weight: 600; text-align: center; color: var(--text); }
.custom-size {
  display: flex; align-items: end; gap: 12px;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.custom-size label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted);
}
.custom-size input {
  height: 34px; width: 110px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); font-size: 13px;
}
.current-paper { margin: 16px 0 0; font-size: 13px; color: var(--text-muted); }

/* Delivery origin + zones (Settings › Sales) */
.dz-origin { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.dz-addr { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.dz-addr input { padding: 9px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; }
.dz-latlng { display: flex; gap: 10px; }
.dz-latlng label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.dz-latlng input { padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font: inherit; }
.dz-origin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dz-status { font-size: 12px; }
.dz-warn { font-size: 13px; color: var(--warn-strong); background: var(--warn-bg); border: 1px solid var(--warn-bg); border-radius: 8px; padding: 8px 12px; margin: 0 0 12px; max-width: 520px; }
.dz-zones { max-width: 520px; display: flex; flex-direction: column; gap: 6px; }
.dz-zone-head, .dz-zone-row { display: grid; grid-template-columns: 1fr 100px 100px 34px; gap: 8px; align-items: center; }
.dz-zone-head { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); padding: 0 2px; }
.dz-zone-row input { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; min-width: 0; }
.dz-zone-actions { display: flex; gap: 8px; margin-top: 10px; }
.dz-summary { margin-top: 12px; font-size: 12.5px; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; max-width: 520px; }

/* Order-confirmation sound + device picker */
.oc-sound { margin-top: 10px; }
.oc-sound-hint { margin: 2px 0 0 26px; font-size: 12px; max-width: 420px; }
.oc-devices { margin-top: 14px; max-width: 420px; }
.oc-devices .oc-dev-head { font-size: 12px; font-weight: 700; color: var(--text); }
.oc-devices .small { font-size: 12px; margin: 2px 0 8px; }
.oc-dev-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.oc-dev { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }

/* Live sample-label preview (Settings › Printing) */
.label-preview-wrap { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.label-preview-wrap .lp-caption { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
/* The label itself is always a physical white sticker with black ink — fixed
   colors on purpose (it is a print artifact, not themed UI). */
.lblp {
  background: #fff; color: #111; border: 1px solid #111; border-radius: 2px;
  padding: 2mm 2.5mm; overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.14); font-family: ui-sans-serif, system-ui, sans-serif;
}
.lblp .lblp-name { font-weight: 700; line-height: 1.1; }
.lblp .lblp-kind { letter-spacing: 0.06em; text-transform: uppercase; color: #444; margin-bottom: 1mm; }
.lblp .lblp-bc { text-align: center; margin: 1mm 0; }
.lblp .lblp-bc svg { max-width: 100%; height: auto; }
.lblp .lblp-row { display: flex; justify-content: space-between; padding: 0.4mm 0; border-top: 1px dashed #bbb; }
.lblp .lblp-row span { color: #555; }

/* Units of measure */
.units-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.unit-group {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}
.unit-group .ug-head {
  padding: 8px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.unit-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 10px; align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.unit-row:last-child { border-bottom: 0; }
.unit-row .us { font-weight: 700; font-family: var(--mono); font-size: 13px; }
.unit-row .un { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unit-row .uc { font-size: 11px; color: var(--text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.unit-row .iconbtn { color: var(--text-soft); }
.unit-row .iconbtn:hover { color: var(--danger); background: var(--danger-bg); }

.unit-add {
  display: flex; flex-wrap: wrap; align-items: end; gap: 8px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}
.unit-add input,
.unit-add select {
  height: 34px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text);
  font-size: 13px;
}
.unit-add input[data-unit-new="symbol"] { width: 130px; }
.unit-add input[data-unit-new="name"] { width: 150px; }
.unit-add .unit-factor {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted);
}
.unit-add .unit-factor input { width: 90px; }
.unit-add .btn { height: 34px; }

/* ============================================================
   Clients screen
   ============================================================ */
.clients {
  height: 100%; min-height: 0;
  display: grid; grid-template-columns: 340px 1fr;
}
.clients-list-pane {
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface);
}
.clients .cl-head {
  display: flex; gap: 8px; align-items: center;
  padding: 12px; border-bottom: 1px solid var(--border);
}
.clients .cl-search {
  flex: 1 1 auto; height: 34px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); font-size: 13px;
}
.clients .cl-list { flex: 1 1 auto; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.clients .cl-list .pad { padding: 16px; }
.client-row {
  display: grid; grid-template-columns: 36px 1fr auto auto; gap: 10px; align-items: center;
  padding: 8px 10px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; text-align: left; width: 100%;
}
.client-row:hover { background: var(--surface-2); }
.client-row.active { background: var(--accent-bg); border-color: var(--accent); }
.client-row .avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-3); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
}
.client-row .info { min-width: 0; display: flex; flex-direction: column; }
.client-row .info .name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-row .info .sub { font-size: 11px; color: var(--text-muted); font-family: var(--mono); }
.client-row .count { text-align: right; }
.client-row .count .n { font-size: 15px; font-weight: 700; display: block; }
.client-row .count .k { font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.src.glovo {
  font-size: 9px; font-weight: 800; letter-spacing: 0.04em;
  color: #fff; background: #FF8000; padding: 2px 6px; border-radius: 999px;
}

/* Brand markers — one client, a chip per brand they have ordered from. */
.brand-marks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.brand-marks .bmark {
  font-size: 10px; font-weight: 600; line-height: 1.4;
  padding: 1px 7px; border-radius: 999px;
  background: var(--surface-3); color: var(--text-muted);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.brand-marks.lg { margin-top: 8px; }
.brand-marks.lg .bmark { font-size: 11px; padding: 2px 9px; }

.client-detail { padding: 24px 28px; overflow-y: auto; min-height: 0; }
.client-detail.empty { display: flex; align-items: center; justify-content: center; }
.client-detail .cd-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.client-detail .cd-id { display: flex; gap: 12px; align-items: center; }
.client-detail .avatar.lg {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--surface-3); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 22px;
}
.client-detail .cd-id h3 { margin: 0; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.client-detail .cd-actions { display: flex; gap: 6px; }
.client-detail .cd-contact {
  margin: 20px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.client-detail .cd-contact .row { display: flex; flex-direction: column; gap: 2px; }
.client-detail .cd-contact .row span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.client-detail .cd-contact .row strong { font-size: 14px; }
.client-detail .cd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.client-detail .cd-stats .stat {
  padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.client-detail .cd-stats .v { font-size: 20px; font-weight: 700; display: block; }
.client-detail .cd-stats .k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.client-detail .cd-orders h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.cd-order {
  display: grid; grid-template-columns: auto 1fr auto auto auto 14px; gap: 12px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px;
  background: var(--surface); text-align: left; width: 100%;
}
.cd-order:hover { background: var(--surface-2); border-color: var(--border-strong); }
.cd-order .num { font-weight: 700; font-size: 13px; }
.cd-order .meta { font-size: 12px; color: var(--text-muted); }
.cd-order .when { font-size: 12px; color: var(--text-muted); }
.cd-order .status { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); }
.cd-order .status.st-completed { background: var(--accent-bg); color: var(--accent-700); }
.cd-order .status.st-cooking { background: var(--warn-bg); color: #92400E; }
.cd-order .total { font-weight: 700; }
.cd-order .chev { color: var(--text-muted); font-size: 14px; }

/* Order-history client assign row */
.history-client-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; margin-top: 4px;
}
.history-client-row .lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.history-client-row select {
  flex: 1 1 auto; height: 34px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 13px;
}

/* ============================ Waste tab ============================ */
.waste-pane { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.waste-pane .card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px;
}
.waste-pane .card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.waste-pane .card-h h3 { margin: 0; font-size: 14px; }
.waste-pane .pad { padding: 8px 2px; }
.waste-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 900px) { .waste-top { grid-template-columns: 1fr; } }

.waste-record .muted { margin: 0 0 12px; font-size: 12px; }
.wr-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.wr-field select, .wr-field input {
  height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); font-size: 13px; color: var(--text); font-weight: 400;
}
.wr-field .wr-label { display: block; }
.wr-field .opt { color: var(--text-soft); font-weight: 500; text-transform: none; }
.wr-field .chips, .waste-pane .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.waste-pane .chip {
  font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer;
}
.waste-pane .chip:hover { background: var(--surface-2); }
.waste-pane .chip.on { background: var(--text); color: var(--surface); border-color: var(--text); }
.btn.block { width: 100%; justify-content: center; }
.wr-avail { margin: 10px 0 0; font-size: 12px; }

.wa-list { display: flex; flex-direction: column; }
.wa-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.wa-row:last-child { border-bottom: 0; }
.wa-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wa-info b { font-size: 13px; }
.wa-info small { font-size: 11px; color: var(--text-muted); }
.wa-exp { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.wa-exp.expired { background: var(--danger-bg); color: var(--danger); }
.wa-exp.soon { background: var(--warn-bg); color: var(--warn); }

.wl-list { display: flex; flex-direction: column; }
.wl-row {
  display: grid; grid-template-columns: minmax(0,1.4fr) 70px 110px minmax(0,1.6fr) 80px 70px;
  align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.wl-row:last-child { border-bottom: 0; }
.wl-item { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-qty { color: var(--text-muted); }
.cat-tag {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-3); color: var(--text-muted);
}
.cat-tag.lost { background: var(--warn-bg); color: var(--warn); }
.wl-note { color: var(--text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-val { font-weight: 600; text-align: right; }
.wl-when { color: var(--text-soft); font-size: 11px; text-align: right; white-space: nowrap; }
@media (max-width: 760px) {
  .wl-row { grid-template-columns: minmax(0,1fr) 60px 90px 70px; }
  .wl-note, .wl-when { display: none; }
}

/* ============================ Dashboard ============================ */
.dashboard-panel { display: flex; flex-direction: column; overflow: hidden; }
.dash-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.dash-sections { display: flex; gap: 6px; }
.dash-tab {
  padding: 6px 14px; border-radius: 8px; border: 1px solid transparent; background: none;
  font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.dash-tab:hover { background: var(--surface-2); }
.dash-tab.active { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.dash-note { font-size: 11px; color: var(--text-soft); }
.dash-body { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }

.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.kpi-v { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.kpi-l { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-top: 2px; }
.kpi-s { font-size: 11px; color: var(--text-soft); margin-top: 4px; }
.kpi.warn .kpi-v { color: var(--warn); }
.kpi.danger .kpi-v { color: var(--danger); }

.dash-jump {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px;
}
.dash-jump:hover { background: var(--surface-2); border-color: var(--border-strong, var(--text-soft)); }
.dash-jump .dj-l { display: flex; align-items: center; gap: 12px; }
.dash-jump .dj-ic {
  width: 34px; height: 34px; border-radius: 8px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; background: var(--danger-bg); color: var(--danger);
}
.dash-jump .dj-l b { display: block; font-size: 14px; }
.dash-jump .dj-l small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.dash-jump .dj-go { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--accent-700); white-space: nowrap; }

.dash-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px) { .dash-two { grid-template-columns: 1fr; } }
.dashboard-panel .card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.dashboard-panel .card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dashboard-panel .card-h h3 { margin: 0; font-size: 14px; }
.dashboard-panel .pad { padding: 8px 2px; }

.bar-row { display: grid; grid-template-columns: minmax(90px, 130px) 1fr 64px; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; }
.bar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--danger); }
.bar-val { text-align: right; color: var(--text-muted); }

.trend { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding-top: 8px; }
.trend-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.trend-bar { width: 60%; max-width: 38px; min-height: 3px; border-radius: 4px 4px 0 0; background: var(--danger); margin-top: auto; }
.trend-day { font-size: 11px; color: var(--text-muted); }
.trend-val { font-size: 10px; color: var(--text-soft); }

/* Dashboard hub: report category cards */
.dash-section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 4px 0 -4px; }
.dash-cards { display: flex; flex-direction: column; gap: 8px; }
.dash-card { display: flex; flex-direction: row; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); cursor: pointer; font: inherit; color: var(--text); }
.dash-card:hover { background: var(--surface-2); border-color: var(--border-strong, var(--text-soft)); }
.dash-card .dc-ic { flex: 0 0 auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--surface-2); color: var(--text-muted); }
.dash-card.danger .dc-ic { background: var(--danger-bg); color: var(--danger); }
.dash-card .dc-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dash-card .dc-title { display: block; font-size: 15px; font-weight: 700; }
.dash-card .dc-desc { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-card .dc-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.dash-card .dc-stat { font-size: 13px; font-weight: 600; }
.dash-card .dc-go { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--accent-700); white-space: nowrap; }

/* Dashboard category detail + back */
.dash-back { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; padding: 4px 10px 4px 4px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.dash-back:hover { color: var(--text); }
.dash-back svg { transform: rotate(180deg); }
.dash-detail-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.dash-detail-head h2 { margin: 0; font-size: 20px; }
.dash-detail-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Export menu (native details disclosure). */
.dash-export { position: relative; }
.dash-export-btn {
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--text);
}
.dash-export-btn:hover { background: var(--surface-2); }
/* The export picker: a checkbox per report section + a Raw toggle. */
.dash-export-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  width: 264px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}
.dash-export-pop .dee-head { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.dash-export-pop .dee-list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }
.dash-export-pop .dee-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 6px; border-radius: 7px; font-size: 13px; cursor: pointer; }
.dash-export-pop .dee-item:hover { background: var(--surface-2); }
.dash-export-pop .dee-item input { margin-top: 2px; width: 15px; height: 15px; accent-color: var(--accent); flex: 0 0 auto; }
.dash-export-pop .dee-item em { display: block; font-style: normal; font-size: 11px; color: var(--text-muted); }
.dash-export-pop .dee-raw { border-top: 1px solid var(--border); margin-top: 2px; padding-top: 8px; }
.dash-export-pop .dee-empty { font-size: 12px; color: var(--text-muted); padding: 4px 6px; }
.dash-export-pop .dee-actions { display: flex; justify-content: flex-end; }

/* Dashboard date-range filter */
.dash-filter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dash-filter .seg { display: inline-flex; background: var(--surface-2); padding: 3px; border-radius: 9px; gap: 2px; }
.dash-filter .seg-btn { padding: 5px 12px; border: 1px solid transparent; border-radius: 7px; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.dash-filter .seg-btn:hover { color: var(--text); }
.dash-filter .seg-btn.active { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.dash-filter .date-range { display: inline-flex; align-items: center; gap: 6px; }
.dash-filter .date-range input { height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font: inherit; font-size: 13px; color: var(--text); }
.dash-filter .date-range .sep { color: var(--text-soft); }
.dash-filter .dash-range-label { font-size: 12px; color: var(--text-muted); }

/* Dashboard data table */
.dash-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dash-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); padding: 6px 10px; border-bottom: 1px solid var(--border); }
.dash-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.dash-table tr:last-child td { border-bottom: 0; }
.dash-table .r { text-align: right; }
.dash-table .pct { font-weight: 600; }
.dash-table .pct.low { color: var(--danger); }
.dash-table .pct.high { color: var(--accent-700); }

/* Sales / kitchen trend bars use the accent (waste stays red) */
/* Green-bar variant. NOT `.trend.sales` — that collided with the Sales
   Terminal root class `.sales` (flex-direction:column), which silently turned
   every one of these charts on its side. Keep trend modifiers prefixed. */
.trend.trend-accent .trend-bar, .trend.hours .trend-bar { background: var(--accent); }
.trend.hours { gap: 4px; }
.trend.hours .trend-day { font-size: 9px; }

/* Day × hour order heatmap (customers) */
.heatmap { display: flex; flex-direction: column; gap: 3px; overflow-x: auto; }
.heatmap .hm-row { display: grid; grid-template-columns: 38px repeat(24, minmax(10px, 1fr)); gap: 3px; align-items: center; }
.heatmap .hm-wd { font-size: 11px; color: var(--text-muted); }
.heatmap .hm-h { font-size: 9px; color: var(--text-soft); text-align: left; }
.heatmap .hm-cell { height: 16px; border-radius: 3px; background: var(--surface-2); }
.heatmap .hm-cell.on { background: var(--accent); }

/* ===================== Floor Plan editor ===================== */
/* The .cfg grid reserves a 320px right column for the System Configurator
   detail panel. The Floor Plan has no such panel, so collapse to one column
   and let the canvas fill the full width. */
.cfg.floor-editor { grid-template-columns: 1fr; }
.floor-editor .canvas-toolbar.floor-toolbar {
  height: auto; min-height: 62px; padding: 10px 18px; gap: 12px; align-items: center;
  flex-wrap: wrap; row-gap: 10px; overflow: visible;
}
/* Keep the action cluster together and pinned right — it wraps to its own line
   instead of clipping the Save button when the toolbar runs out of width. */
.floor-toolbar .ft-right { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.floor-toolbar .ft-context {
  display: flex; flex-direction: column; gap: 1px;
  padding-right: 14px; margin-right: 2px; border-right: 1px solid var(--border);
}
.floor-toolbar .ft-title { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.25; white-space: nowrap; }
.floor-toolbar .ft-meta { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.floor-toolbar .ft-selection {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px 4px 12px; border-left: 1px solid var(--border);
}
.floor-toolbar .ft-addrow { display: inline-flex; align-items: center; gap: 8px; }
.floor-toolbar .ft-sel-label { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
.floor-toolbar .seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; }
.floor-toolbar .seg-btn {
  border: 0; background: transparent; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  padding: 4px 11px; border-radius: 6px; line-height: 1.4;
}
.floor-toolbar .seg-btn:hover { color: var(--text); }
.floor-toolbar .seg-btn.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.10); }
.floor-toolbar .btn.danger.ghost { padding: 7px 9px; background: transparent; border-color: var(--border); color: var(--danger); }
.floor-toolbar .btn.danger.ghost:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: var(--danger); }
.floor-toolbar .ft-hint { font-size: 12px; color: var(--text-soft); white-space: nowrap; }
/* The hint is the first thing to drop when space is tight. */
@media (max-width: 1240px) { .floor-toolbar .ft-hint { display: none; } }
@media (max-width: 1024px) { .floor-toolbar .ft-meta { display: none; } }
.floor-toolbar .ft-dirty { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--warn); white-space: nowrap; }
.floor-toolbar .ft-dirty .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); }
/* Starting size only — canvas-kit grows the inline width/height to cover the
   tables, so a table dragged past the edge keeps its dotted ground. */
.canvas.floor-canvas { width: 2400px; height: 1600px; min-width: 2400px; min-height: 1600px; }
.table-node {
  position: absolute; box-sizing: border-box;
  background: var(--surface); border: 2px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--text); cursor: grab; user-select: none;
}
.table-node.rect { border-radius: 10px; }
.table-node.circle { border-radius: 50%; }
.table-node:hover { border-color: var(--text-soft); }
.table-node.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); z-index: 2; }
.table-node .tn-num { font-size: 17px; font-variant-numeric: tabular-nums; pointer-events: none; }
/* A named table ("Bar", "Takeaway") shows its name with the stable number
   beneath it — staff who go by number can still find the place. */
.table-node .tn-named {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 0; max-width: 100%; padding: 0 6px; pointer-events: none;
}
.table-node .tn-name {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; line-height: 1.2;
}
.table-node .tn-sub { font-size: 11px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* Rename field in the floor-plan selection toolbar */
.floor-toolbar .ft-sel-name { display: flex; min-width: 0; }
.floor-toolbar .ft-sel-name input {
  width: 150px; height: 30px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font-size: 13px; font-family: inherit;
}
.floor-toolbar .ft-sel-name input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-bg); }
.table-node.delivery { border-style: dashed; border-color: var(--accent); background: var(--accent-bg); }
.table-node.delivery .tn-deliv { font-size: 13px; font-weight: 700; color: var(--accent-700); display: inline-flex; align-items: center; gap: 6px; pointer-events: none; }
.table-node.delivery.selected { box-shadow: 0 0 0 3px var(--accent-bg); }
.table-node.staff { border-style: dashed; border-color: var(--staff); background: var(--staff-bg); }
.table-node.staff .tn-deliv { font-size: 12px; font-weight: 700; color: var(--staff); display: inline-flex; align-items: center; gap: 5px; pointer-events: none; }
.table-node.staff.selected { box-shadow: 0 0 0 3px var(--staff-bg); }
.table-node .tn-resize {
  position: absolute; right: -7px; bottom: -7px; width: 15px; height: 15px;
  background: var(--accent); border: 2px solid var(--surface); border-radius: 3px; cursor: nwse-resize;
}
.floor-empty { position: absolute; left: 40px; top: 40px; color: var(--text-muted); font-size: 13px; }

/* Floor bar — the editor floor tabs (switch / add / rename / delete) */
.floor-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 18px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.floor-bar .fb-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-right: 4px; }
.floor-bar .fb-tab {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); background: var(--surface-2); border-radius: 9px;
  padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--text-soft); cursor: pointer;
}
.floor-bar .fb-tab:hover { color: var(--text); border-color: var(--border-strong); }
.floor-bar .fb-tab.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-700); }
.floor-bar .fb-count {
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px;
}
.floor-bar .fb-tab.on .fb-count { border-color: var(--accent); }
.floor-bar .fb-rename {
  width: 160px; padding: 6px 10px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--accent); border-radius: 9px; background: var(--surface);
}
/* Floor actions collapsed into a single ⋮ menu (add / rename / delete) */
.floor-bar .fb-menu-wrap { position: relative; display: inline-flex; margin-left: 2px; }
.floor-bar .fb-menu-btn { padding: 6px 8px; }
.floor-bar .fb-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 190px;
  display: flex; flex-direction: column; padding: 5px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}
.floor-bar .fb-menu-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border: 0; background: transparent; border-radius: 7px;
  font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; text-align: left; white-space: nowrap;
}
.floor-bar .fb-menu-item:hover { background: var(--surface-2); }
.floor-bar .fb-menu-item.danger { color: var(--danger); }
.floor-bar .fb-menu-item.danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.floor-toolbar .ft-station-floor { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.floor-toolbar .ft-station-floor select { padding: 5px 8px; font-size: 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); }

/* Configurator location → floor link */
.cfg .details .floor-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cfg .details .floor-link-count { font-size: 13px; font-weight: 600; }
.cfg .details .floor-link-hint { margin: 8px 2px 0; font-size: 12px; color: var(--text-muted); }

/* Configurator location → floor components (Unity-style attachments) */
.cfg .details .floor-components { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 10px; }
.cfg .details .floor-component { display: flex; align-items: center; gap: 8px; }
.cfg .details .floor-component input { flex: 1; min-width: 0; padding: 7px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.cfg .details .floor-component .meta { flex: 0 0 auto; font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* Sales Terminal floor filter chips */
.floor-picker { display: inline-flex; gap: 4px; margin: 0 0 16px; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.floor-picker .floor-chip {
  border: 0; background: transparent; cursor: pointer; border-radius: 7px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap;
}
.floor-picker .floor-chip:hover { color: var(--text); }
.floor-picker .floor-chip.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.10); }

/* ===================== Sales Terminal: view toggle ===================== */
.place-view-toggle { display: inline-flex; gap: 4px; margin: 0 0 16px; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.place-view-toggle button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border: 0; border-radius: 7px; background: none;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.place-view-toggle button:hover { color: var(--text); }
.place-view-toggle button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }

/* The place picker fills the work area so Floor/List do not force long scroll. */
.sales .step-body { display: flex; flex-direction: column; }
/* View switcher parks in the top-right corner of the work area. */
.sales .step-body > .place-view-toggle { flex: 0 0 auto; align-self: flex-end; }

/* List view: compact delivery line + narrow one-line table rows, full width. */
.places-list { display: flex; flex-direction: column; gap: 8px; }
.delivery-line {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); cursor: pointer; text-align: left; font-family: inherit; color: var(--text);
}
.delivery-line:hover { background: var(--surface-2); }
.delivery-line .dl-ic { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 7px; background: var(--surface-3); color: var(--text-muted); display: flex; align-items: center; justify-content: center; }
.delivery-line .dl-main { display: flex; flex-direction: column; line-height: 1.25; }
.delivery-line .dl-main b { font-size: 14px; }
.delivery-line .dl-main small { font-size: 11px; color: var(--text-muted); }
.delivery-line .dl-go { margin-left: auto; color: var(--text-soft); }
.active-orders-list.compact { gap: 4px; }
.list-tables-head { margin: 10px 2px 2px; }
.tables-list { display: flex; flex-direction: column; gap: 4px; }
/* Delivery now sits BELOW the tables in list view — a top divider keeps it a
   distinct section rather than looking like another table row. */
.list-delivery { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.table-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); cursor: pointer; font-family: inherit; color: var(--text); text-align: left;
}
.table-row:hover { background: var(--surface-2); }
.table-row .tr-num { font-weight: 600; font-size: 13px; min-width: 72px; }
.table-row .tr-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.table-row .tr-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-soft); }
.table-row .tr-status.active { color: var(--warn-strong, var(--warn)); }
.table-row .tr-go { margin-left: auto; color: var(--text-soft); }
.table-row.occupied { padding: 0; border-color: var(--warn); }
.table-row.occupied .tr-main { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: none; border: 0; cursor: pointer; font-family: inherit; color: var(--text); }
.table-row.occupied .tr-amt { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.table-row.occupied .tr-add { flex: 0 0 auto; width: 38px; align-self: stretch; border: 0; border-left: 1px solid var(--warn); background: var(--warn-bg); color: var(--warn-strong, var(--warn)); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 0 8px 8px 0; }

/* Floor view: canvas fills height, active orders in a side rail. */
.places-floor { flex: 1 1 auto; min-height: 0; display: flex; gap: 14px; }
.floor-view {
  flex: 1 1 auto; min-width: 0; position: relative; overflow: auto;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
  background-image: radial-gradient(circle, var(--grid-dot) 1px, transparent 1px);
  background-size: 24px 24px;
}
.floor-stage { position: relative; min-width: 100%; min-height: 100%; }
.floor-stage-empty { position: absolute; left: 28px; top: 24px; }
.floor-rail { flex: 0 0 230px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.floor-rail .rail-h { margin: 2px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.floor-rail .rail-empty { font-size: 12px; color: var(--text-soft); padding: 4px 2px; }
@media (max-width: 820px) {
  .places-floor { flex-direction: column; }
  .floor-rail { flex: 0 0 auto; max-height: 30%; }
}
.floor-table {
  position: absolute; box-sizing: border-box;
  border: 2px solid var(--border-strong); background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: inherit; color: var(--text); cursor: pointer; padding: 0;
}
.floor-table.delivery { border-style: dashed; border-color: var(--accent); background: var(--accent-bg); }
.floor-table .ft-deliv { font-size: 12px; font-weight: 700; color: var(--accent-700); display: inline-flex; align-items: center; gap: 5px; }
.floor-table.rect { border-radius: 10px; }
.floor-table.circle { border-radius: 50%; }
.floor-table:hover { border-color: var(--text-soft); }
.floor-table.delivery:hover { border-color: var(--accent-700); }
/* Staff station — a small, muted floor node (violet accent, dimmed so it reads
   as secondary next to the real tables). */
.floor-table.staff { border-style: dashed; border-color: var(--staff); background: var(--staff-bg); opacity: 0.8; }
.floor-table.staff:hover { border-color: var(--staff); opacity: 1; }
.floor-table.staff .ft-deliv { color: var(--staff); font-size: 11px; }
.floor-table.staff .ft-cnt { font-size: 10px; }
.floor-table .ft-num { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.floor-table .ft-status { font-size: 11px; color: var(--text-soft); }
.floor-table.occupied { border-color: var(--warn); background: var(--warn-bg); cursor: default; }
.floor-table .ft-main {
  position: absolute; inset: 0; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border-radius: inherit; font-family: inherit; color: var(--text);
}
.floor-table .ft-amt { font-size: 12px; font-weight: 700; color: var(--warn-strong, var(--warn)); }
.floor-table .ft-cnt { font-size: 10px; color: var(--text-muted); }
.floor-table .ft-add {
  position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--surface); background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2;
}
.floor-table {
  position: absolute; box-sizing: border-box;
  border: 2px solid var(--border-strong); background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: inherit; color: var(--text); cursor: pointer; padding: 0;
}
.floor-table.rect { border-radius: 10px; }
.floor-table.circle { border-radius: 50%; }
.floor-table:hover { border-color: var(--text-soft); }
.floor-table .ft-num { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.floor-table .ft-status { font-size: 11px; color: var(--text-soft); }
.floor-table.occupied { border-color: var(--warn); background: var(--warn-bg); cursor: default; }
.floor-table .ft-main {
  position: absolute; inset: 0; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border-radius: inherit; font-family: inherit; color: var(--text);
}
.floor-table .ft-amt { font-size: 12px; font-weight: 700; color: var(--warn-strong, var(--warn)); }
.floor-table .ft-cnt { font-size: 10px; color: var(--text-muted); }
.floor-table .ft-add {
  position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--surface); background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2;
}

/* ============================ Modifier modal ============================ */
.mod-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 24px; }
.mod-panel { width: 100%; max-width: 560px; max-height: calc(100vh - 48px); background: var(--surface); border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,0.25); display: flex; flex-direction: column; overflow: hidden; }
.mod-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.mod-head .mh-title { display: flex; align-items: center; gap: 12px; }
.mod-head .mh-title .lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.mod-head .mh-title h3 { margin: 2px 0 0; font-size: 18px; }
.mh-emoji-svg, .mh-emoji { width: 40px; height: 40px; border-radius: 9px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); font-size: 24px; }
.mh-emoji-svg { background-size: 26px 26px; background-position: center; background-repeat: no-repeat; }
.mod-x { border: 0; background: none; cursor: pointer; color: var(--text-muted); }
.mod-body { padding: 16px 18px; overflow-y: auto; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 18px; }
.mod-group .mg-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.mod-group .mg-head h4 { margin: 0; font-size: 14px; }
.mod-group .mg-helper { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.mod-group .mg-helper.bad { color: var(--danger); }
.mg-options { display: flex; flex-direction: column; gap: 6px; }
.mod-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); cursor: pointer; font-family: inherit; font-size: 14px; color: var(--text); text-align: left; }
.mod-opt:hover { background: var(--surface-2); }
.mod-opt.on { border-color: var(--accent); background: var(--accent-bg); }
.mod-opt.off { opacity: 0.45; cursor: not-allowed; }
.mod-opt .mo-mark { width: 20px; height: 20px; flex: 0 0 auto; border: 1.5px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--accent-700); }
.mod-opt .mo-mark.radio { border-radius: 50%; }
.mod-opt .mo-mark.check { border-radius: 5px; }
.mod-opt.on .mo-mark { border-color: var(--accent); }
.mod-opt .mo-name { flex: 1 1 auto; }
.mod-opt .mo-price { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.mod-opt.stepper { cursor: default; }
.mod-opt.stepper:hover { background: var(--surface); }
.mod-opt .mo-step, .mod-qty { display: inline-flex; align-items: center; gap: 8px; }
.mod-opt .mo-step .qn, .mod-qty .qn { min-width: 16px; text-align: center; font-weight: 600; }
.qbtn { width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
.qbtn:hover:not(:disabled) { background: var(--surface-2); }
.qbtn:disabled { opacity: 0.4; cursor: not-allowed; }
.mod-note { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.mod-note input { height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); font-size: 13px; color: var(--text); font-weight: 400; }
.mod-foot { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--border); flex: 0 0 auto; }
.mod-add { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 46px; padding: 0 18px; border: 0; border-radius: 9px; background: var(--accent); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.mod-add:disabled { background: var(--surface-3); color: var(--text-soft); cursor: not-allowed; }
.cart .line-opts { display: block; text-align: left; border: 0; background: none; padding: 2px 0 0; color: var(--accent-700); font-size: 11px; cursor: pointer; font-family: inherit; }
.cart .line-opts:hover { text-decoration: underline; }

/* ==================== Ingredient exclusions ("no jalapeños") ====================
   A checked ingredient goes in and is deducted; an unchecked one does neither.
   The checklist deliberately reads as a recipe the guest can edit, not as a
   modifier list — options ADD, these SUBTRACT, and the two must never look alike. */
.ing-options { gap: 4px; }
.ing-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); cursor: pointer; font-family: inherit; font-size: 14px;
  color: var(--text); text-align: left;
}
.ing-opt:hover { background: var(--surface-2); }
.ing-opt .mo-mark { width: 20px; height: 20px; flex: 0 0 auto; border: 1.5px solid var(--border-strong); border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--accent-700); }
.ing-opt .mo-name { flex: 1 1 auto; }
.ing-opt .ing-tag { font-size: 11px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ing-opt.on .mo-mark { border-color: var(--accent); color: var(--accent-700); }
/* Struck out: red, crossed, and clearly still there to be put back. */
.ing-opt.off { border-color: var(--danger); background: var(--danger-bg); }
.ing-opt.off .mo-mark { border-color: var(--danger); }
.ing-opt.off .mo-name { text-decoration: line-through; color: var(--danger); }
.ing-opt.off .ing-tag { color: var(--danger); text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px; }
.ing-group .ing-note { margin: 8px 0 0; font-size: 11px; line-height: 1.45; color: var(--text-muted); }

/* Note → exclusion bridge: what the typed note looks like it meant. */
.ing-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: -10px; }
.ing-suggest .is-lead { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.is-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px; border: 1px dashed var(--danger); border-radius: 999px;
  background: var(--danger-bg); color: var(--danger);
  font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
}
.is-chip:hover { border-style: solid; }

/* The "No X" badge — one look everywhere it lands (cart, bill, cook, history). */
.no-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.no-chip {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 999px;
  background: var(--danger-bg); color: var(--danger);
  border: 1px solid var(--danger);
  font-size: 11px; font-weight: 700; line-height: 1.5;
  text-transform: uppercase; letter-spacing: 0.02em;
}
.no-list.sm .no-chip { font-size: 10px; padding: 1px 6px; }

/* "Bought pesto instead of House pesto" — the swap the kitchen has to know
   about. Informational, not a warning: it reads as a note, unlike the red
   "NO peanuts" badge, which is a safety matter. */
.sub-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.sub-chip {
  display: inline-flex; align-items: center;
  padding: 2px 7px; border-radius: 999px;
  background: var(--info-bg); color: var(--info);
  border: 1px dashed var(--info);
  font-size: 11px; font-weight: 700; line-height: 1.5;
}
.sub-list.sm .sub-chip { font-size: 10px; padding: 1px 6px; }
.cart .line-nos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; padding: 0; border: 0; background: none; cursor: pointer; }
.cart .line-tools { display: flex; align-items: center; gap: 2px; }
.cart .line .ln-more {
  width: 22px; height: 22px; border-radius: 4px;
  color: var(--text-soft);
  display: inline-flex; align-items: center; justify-content: center;
}
.cart .line .ln-more:hover { color: var(--text); background: var(--surface-2); }

/* ============================ Menu admin ============================ */
.menu-admin-panel { display: flex; flex-direction: column; overflow: hidden; }
.menu-admin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.menu-tabs { display: flex; gap: 6px; }
.menu-tab { padding: 6px 14px; border-radius: 8px; border: 1px solid transparent; background: none; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.menu-tab:hover { background: var(--surface-2); }
.menu-tab.active { background: var(--surface-2); color: var(--text); border-color: var(--border); }

/* Items tab: left category rail (shared .menu-cats) + grid pane (Sales-Terminal look) */
.menu-admin-body { flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; padding: 16px; }
.menu-admin-body .menu-cats { flex: 0 0 200px; border: 1px solid var(--border); border-right: 0; border-radius: 10px 0 0 10px; }
.menu-grid-pane { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 0 10px 10px 0; overflow: hidden; }
.menu-grid-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.menu-grid-head .section-h { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.menu-admin-grid { flex: 1 1 auto; overflow-y: auto; padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; align-content: start; }
.menu-item-tile { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; text-align: left; font-family: inherit; color: var(--text); }
.menu-item-tile:hover { background: var(--surface-2); border-color: var(--border-strong); }
.mt-thumb { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 9px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mt-thumb.sm { width: 44px; height: 44px; }
.mt-thumb .ph-emoji-svg, .mt-thumb .ph-img { width: 100%; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; }
.mt-thumb .ph-img { background-size: cover; }
.mt-thumb .ph-emoji { font-size: 30px; }
.mt-thumb .ph-none { font-size: 10px; color: var(--text-soft); letter-spacing: 0.08em; }
.mt-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mt-name { font-size: 14px; font-weight: 600; }
.mt-desc { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* wrap: availability badges must never overflow the card bounds */
.mt-foot { display: flex; align-items: center; gap: 6px 8px; margin-top: auto; padding-top: 4px; flex-wrap: wrap; min-width: 0; }
.mt-price { font-weight: 700; font-variant-numeric: tabular-nums; }
.mt-opts { font-size: 11px; color: var(--accent-700); background: var(--accent-bg); padding: 1px 8px; border-radius: 999px; }

/* Shared inside the menu item editor modal */
.menu-admin-panel .mip-section { margin-top: 16px; }
.menu-admin-panel .mip-section h4 { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.menu-admin-panel .og-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.menu-admin-panel .og-head h4 { margin: 0; }
.menu-admin-panel .og-rows { display: flex; flex-direction: column; gap: 6px; }
.menu-admin-panel .og-row { display: grid; grid-template-columns: 1fr 32px; align-items: center; gap: 8px; }
.menu-admin-panel .grid-2 label.full { grid-column: 1 / -1; }
.menu-admin-panel .grid-2 textarea { min-height: 52px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font: inherit; font-size: 13px; resize: vertical; }

/* "Current restaurant" switcher at the top of the Menu screen */
.menu-brandbar { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 14px 16px 0; }
.menu-brandbar .mbb-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.menu-brandbar .mbb-label svg { color: var(--text-soft); }
.menu-brandbar .mbb-tabs { display: flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: 10px; }
.menu-brandbar .mbb-tab { padding: 6px 14px; border: 1px solid transparent; border-radius: 7px; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.menu-brandbar .mbb-tab:hover { color: var(--text); }
.menu-brandbar .mbb-tab.active { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.menu-brandbar + .menu-admin-body { padding-top: 14px; }

/* Card duplicate affordance + "on every menu" tag */
.menu-item-tile { position: relative; }
.menu-item-tile .mt-dup { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text-muted); cursor: pointer; opacity: 0; transition: opacity 0.12s ease; z-index: 2; }
.menu-item-tile:hover .mt-dup { opacity: 1; }
.menu-item-tile .mt-dup:hover { color: var(--accent-700); border-color: var(--accent); background: var(--accent-bg); }

/* Availability (86) toggle + state badges on menu cards */
.menu-item-tile .mt-avail { position: absolute; top: 8px; right: 40px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text-muted); cursor: pointer; opacity: 0; transition: opacity 0.12s ease; z-index: 2; }
.menu-item-tile:hover .mt-avail { opacity: 1; }
.menu-item-tile .mt-avail:hover { color: var(--accent-700); border-color: var(--accent); background: var(--accent-bg); }
.menu-item-tile .mt-avail.off { opacity: 1; color: var(--warn); border-color: var(--warn); }
.menu-item-tile .mt-avail.hidden { opacity: 1; color: var(--danger); border-color: var(--danger); }
.menu-item-tile.is-off .mt-thumb, .menu-item-tile.is-off .mt-name, .menu-item-tile.is-off .mt-desc { opacity: 0.45; }
.menu-item-tile.is-hidden { border-style: dashed; }
.menu-item-tile.is-hidden .mt-thumb, .menu-item-tile.is-hidden .mt-name, .menu-item-tile.is-hidden .mt-desc { opacity: 0.3; }
/* Dimming .mt-name gives it a stacking context whose box extends under the
   .mt-avail eye button; combined with the button's rounded corners, that let the
   name intercept pointer hits on the eye. The name/desc are never interactive on
   their own (the whole tile is the edit target), so drop them out of hit-testing. */
.menu-item-tile.is-off .mt-name, .menu-item-tile.is-off .mt-desc,
.menu-item-tile.is-hidden .mt-name, .menu-item-tile.is-hidden .mt-desc { pointer-events: none; }
.menu-item-tile .mt-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 7px; border-radius: 999px; border: 1px solid; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.menu-item-tile .mt-badge.b-off { color: var(--warn); border-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.menu-item-tile .mt-badge.b-hidden { color: var(--danger); border-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.menu-item-tile .mt-badge.b-out { color: var(--warn); border-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.mt-tag { font-size: 11px; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); padding: 1px 8px; border-radius: 999px; }

/* "Sold at" brand picker inside the item editor */
.menu-admin-panel .brand-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.menu-admin-panel .brand-pick .brand-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font: inherit; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.menu-admin-panel .brand-pick .brand-chip:hover { border-color: var(--border-strong); color: var(--text); }
.menu-admin-panel .brand-pick .brand-chip.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-700); }
.menu-admin-panel .brand-pick .brand-chip svg { stroke-width: 2.5; }
.menu-admin-panel p.muted.sm { font-size: 11px; margin: 8px 0 0; }

/* Editor footer: delete + duplicate grouped at the left */
.menu-admin-panel .ie-foot .ie-foot-left { display: flex; align-items: center; gap: 8px; }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }

.menu-groups { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px; }
.mg-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.group-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.group-card { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.group-card .gc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.group-card .gc-head h4 { margin: 0; font-size: 15px; }
.group-card .gc-type { font-size: 11px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.group-card .gc-opts { display: flex; flex-wrap: wrap; gap: 5px; }
.group-card .gc-opt { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); display: inline-flex; align-items: center; gap: 4px; }
.group-card .gc-opt b { color: var(--accent-700); }
.group-card .gc-opt em { color: var(--text-muted); font-style: normal; }
.group-card .gc-actions { display: flex; gap: 8px; margin-top: auto; }

/* Option-group editor modal (reuses .ie-* shell) */
.ie-actions-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 8px; }
.ie-actions-head h4 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.opt-edit-list { display: flex; flex-direction: column; gap: 8px; }
.opt-edit { border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: var(--surface-2); }
.opt-edit .oe-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.opt-edit .oe-name { flex: 1 1 140px; height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font-size: 13px; }
.opt-edit .oe-price, .opt-edit .oe-num { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); }
.opt-edit .oe-price input, .opt-edit .oe-num input { width: 60px; height: 32px; padding: 0 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font-size: 13px; }
.opt-edit .oe-chk { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); }
.opt-edit .oe-stock { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.opt-edit .oe-stock label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.opt-edit .oe-stock select { height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font-size: 13px; }

/* POS menu tile: image fallback + description */
.item-tile .ph .ph-img { width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; }
.item-tile .info .desc { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mod-head .mh-desc { margin: 3px 0 0; font-size: 12px; color: var(--text-muted); max-width: 380px; }

/* ── Integration window (Yandex / Glovo) ───────────────────────────────────── */
.integrations { padding: 22px; max-width: 940px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.integrations .int-intro h2 { margin: 0 0 4px; font-size: 20px; }
.integrations .int-intro p { margin: 0; max-width: 640px; }
.integration-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-card); overflow: hidden; }
.integration-card.on { border-color: var(--accent); }
.integration-card.soon { opacity: 0.6; }
.ic-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.ic-logo { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #fff; background: var(--text); flex: none; }
.ic-logo.yandex { background: #FC3F1D; }
.ic-logo.glovo { background: #FFC244; color: #1a1a1a; }
.ic-logo.src { background: #1E3A8A; font-size: 13px; letter-spacing: 0.03em; }
.src-poll { width: 58px; height: 26px; padding: 0 6px; margin: 0 2px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; text-align: center; }
.ic-title { flex: 1; min-width: 0; }
.ic-title h3 { margin: 0; font-size: 16px; }
.ic-status { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); }
.ic-status.active { background: var(--accent-bg); color: var(--accent-700); }
.ic-body { padding: 18px; display: flex; flex-direction: column; gap: 20px; }
.integrations .muted { color: var(--text-muted); }
.integrations .sm { font-size: 12px; }
/* toggle (self-contained so it renders outside the configurator scope) */
.integrations .toggle { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--border-strong); border: none; cursor: pointer; flex: none; transition: background 0.15s; }
.integrations .toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left 0.15s; }
.integrations .toggle[data-on="true"] { background: var(--accent); }
.integrations .toggle[data-on="true"]::after { left: 16px; }
.yx-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.yx-pill { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); }
.yx-pill.good { background: var(--accent-bg); color: var(--accent-700); }
.yx-pill.bad { background: var(--danger-bg); color: var(--danger); }
.yx-pill.neutral { background: var(--info-bg); color: var(--info); }
.yx-sec { display: flex; flex-direction: column; gap: 10px; }
.yx-sec h4 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.yx-sec h4 .muted { text-transform: none; letter-spacing: 0; font-weight: 400; }
.yx-cred-row { display: grid; grid-template-columns: 160px 1fr auto; align-items: center; gap: 10px; }
.yx-cred-row .k { font-size: 12px; color: var(--text-muted); }
.yx-cred-row .v { font-family: var(--mono); font-size: 12px; background: var(--surface-2); padding: 6px 8px; border-radius: 6px; overflow-wrap: anywhere; }
.yx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.integrations .field { display: flex; flex-direction: column; gap: 5px; }
.integrations .field span { font-size: 12px; color: var(--text-muted); }
.integrations .field input, .integrations .field select { height: 34px; padding: 0 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); font-size: 13px; color: var(--text); }
.yx-mode { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.4; padding: 10px 12px; background: var(--surface-2); border-radius: 8px; }
.yx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.yx-map-list { display: flex; flex-direction: column; gap: 8px; }
.yx-map-group { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.yx-map-sub { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.yx-map-row { display: grid; grid-template-columns: 1fr 220px 24px; align-items: center; gap: 10px; }
/* A modifier hangs off the dish above it — indented, quieter, same controls. */
.yx-map-row.mod { padding-left: 16px; border-left: 2px solid var(--border-strong); margin-left: 4px; }
.yx-map-row.mod .yx-map-name span:first-child { font-size: 12px; }
.yx-map-row.unmapped .yx-map-name span:first-child { color: var(--warn); font-weight: 600; }
.yx-tag { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--accent-bg); color: var(--accent-700); }
.yx-map-name { display: flex; flex-direction: column; }
.yx-map-row select { height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font-size: 13px; color: var(--text); }
.yx-map-state.ok { color: var(--accent); }
/* Glovo async menu-publish verdict */
.yx-menu-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); border-left: 3px solid var(--border-strong); }
.yx-menu-status.ok { border-left-color: var(--accent); }
.yx-menu-status.bad { border-left-color: var(--danger); }

/* Developer / conformance panel */
.yx-dev { border-top: 1px dashed var(--border-strong); padding-top: 16px; }
.yx-verdict { margin: 4px 0 0; font-size: 13px; font-weight: 600; }
.yx-verdict.ok { color: var(--accent-700); }
.yx-verdict.bad { color: var(--danger); }
.yx-checks { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; padding: 10px; background: var(--surface-2); border-radius: 8px; }
.yx-check-group { display: flex; flex-direction: column; gap: 2px; }
.yx-check-head { font-size: 12px; font-weight: 700; margin-bottom: 2px; }
.yx-check-group.ok .yx-check-head { color: var(--accent-700); }
.yx-check-group.bad .yx-check-head { color: var(--danger); }
.yx-check { display: flex; align-items: baseline; gap: 6px; font-size: 12px; padding-left: 10px; }
.yx-check .mark { font-weight: 700; }
.yx-check.ok .mark { color: var(--accent); }
.yx-check.bad { color: var(--danger); }
.yx-check.bad .mark { color: var(--danger); }
.yx-pre { max-height: 320px; overflow: auto; background: var(--surface-2); border-radius: 8px; padding: 12px; font-family: var(--mono); font-size: 11px; line-height: 1.5; margin: 0; }
.yx-log { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.yx-log-row { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.yx-log-row code { font-family: var(--mono); font-size: 12px; }
/* Platform report import (map-then-commit board, both delivery platforms) */
.ri-sec { border-top: 1px dashed var(--border-strong); padding-top: 16px; }
.ri-file-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.ri-file-row .field { min-width: 260px; }
.integrations .ri-file-row .field input[type="file"] { height: auto; padding: 7px 9px; font-size: 12px; }
/* A third-party report can be arbitrarily wide — it scrolls inside its own box
   so the integration card never grows a horizontal scrollbar. */
.ri-table-wrap { max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.ri-table { border-collapse: collapse; font-size: 12px; width: max-content; min-width: 100%; }
.ri-table th, .ri-table td { padding: 5px 10px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border); }
.ri-table th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.ri-table td { color: var(--text); max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.ri-table tbody tr:last-child td { border-bottom: none; }
.ri-stock { display: flex; flex-direction: column; gap: 8px; }
.ri-radio { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.4; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); cursor: pointer; }
.ri-radio.on { border-color: var(--accent); background: var(--accent-bg); }
.ri-radio input { margin-top: 2px; flex: none; }
.ri-result { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); border-left: 3px solid var(--accent); }
.ri-result.bad { border-left-color: var(--danger); }
@media (max-width: 720px) { .yx-grid { grid-template-columns: 1fr; } .yx-cred-row { grid-template-columns: 1fr; } .yx-map-row { grid-template-columns: 1fr; } .ri-file-row .field { min-width: 0; width: 100%; } }

/* ===== Warehouse select mode + bulk actions ===== */
.item-list.select-mode .item-list-head,
.item-list.select-mode .item-row {
  grid-template-columns: 30px 48px minmax(0, 1fr) 140px 140px 120px 170px 96px;
}
/* ---- Stock count mode ---- */
.count-col { display: flex; align-items: center; gap: 8px; min-width: 0; }
.count-input {
  width: 110px; padding: 7px 9px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--surface); color: var(--text); font: inherit; font-variant-numeric: tabular-nums;
}
.count-input:disabled { opacity: 0.45; }
.count-delta { min-width: 52px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.count-delta.short { color: var(--danger); }
.count-delta.over { color: var(--warn); }
.count-delta.ok { color: var(--ok, #16a34a); }
.count-expand {
  font: inherit; font-size: 11px; padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer;
}
.count-expand.on, .count-expand:hover { color: var(--accent-700); border-color: var(--accent); background: var(--accent-bg); }
.count-batch-rows { margin: -4px 0 8px 60px; display: flex; flex-direction: column; gap: 4px; }
.count-batch-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 110px 130px; gap: 10px; align-items: center;
  padding: 6px 10px; border: 1px dashed var(--border); border-radius: 8px; background: var(--surface-2);
}
.count-batch-row .cb-label { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.count-batch-row .cb-expected { font-size: 12px; color: var(--text-muted); text-align: right; }
.count-batch-row .count-input { width: 100%; }
.count-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; margin-bottom: 10px;
  border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.count-bar .cb-summary { font-size: 13px; color: var(--text-muted); }
.count-bar .cb-summary b { color: var(--text); }
.count-bar .cb-short b { color: var(--danger); }
.count-bar .cb-over b { color: var(--warn); }

/* ---- Cost visibility (warehouse rows + item editor) ---- */
.cost-col .num { color: var(--text); }
.cost-col .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ie-cost-strip {
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline;
  margin: 0 0 12px; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
  font-size: 12.5px; color: var(--text-muted);
}
.ie-cost-strip b { color: var(--text); }

/* ---- Menu price intel + mini price-setter ---- */
.mt-cost { font-size: 11px; color: var(--text-muted); }
.price-intel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
  font-size: 12.5px; color: var(--text-muted);
}
.price-intel b { color: var(--text); }
.price-intel .pi-set { display: inline-flex; align-items: center; gap: 6px; }
.price-intel .pi-set select, .price-intel .pi-set input {
  padding: 5px 8px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px;
}
.price-intel .pi-set input { width: 84px; }
.price-intel .pi-set .btn { padding: 5px 12px; font-size: 12.5px; }

/* ---- Dashboard: stock counts ---- */
.sc-table { display: flex; flex-direction: column; }
.sc-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 90px 64px 110px 110px; gap: 10px; align-items: center;
  padding: 8px 14px; border-top: 1px solid var(--border); font-size: 13px;
}
.sc-row:first-child { border-top: 0; }
.sc-row .sc-date { display: flex; flex-direction: column; }
.sc-row .sc-date small { color: var(--text-muted); }
.sc-row .sc-short { color: var(--danger); text-align: right; }
.sc-row .sc-over { color: var(--warn); text-align: right; }
.sc-row .sc-acc, .sc-row .sc-lines { color: var(--text-muted); text-align: right; }

.row-check {
  width: 22px; height: 22px; border-radius: 6px; padding: 0; font: inherit;
  border: 1.5px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: var(--surface);
  transition: background 0.12s, border-color 0.12s;
}
.item-list-head .row-check { cursor: pointer; }
.row-check.on { background: var(--accent); border-color: var(--accent); }
.item-list .item-row.row-selected {
  border-color: var(--accent);
  background: var(--accent-bg);
}
.item-list .item-row.row-selected:hover { background: var(--accent-bg); border-color: var(--accent); }

.selection-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 9px 14px; margin-bottom: 10px;
  background: var(--accent-bg); border: 1px solid var(--accent);
  border-radius: 10px;
}
.selection-bar .sb-left { display: flex; align-items: center; gap: 8px; }
.selection-bar .sb-count { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-700, var(--accent)); }
.selection-bar .sb-actions { display: flex; align-items: center; gap: 10px; }
.selection-bar .sb-quick { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.selection-bar .sb-quick select {
  height: 30px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); padding: 0 8px; font-size: 13px;
}
.link-btn {
  background: none; border: none; color: var(--accent); cursor: pointer;
  text-decoration: underline; font-size: 12px; padding: 0;
}
.link-btn:hover { color: var(--accent-hover, var(--accent)); }
.cat-head-actions { display: flex; align-items: center; gap: 10px; }
.cat-list.select-mode .cat-row { grid-template-columns: 30px 1fr 180px 100px 36px; }
.cat-row.picked { border-color: var(--accent); background: var(--accent-bg); }
button.row-check { cursor: pointer; }

/* ===== Bulk editor (spreadsheet) ===== */
body.bulk-open { overflow: hidden; }
.bulk-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: var(--scrim);
  display: flex; align-items: stretch; justify-content: center;
  padding: 24px;
}
.bulk-sheet {
  width: 100%; max-width: 1480px; height: 100%;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-modal);
  overflow: hidden;
}
.bulk-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 18px; border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.bulk-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bulk-title h2 { margin: 0; font-size: 18px; }
.bulk-head-actions { display: flex; align-items: center; gap: 10px; }
.bulk-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.bulk-status.clean { color: var(--text-muted); font-weight: 500; }
.bulk-status.dirty { color: var(--warn-strong); }
.bulk-status.dirty .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn-strong); }
.bulk-status.saved { color: var(--accent); }
.bulk-status.saving { color: var(--text-muted); }
.bulk-msg { font-size: 12px; color: var(--danger); }

.bulk-cols { position: relative; }
.bulk-cols-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  min-width: 210px; padding: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-detail);
}
.bcp-head { margin: 2px 6px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.bcp-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.bcp-row:hover { background: var(--surface-2); }
.bcp-row span:first-of-type { flex: 1 1 auto; }
.bcp-ro { font-size: 10px; color: var(--text-muted); text-transform: uppercase; }

.bulk-tools {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  padding: 10px 18px; border-bottom: 1px solid var(--border);
  background: var(--surface-2); flex: 0 0 auto;
}
.bulk-tools .btool + .btool { padding-left: 22px; border-left: 1px solid var(--border); }
.btool { display: flex; align-items: center; gap: 8px; }
.btool button { white-space: nowrap; }
.btool-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); white-space: nowrap; }
.btool select, .btool .btool-input {
  height: 30px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font-size: 13px; padding: 0 8px;
}
.btool .btool-input { min-width: 130px; }

.bulk-grid-wrap { flex: 1 1 auto; overflow: auto; position: relative; }
.bulk-grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.bulk-grid thead th {
  position: sticky; top: 0; z-index: 5;
  background: var(--surface); text-align: left;
  padding: 9px 10px; border-bottom: 2px solid var(--border);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted);
  white-space: nowrap;
}
.bulk-grid th.align-right, .bulk-grid td.align-right { text-align: right; }
.bulk-grid th.align-center, .bulk-grid td.align-center { text-align: center; }
.bulk-grid td { padding: 4px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.bulk-grid tbody tr:hover td { background: var(--surface-2); }
.bulk-grid tbody tr.sel td { background: var(--accent-bg); }
.bulk-grid .bg-check { width: 38px; text-align: center; }
.bulk-grid td.readonly { color: var(--text-muted); padding-left: 10px; padding-right: 10px; }
.bulk-grid td.editable { padding: 3px 5px; }
.bulk-grid td.editable.dirty { background: var(--warn-bg); box-shadow: inset 3px 0 0 var(--warn-strong); }
.bulk-grid tbody tr.sel td.editable.dirty { background: var(--warn-bg); }
.bcell {
  width: 100%; height: 30px; box-sizing: border-box;
  border: 1px solid transparent; border-radius: 5px;
  background: transparent; color: var(--text); font-size: 13px; padding: 0 7px; font-family: inherit;
}
.bcell:hover { border-color: var(--border); }
.bcell:focus { border-color: var(--accent); background: var(--surface); outline: none; box-shadow: 0 0 0 2px var(--accent-bg); }
select.bcell { cursor: pointer; }
.bcell.num { text-align: right; font-variant-numeric: tabular-nums; }
.bulk-empty { padding: 30px; text-align: center; }

.bulk-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 18px; border-top: 1px solid var(--border); flex: 0 0 auto;
}
.bulk-sheet:has(.bulk-status.dirty) .bulk-foot { background: var(--warn-bg); }

/* ============================================================ Accounting / Invoices */
.accounting { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--bg); }
.acc-header {
  display: flex; align-items: center; gap: 20px;
  padding: 14px 20px; border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.acc-header-left { flex: 1; min-width: 0; }
.acc-title { font-size: 17px; font-weight: 700; margin: 0; }
.acc-subtitle { margin: 2px 0 0; font-size: 12px; color: var(--text-muted); }
.acc-kpis { display: flex; gap: 10px; }
.acc-kpi {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 82px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.acc-kpi.warn { border-color: var(--warn); background: var(--warn-bg); }
.acc-kpi-v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.acc-kpi.warn .acc-kpi-v { color: var(--warn); }
.acc-kpi-k { font-size: 10px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 3px; white-space: nowrap; }
.acc-new-btn { flex: 0 0 auto; white-space: nowrap; }

/* Segmented control — reads unambiguously as tappable tabs (the active one is a
   raised pill), instead of the old bare-text buttons. */
.acc-tabs {
  display: flex; gap: 4px; flex: 0 0 auto;
  margin: 12px 20px 0; padding: 4px; width: fit-content; max-width: calc(100% - 40px);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
}
.acc-tabs .tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: 7px;
  font-size: 13px; font-weight: 600; color: var(--text-muted); white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}
/* Tab icon inherits currentColor, so it dims with the muted tab and brightens
   when the tab is active. */
.acc-tabs .tab .tab-ic { display: inline-flex; align-items: center; opacity: 0.8; }
.acc-tabs .tab[aria-pressed="true"] .tab-ic { opacity: 1; }
.acc-tabs .tab:hover { color: var(--text); }
.acc-tabs .tab[aria-pressed="true"] {
  background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.acc-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: 9px; background: var(--border); color: var(--text);
  font-size: 11px; font-weight: 700; line-height: 1;
}
.acc-tabs .tab[aria-pressed="true"] .acc-tab-count { background: var(--surface-2); }
.acc-tab-count.hot { background: var(--warn-bg); color: var(--warn); }

.acc-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; }

.acc-empty { padding: 40px 20px; text-align: center; color: var(--text-muted); max-width: 540px; margin: 0 auto; }
.acc-empty.sm { padding: 24px; }
.acc-empty p { margin: 0; line-height: 1.5; }

.acc-badge {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.acc-badge.amber { background: var(--warn-bg); color: var(--warn); }
.acc-badge.info  { background: var(--info-bg); color: var(--info); }
.acc-badge.ok    { background: var(--accent-bg); color: var(--accent); }

/* ---- inbox / history cards ---- */
.acc-card-list { display: flex; flex-direction: column; gap: 10px; max-width: 920px; }
.acc-card {
  position: relative; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 14px 16px 14px 20px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); cursor: pointer; overflow: hidden;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.06s;
}
.acc-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--border-strong); }
.acc-card.status-amber::before { background: var(--warn); }
.acc-card.status-info::before { background: var(--info); }
.acc-card.status-ok::before { background: var(--accent); }
.acc-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-card); }
.acc-card:active { transform: translateY(1px); }
.acc-card-thumb {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 9px; background: var(--bg); border: 1px solid var(--border);
  color: var(--text-soft); overflow: hidden;
}
.acc-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.acc-card-thumb.pdf { color: var(--danger); gap: 1px; }
.acc-card-thumb.pdf em { font-size: 8px; font-weight: 700; font-style: normal; letter-spacing: 0.05em; }
.acc-card-main { flex: 1; min-width: 0; }
.acc-card-top { display: flex; align-items: center; gap: 10px; }
.acc-card-supplier { font-weight: 600; font-size: 14px; }
.acc-card-sub { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.acc-card-hint { font-size: 12px; margin-top: 4px; color: var(--text-soft); }
.acc-card-hint.warn { color: var(--warn); font-weight: 600; }
.acc-card-hint.ok { color: var(--accent); }
.acc-card-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 100px; }
.acc-card-amount { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.acc-card-amount-k { font-size: 10px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.acc-card-action { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; }

/* ---- split processing view ---- */
.acc-split-head {
  display: flex; align-items: center; gap: 12px; padding: 12px 20px;
  border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.acc-split-title { font-weight: 600; flex: 1; }
.acc-split {
  flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 400px) 1fr;
  gap: 16px; padding: 16px 20px; overflow: hidden;
}
.acc-doc, .acc-items {
  display: flex; flex-direction: column; min-height: 0;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.acc-doc { padding: 16px; gap: 12px; overflow-y: auto; }
.acc-doc-head { display: flex; align-items: center; justify-content: space-between; }
.acc-doc-kicker { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-soft); }
/* Editable text-to-parse box — auto-grows (JS), so it is a big part of the
   panel own scroll rather than a separate little scroll box. */
.acc-doc-raw {
  margin: 0; padding: 12px; border: 1px dashed var(--border-strong); border-radius: 8px;
  background: var(--bg); font-family: var(--mono); font-size: 12px; line-height: 1.6;
  white-space: pre-wrap; color: var(--text);
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 120px; overflow: hidden;
}
.acc-doc-raw:focus { outline: none; border-style: solid; border-color: var(--accent); }
.acc-doc-scan { display: flex; flex-direction: column; gap: 8px; }
/* A photo shows full-height (the whole panel scrolls, not a nested box). A PDF
   lives in a fixed-height iframe that scrolls internally. */
.acc-doc-media { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg); }
.acc-doc-media img { display: block; width: 100%; height: auto; }
.acc-doc-pdf { display: block; width: 100%; height: 460px; border: 0; border-radius: 0; background: var(--bg); }
.acc-doc-scan-actions { display: flex; gap: 8px; }
.acc-doc-empty { padding: 16px; border: 1px dashed var(--border); border-radius: 8px; color: var(--text-soft); font-size: 12px; text-align: center; }
.acc-doc-processed { display: flex; align-items: center; gap: 8px; color: var(--accent); font-size: 13px; font-weight: 600; }

/* ---- upload dropzone + capture grid (new-invoice modal & doc pane) ---- */
.acc-capture-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.acc-capture-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.acc-capture-label { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.acc-upload {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 100%; padding: 18px 14px; border: 1px dashed var(--border-strong); border-radius: 10px;
  background: var(--bg); color: var(--text-muted); cursor: pointer; font-size: 13px; text-align: center;
  transition: border-color 0.12s, background 0.12s;
}
.acc-upload:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.acc-upload:disabled { cursor: default; opacity: 0.7; }
.acc-upload.dropzone { min-height: 150px; }
.acc-upload.dropzone em { font-size: 11px; color: var(--text-soft); font-style: normal; }
.acc-upload.has-file { flex-direction: column; gap: 10px; border-style: solid; cursor: default; padding: 12px; }
.acc-upload-img { max-height: 180px; width: 100%; object-fit: contain; border-radius: 8px; border: 1px solid var(--border); }
.acc-upload-file { display: flex; align-items: center; gap: 8px; color: var(--danger); font-weight: 600; }
.acc-upload-file span { color: var(--text); font-weight: 500; word-break: break-all; }
.acc-parse { margin-top: 4px; }
.acc-hint { font-size: 12px; color: var(--text-muted); margin: 4px 0 0; line-height: 1.45; }

/* ---- field primitive ---- */
.acc-field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.acc-field.inline { flex-direction: row; align-items: center; gap: 8px; text-transform: none; }
/* Small link-style shortcut under a field (e.g. pay the full amount owed). */
.field-fill { align-self: flex-start; margin-top: 2px; padding: 0; border: none; background: none; cursor: pointer; font: inherit; font-size: 11px; font-weight: 600; letter-spacing: normal; text-transform: none; color: var(--accent); }
.field-fill:hover { text-decoration: underline; }
/* Accounting header actions + 1C export button. */
.acc-header-actions { display: inline-flex; align-items: center; gap: 8px; }
/* Downloads tray (background export jobs) — fixed corner, appears on demand. */
.exports-tray {
  position: fixed; right: 18px; bottom: 18px; z-index: 1500; width: 306px; max-width: calc(100vw - 36px);
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}
.exports-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.export-job { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; background: var(--surface-2); }
.export-job.ready { background: var(--accent-bg); }
.export-job .ej-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.export-job .ej-label { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.export-job .ej-status { font-size: 11px; color: var(--text-muted); }
.export-job.ready .ej-status { color: var(--accent-700); }
.export-job.failed .ej-status { color: var(--danger); }
.export-job .ej-spin { width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--text-muted); animation: ej-spin 0.7s linear infinite; }
@keyframes ej-spin { to { transform: rotate(360deg); } }
.acc-field-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.acc-field input, .acc-field select, .acc-field textarea {
  height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0;
}
.acc-field textarea { height: auto; padding: 8px 10px; font-family: var(--mono); line-height: 1.5; resize: vertical; }
.acc-field input:focus, .acc-field select:focus, .acc-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
.acc-field input:disabled { background: var(--bg); color: var(--text-muted); }

/* ---- line items pane ---- */
.acc-items-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--border); flex: 0 0 auto; font-weight: 600;
}
.acc-muted { color: var(--text-soft); font-weight: 500; font-size: 12px; }
.acc-line-list { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.acc-line {
  display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 14px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  cursor: pointer; transition: border-color 0.12s, background 0.12s;
}
.acc-line[data-acc-line-edit]:hover { border-color: var(--border-strong); background: var(--bg); }
.acc-line.unmapped { border-color: var(--warn); background: var(--warn-bg); }
.acc-line.variance { border-left: 3px solid var(--warn); }
.acc-line-item { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acc-line-name { font-weight: 600; font-size: 13px; }
.acc-line-name.warn { color: var(--warn); display: inline-flex; align-items: center; gap: 5px; }
.acc-line-raw { font-size: 11px; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-line-qtys { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-muted); }
.acc-line-qtys .acc-q strong { color: var(--text); font-variant-numeric: tabular-nums; }
.acc-line-qtys .acc-q.hot strong { color: var(--warn); }
.acc-line-delta { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); }
.acc-line-delta.up { background: var(--info-bg); color: var(--info); }
.acc-line-money { display: flex; flex-direction: column; align-items: flex-end; font-size: 11px; color: var(--text-soft); }
.acc-line-money strong { font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
.acc-line-del { color: var(--text-soft); }
.acc-line-del:hover { color: var(--danger); }

.acc-process-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; border-top: 1px solid var(--border); flex: 0 0 auto; background: var(--surface);
}
.acc-process-bar .btn.lg { height: 44px; padding: 0 20px; font-size: 14px; }
.acc-process-warn { color: var(--warn); font-size: 12px; font-weight: 600; }
.acc-process-done { display: flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 600; }

/* ---- discrepancies ---- */
.acc-disc-head { display: flex; align-items: center; justify-content: space-between; max-width: 920px; margin-bottom: 12px; font-weight: 600; }
.acc-disc-open { color: var(--warn); font-size: 13px; }
.acc-disc-list { display: flex; flex-direction: column; gap: 8px; max-width: 920px; }
.acc-disc-row {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 16px;
  padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.acc-disc-row.open { border-left: 3px solid var(--warn); }
.acc-disc-row.resolved { opacity: 0.72; }
.acc-disc-marker { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.acc-disc-marker.on { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.acc-disc-name { font-weight: 600; }
.acc-disc-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.acc-disc-numbers { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; color: var(--text-muted); }
.acc-disc-numbers strong { color: var(--text); font-variant-numeric: tabular-nums; }
.acc-delta { font-weight: 700; }
.acc-delta.down { color: var(--danger); }
.acc-delta.up { color: var(--info); }
.acc-disc-action { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 120px; }
.acc-resolved-tag { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-size: 12px; font-weight: 600; }
.acc-resolved-note { font-size: 11px; color: var(--text-muted); text-align: right; max-width: 200px; }

/* ---- modals (reuse .ie-scrim / .ie-panel) ---- */
.acc-editor-variance { display: flex; align-items: flex-start; gap: 6px; padding: 10px 12px; border-radius: 8px; font-size: 12px; line-height: 1.45; background: var(--warn-bg); color: var(--warn); }
.acc-editor-variance.up { background: var(--info-bg); color: var(--info); }
.acc-resolve-facts { display: flex; flex-wrap: wrap; gap: 16px; padding: 12px; border-radius: 8px; background: var(--bg); font-size: 13px; color: var(--text-muted); }
.acc-resolve-facts strong { color: var(--text); font-variant-numeric: tabular-nums; }
.btn.sm.ghost { background: transparent; }
.btn.ghost.danger:hover { color: var(--danger); border-color: var(--danger); }

@media (max-width: 1100px) {
  .acc-kpi { min-width: 0; padding: 8px 10px; }
  .acc-kpi-k { font-size: 9px; }
}
@media (max-width: 860px) {
  .acc-split { grid-template-columns: 1fr; overflow-y: auto; }
  /* Stacked on narrow screens: the whole split scrolls as one — panels do not
     create their own nested scroll, so the image + text box are big and scroll
     together with everything else. */
  .acc-doc, .acc-items { overflow: visible; min-height: auto; }
  .acc-field-row { grid-template-columns: 1fr; }
  .acc-capture-grid { grid-template-columns: 1fr; }
  .acc-kpis { display: none; }
}

/* ===== Employees screen ===== */
.employees { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; padding: 18px 22px; align-items: start; }
.emp-list-pane { display: flex; flex-direction: column; gap: 10px; }
.emp-list-head { display: flex; align-items: center; justify-content: space-between; }
.emp-list-head h2 { margin: 0; font-size: 18px; }
.emp-list { display: flex; flex-direction: column; gap: 4px; }
.emp-list .pad { padding: 12px; }
.emp-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); text-align: left; width: 100%; cursor: pointer;
}
.emp-item:hover { border-color: var(--border-strong); background: var(--surface-2); }
.emp-item.active { border-color: var(--accent); background: var(--accent-bg); }
.emp-item.inactive { opacity: 0.6; }
.emp-avatar {
  width: 36px; height: 36px; border-radius: 9px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 0.02em;
}
.emp-avatar.lg { width: 52px; height: 52px; border-radius: 12px; font-size: 18px; }
.emp-meta { display: flex; flex-direction: column; min-width: 0; }
.emp-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-sub { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-flag { margin-left: auto; font-size: 10px; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; }

.emp-detail { min-width: 0; }
.emp-empty { padding: 40px; text-align: center; border: 1px dashed var(--border); border-radius: 12px; }
.emp-editor { display: flex; flex-direction: column; gap: 20px; }
.emp-editor-head { display: flex; align-items: center; gap: 14px; }
.emp-headfields { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-width: 0; }
.emp-name-input { height: 38px; font-size: 18px; font-weight: 600; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.emp-headrow { display: flex; align-items: center; gap: 14px; }
.emp-headrow select { height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 13px; }
.emp-active-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }

.emp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.emp-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.emp-f input { height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 13px; }
.emp-f input[type="color"] { padding: 2px; height: 34px; cursor: pointer; }
.emp-f.narrow { max-width: 120px; }

.emp-section { display: flex; flex-direction: column; gap: 8px; }
.emp-section h3 { margin: 0; font-size: 14px; }
.emp-section .muted { font-size: 12px; }
.emp-devices { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.emp-device {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); cursor: pointer; font-size: 13px;
}
.emp-device:hover { border-color: var(--border-strong); }
.emp-device.on { border-color: var(--accent); background: var(--accent-bg); }
.emp-device .ed-ic { color: var(--text-muted); display: inline-flex; }
.emp-device .ed-name { font-weight: 500; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-device .ed-type { font-size: 10px; text-transform: uppercase; color: var(--text-muted); }

.emp-tables { display: flex; flex-direction: column; gap: 10px; }
.emp-table-actions { display: flex; align-items: center; gap: 14px; font-size: 12px; }
.emp-table-grid { display: grid; grid-template-columns: repeat(auto-fill, 46px); gap: 8px; }
.emp-table-cell {
  width: 46px; height: 46px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
}
.emp-table-cell:hover { border-color: var(--border-strong); }
.emp-table-cell.on { border-color: var(--accent); background: var(--accent); color: #fff; }

/* ===== Sales: waiter bar + show-all ===== */
.place-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.waiter-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.waiter-pick { display: inline-flex; align-items: center; gap: 6px; }
.waiter-pick .wp-ic { color: var(--text-muted); display: inline-flex; }
.waiter-pick select { height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); font-size: 13px; min-width: 190px; }
.show-all-tables { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; }
.waiter-hint { font-size: 12px; color: var(--text-muted); }
.waiter-current { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.waiter-current svg { color: var(--text-muted); }

/* Configurator: per-device table section toggles */
.table-toggle-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.table-toggle { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; }
.table-toggle:hover { border-color: var(--border-strong, var(--text-soft)); }
.table-toggle.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-700); }

.screen-toggle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.screen-toggle { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; text-align: left; }
.screen-toggle:hover { border-color: var(--border-strong, var(--text-soft)); }
.screen-toggle.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-700); font-weight: 600; }
.screen-toggle .st-mark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: none; border-radius: 5px; border: 1px solid var(--border); background: var(--surface); }
.screen-toggle.on .st-mark { background: var(--accent); border-color: var(--accent); color: #fff; }
.screen-toggle .st-name { flex: 1; }

/* Configurator: readable device summary card */
.device-summary { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.device-summary .dsum-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 10px; background: var(--surface); }
.device-summary .dsum-row:nth-child(even) { background: var(--surface-2); }
.device-summary .dsum-l { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); flex: 0 0 auto; }
.device-summary .dsum-v { font-size: 13px; color: var(--text); text-align: right; }
.waiter-hint.muted { font-style: italic; }

/* ===== Employees: time clock + mock sections ===== */
.emp-section.mock { opacity: 0.9; }
.soon-pill { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }
.clock-status { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.clock-status .cs-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); flex: 0 0 auto; }
.clock-status.on { border-color: var(--accent); background: var(--accent-bg); }
.clock-status.on .cs-dot { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg); }
.clock-status .cs-text { font-size: 13px; flex: 1 1 auto; }
.clock-summary { font-size: 12px; color: var(--text-muted); }
.shift-log { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.shift-row { display: grid; grid-template-columns: 140px 1fr auto 24px; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 7px; font-size: 13px; }
.shift-row:hover { background: var(--surface-2); }
.shift-row.live { background: var(--accent-bg); }
.shift-row .sr-day { color: var(--text-muted); font-size: 12px; }
.shift-row .sr-span { font-variant-numeric: tabular-nums; }
.shift-row .sr-span em { color: var(--accent); font-style: normal; font-weight: 600; }
.shift-row .sr-dur { font-weight: 600; font-variant-numeric: tabular-nums; }
.shift-row .sr-del { border: none; background: none; color: var(--text-muted); cursor: pointer; opacity: 0; padding: 2px; border-radius: 4px; display: inline-flex; }
.shift-row:hover .sr-del { opacity: 1; }
.shift-row .sr-del:hover { color: var(--danger); background: var(--danger-bg); }

.mock-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.mock-fields .emp-f { color: var(--text-muted); }
.mock-fields input, .mock-fields select { height: 34px; padding: 0 10px; border: 1px dashed var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text-muted); font-size: 13px; }
.sched-preview { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.sched-day { display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 8px 4px; border: 1px dashed var(--border); border-radius: 8px; background: var(--surface-2); }
.sched-day .sd-name { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.sched-day .sd-slot { font-size: 13px; color: var(--text-muted); }

.emp-avatar { position: relative; }
.on-shift-dot { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); }
.emp-flag.on { color: var(--accent); border-color: var(--accent); }

.labor-cost-mock { opacity: 0.92; }
.bar-row .on-now { color: var(--accent); font-size: 11px; font-weight: 600; }
.bar-row .wage-tag { font-size: 10px; font-weight: 600; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }

/* ===== Employees module: sub-nav + tabs ===== */
.employees-screen { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.employees-screen > .scroll-area { flex: 1 1 auto; min-height: 0; height: auto; }
.emp-subnav { flex: 0 0 auto; display: flex; gap: 4px; padding: 10px 22px 0; border-bottom: 1px solid var(--border); background: var(--surface); }
.emp-subtab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: none; background: none; color: var(--text-muted); font-size: 14px; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; }
.emp-subtab:hover { color: var(--text); }
.emp-subtab.active { color: var(--text); border-bottom-color: var(--text); }
.emp-subtab svg { opacity: 0.85; }

/* ===== Schedule editor ===== */
.schedule-editor { padding: 18px 22px; display: flex; flex-direction: column; gap: 16px; }
.sched-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sched-toolbar h2 { margin: 0 0 2px; font-size: 18px; }
.sched-toolbar p { margin: 0; font-size: 13px; }
.sched-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.sched-table { width: 100%; border-collapse: collapse; }
.sched-table th { text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: 10px 6px; border-bottom: 1px solid var(--border); }
.sched-table th.sg-emph { text-align: left; padding-left: 14px; }
.sched-table td { border-bottom: 1px solid var(--border); padding: 6px; vertical-align: middle; }
.sched-table tbody tr:last-child td { border-bottom: none; }
.sched-table tbody tr:hover td { background: var(--surface-2); }
.sg-emp { display: flex; align-items: center; gap: 10px; padding-left: 14px !important; min-width: 180px; }
.sg-emp-meta { display: flex; flex-direction: column; }
.sg-emp-name { font-weight: 600; font-size: 13px; }
.sg-emp-role { font-size: 11px; color: var(--text-muted); }
.sg-cell { text-align: center; }
.sched-table tbody tr:hover .sg-cell.on { background: var(--accent-bg); }
.sg-cell.on { background: var(--accent-bg); }
.sg-t { width: 90px; height: 26px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--text); font-size: 12px; padding: 0 4px; display: block; margin: 2px auto; font-variant-numeric: tabular-nums; }
.sg-t:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-bg); }
.emp-avatar.sm { width: 30px; height: 30px; border-radius: 8px; font-size: 11px; }

/* ===== Email schedules panel ===== */
.sched-email { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--surface); }
.sched-email h3 { margin: 0; font-size: 15px; }
.sched-email p { margin: 0; font-size: 12px; }
.sched-email-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.see-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.see-who { display: inline-flex; align-items: center; gap: 8px; }
.see-name { font-weight: 600; font-size: 13px; }
.btn.small { height: 28px; padding: 0 10px; font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }

/* Person profile schedule readout: filled days look solid */
.sched-day.on { border-style: solid; border-color: var(--accent); background: var(--accent-bg); }
.sched-day.on .sd-slot { color: var(--text); font-weight: 600; }

/* ===== Schedule: Google-Calendar-style week grid ===== */
.schedule-cal { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.sched-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.sched-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; }
.sched-chip:hover { border-color: var(--border-strong); }
.sched-chip.active { border-color: var(--text); background: var(--surface-2); font-weight: 600; }
.sc-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }

.cal { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.cal-corner { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.cal-dayhead { text-align: center; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); padding: 8px 4px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.cal-dayhead:last-child { border-right: none; }
.cal-gutter { position: relative; border-right: 1px solid var(--border); }
.cal-hour { position: absolute; right: 6px; transform: translateY(-6px); font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cal-col { position: relative; border-right: 1px solid var(--border); cursor: copy; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 39px, var(--border) 39px, var(--border) 40px); }
.cal-col:last-child { border-right: none; }
.cal-col:hover { background-color: var(--surface-2); }
.cal-block { position: absolute; border-radius: 6px; padding: 3px 6px; color: #fff; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; gap: 1px; box-shadow: 0 1px 2px rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.25); }
.cal-block:hover { filter: brightness(1.06); }
.cal-block.sel { outline: 2px solid var(--text); outline-offset: 1px; z-index: 5; }
.cb-name { font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.cb-time { font-size: 10px; opacity: 0.92; font-variant-numeric: tabular-nums; line-height: 1.1; }

.cal-editor { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--accent); background: var(--accent-bg); border-radius: 10px; }
.cal-editor .ce-emp { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px; }
.cal-editor .ce-f { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.cal-editor input[type="time"] { height: 30px; padding: 0 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 13px; }
.sched-hint { font-size: 12px; }

/* ===== Schedule: closed-hours shade, drag ghost, resize handle ===== */
.cal-closed { position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none; background: rgba(20, 24, 33, 0.07); background-image: repeating-linear-gradient(135deg, rgba(20, 24, 33, 0.05) 0 5px, transparent 5px 10px); }
:root[data-theme="dark"] .cal-closed { background: rgba(0, 0, 0, 0.32); }
.cal-ghost { position: absolute; left: 2px; right: 2px; border-radius: 6px; opacity: 0.55; color: #fff; font-size: 10px; font-weight: 600; padding: 2px 5px; pointer-events: none; z-index: 6; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.cal-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }
.cal-block:hover .cal-resize { background: rgba(255, 255, 255, 0.4); }
.sched-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== Opening hours panel ===== */
.sched-hours { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--surface); }
.sched-hours h3 { margin: 0; font-size: 15px; }
.sched-hours p { margin: 0; font-size: 12px; }
.hours-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.hours-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hr-name { display: inline-flex; align-items: center; gap: 7px; min-width: 170px; font-weight: 600; font-size: 13px; }
.hours-row input[type="time"] { height: 30px; padding: 0 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 13px; }

/* Order detail: the automatic charges on top of the net total. */
.history-charges { display: flex; flex-direction: column; gap: 2px; padding: 6px 2px 0; }
.history-charges .hc-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--text-muted); }
.history-charges .hc-row.gross { margin-top: 4px; padding-top: 5px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text); font-weight: 700; }

/* ===== Bill charges (Settings › Sales) =====
   An ordered grid: the row position IS the setting, so the reorder controls and
   the worked-example preview sit right against the list. */
.chg-brands { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.chg-brand {
  padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text-muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.chg-brand:hover { color: var(--text); border-color: var(--border-strong); }
.chg-brand.on { color: var(--accent-700); border-color: var(--accent); background: var(--accent-bg); }
.chg-list { display: flex; flex-direction: column; gap: 6px; }
.chg-head, .chg-row {
  display: grid;
  grid-template-columns: 18px minmax(120px, 1.6fr) minmax(96px, .9fr) 92px minmax(84px, .8fr) auto auto auto;
  align-items: center; gap: 8px;
}
.chg-head { font-size: 11px; color: var(--text-soft); text-transform: uppercase; letter-spacing: .04em; padding: 0 6px; }
.chg-row { padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.chg-row.off { opacity: .55; }
.chg-row .chg-grip { color: var(--text-soft); display: inline-flex; }
.chg-row input[type="text"], .chg-row input[type="number"], .chg-row select, .chg-row .chg-name {
  height: 32px; min-width: 0; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 13px;
}
.chg-row .chg-value { text-align: right; }
.chg-row select:disabled { opacity: .45; }
.chg-flag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.chg-actions { display: inline-flex; align-items: center; gap: 4px; }
.chg-actions-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.chg-status { font-size: 12px; }
.chg-preview {
  margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2, var(--surface)); max-width: 380px;
}
.cp-caption { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; }
.cp-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 2px 0; }
.cp-row.is-tax span { color: var(--text-muted); }
.cp-row.total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; font-weight: 700; }
.cp-note { font-size: 11px; margin: 8px 0 0; }
@media (max-width: 900px) {
  .chg-head { display: none; }
  .chg-row { grid-template-columns: 18px 1fr 1fr; row-gap: 6px; }
  .chg-row .chg-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* ===== Wage & notes ===== */
.wage-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.wage-row .emp-f { max-width: 200px; }
.wage-row .emp-f select, .wage-row .emp-f input { height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 13px; }
.wage-hint { align-self: center; }
.notes-block { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.notes-block h4 { margin: 0; font-size: 13px; }
.note-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.note-add select, .note-add input { height: 32px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 13px; padding: 0 8px; }
.note-add .note-text { flex: 1 1 240px; min-width: 180px; }
.note-add .note-amount { width: 130px; }
.note-list { display: flex; flex-direction: column; gap: 4px; }
.note-item { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto auto 24px; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--border); border-left-width: 3px; border-radius: 8px; background: var(--surface); font-size: 13px; }
.note-item .ni-type { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; }
.note-item .ni-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.note-item .ni-amount { font-variant-numeric: tabular-nums; font-weight: 600; }
.note-item .ni-date { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.note-item .sr-del { border: none; background: none; color: var(--text-muted); cursor: pointer; padding: 2px; border-radius: 4px; display: inline-flex; }
.note-item .sr-del:hover { color: var(--danger); background: var(--danger-bg); }
.note-item.tone-good { border-left-color: var(--accent); }
.note-item.tone-good .ni-type { color: var(--accent); }
.note-item.tone-warn { border-left-color: var(--warn); }
.note-item.tone-warn .ni-type { color: var(--warn-strong); }
.note-item.tone-bad { border-left-color: var(--danger); }
.note-item.tone-bad .ni-type, .note-item.tone-bad .ni-amount { color: var(--danger); }
.note-item.tone-neutral { border-left-color: var(--border-strong); }
.note-item.tone-neutral .ni-type { color: var(--text-muted); }

/* ===== Schedule: full block manipulation (move/resize) + non-blocking others ===== */
.cal-block.other { opacity: 0.4; pointer-events: none; }
.cal-block.own { cursor: grab; }
.cal-block.own:active { cursor: grabbing; }
.cal-resize { position: absolute; left: 0; right: 0; height: 9px; cursor: ns-resize; }
.cal-resize.top { top: 0; bottom: auto; border-top-left-radius: 6px; border-top-right-radius: 6px; }
.cal-resize.bottom { bottom: 0; top: auto; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }
.cal-block.own:hover .cal-resize { background: rgba(255, 255, 255, 0.45); }
.hours-row .ce-f { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }

/* Invoice parse result / error notes */
.acc-parse-meta { font-size: 12px; color: var(--text-muted); margin: 6px 0 0; }
.acc-parse-meta strong { color: var(--text); }
.acc-parse-err { font-size: 12px; color: var(--danger); display: flex; align-items: center; gap: 6px; margin: 6px 0 0; }

/* Invoice low-confidence (best-guess) parse warning */
.acc-parse-warn { font-size: 12px; line-height: 1.45; color: var(--warn-strong); background: var(--warn-bg); border: 1px solid var(--warn); border-radius: 8px; padding: 8px 10px; margin: 8px 0 0; display: flex; align-items: flex-start; gap: 6px; }
.acc-parse-warn strong { color: var(--warn-strong); }

/* ===================== Staff meals ===================== */
/* A distinct violet accent so the staff-food entry point reads apart from the
   green Delivery station and the tables. */
:root { --staff: #7c5cff; --staff-bg: #f3f0ff; }
:root[data-theme="dark"], .dark { --staff: #a48bff; --staff-bg: #211d3a; }

/* Tiles view: a small button tucked under the Delivery card. */
.staff-mini {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: transparent; color: var(--text-muted);
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.staff-mini:hover { color: var(--staff); border-color: var(--staff); }

/* List view: a table-style row, always last and visually de-emphasised. */
.tables-list .table-row.staff-row { opacity: 0.72; }
.tables-list .table-row.staff-row .tr-num { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--text-muted); }
.tables-list .table-row.staff-row .tr-status { color: var(--text-soft); }
.tables-list .table-row.staff-row:hover { opacity: 1; }

/* Cart: staff member + discount instead of the cash/card row */
.cart .pay-section .staff-pay { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.cart .staff-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text-muted); }
.cart .staff-row select { flex: 1 1 auto; height: 36px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); padding: 0 8px; max-width: 60%; }
.cart .staff-row .disc-field { display: inline-flex; align-items: center; gap: 4px; }
.cart .staff-row .disc-field input { width: 64px; height: 36px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); text-align: right; padding: 0 6px; }
.cart .staff-row .disc-field i { font-style: normal; color: var(--text-muted); }

/* Employee editor: staff-meal fields */
.emp-sub-h { font-size: 13px; font-weight: 600; margin: 14px 0 6px; color: var(--text); }
.staff-meal-row .disc-field { display: inline-flex; align-items: center; gap: 4px; }
.staff-meal-row .disc-field input { width: 72px; }
.staff-meal-row .disc-field i { font-style: normal; color: var(--text-muted); }

/* Orders History: staff tag + filter */
.staff-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--staff); background: var(--staff-bg); vertical-align: middle; }

/* Dashboard: Staff food card */
.staff-food-card h4 { font-size: 13px; font-weight: 600; margin: 16px 0 8px; }
.staff-food-table .budget-cell.ok { color: var(--text); }
.staff-food-table .budget-cell.over { color: var(--danger); font-weight: 600; }

/* ============================================================
   Localization text-overflow safety — Armenian (and any future
   language) runs longer than English; these keep labels from
   breaking layouts instead of ellipsizing/wrapping gracefully.
   ============================================================ */
.nav .menu .item span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-bar .crumb { min-width: 0; }
.settings-section h3, .panel-heading span { overflow-wrap: break-word; }
.btn, .chip { min-width: 0; }
.cart .create .l { white-space: normal; line-height: 1.15; text-align: left; }
.table-row .tr-status, .delivery-line .dl-main small { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Armenian glyphs render slightly wider — trim tracking on dense chrome */
html[lang="hy"] .mobile-tabbar .tab .lbl,
html[lang="hy"] .step-bar .crumb,
html[lang="hy"] .canvas-toolbar .btn { letter-spacing: -0.015em; }

/* ============================================================ Web & Kiosk (storefront) setup screen */
/* Desktop .main has no padding of its own — each screen brings its own and
   centers. Storefront was left-pinned at 860px with none, so it hugged the
   top-left of wide screens; center it and give it breathing room. Mobile
   resets the side padding below (cards stay edge-to-edge on a phone). */
/* The screen root owns its own scrolling (same as .settings) — reserve-mode
   deployment cards make this page tall, and `main` clips overflow. */
.storefront { height: 100%; overflow-y: auto; max-width: 1000px; margin: 0 auto; padding: 6px 24px 48px; display: flex; flex-direction: column; gap: 14px; }
.storefront .sf-intro h2 { margin: 0 0 4px; }
.storefront .sf-intro p { margin: 0; max-width: 640px; }
.sf-new {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 12px; border: 1px dashed var(--border-strong); border-radius: 12px;
}
.sf-new input[type="text"] { flex: 2 1 220px; }
.sf-new select { flex: 1 1 140px; }
.sf-new input, .sf-new select, .sf-body input[type="text"], .sf-body select {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font-size: 13px;
}
.sf-empty { padding: 24px 0; text-align: center; }
/* flex-shrink: 0 — children of the scrolling flex column must keep their full
   height (overflow:hidden would otherwise let a tall card collapse in place). */
.sf-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; flex-shrink: 0; }
.sf-card.off { opacity: 0.75; }
.sf-head {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; background: none; border: 0; color: var(--text);
  font-size: 14px; text-align: left; cursor: pointer;
}
.sf-head .sf-name { font-weight: 600; }
.sf-mode {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px;
  /* Webpage = blue, Kiosk = green (yellow read as "unfinished"). */
  background: color-mix(in srgb, #3b82f6 14%, transparent); color: #2563eb;
}
html[data-theme="dark"] .sf-mode { color: #7cb3ff; }
.sf-mode.kiosk { background: var(--accent-bg); color: var(--accent-700); }
/* Queue board is a DISPLAY, not an ordering page — its own neutral colour so
   it never reads as "another storefront that takes money". */
.sf-mode.queue { background: color-mix(in srgb, #8b5cf6 15%, transparent); color: #7c3aed; }
html[data-theme="dark"] .sf-mode.queue { color: #b39bff; }
.sf-status { margin-left: auto; font-size: 12px; color: var(--text-muted); }
.sf-status.on { color: var(--accent-700); font-weight: 600; }
.sf-chev { color: var(--text-muted); }
.sf-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
.sf-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.sf-row label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.sf-row label.sf-grow { flex: 1 1 240px; }
.sf-switch { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); flex-direction: row !important; font-weight: 500 !important; }
.sf-url-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sf-url { font-size: 12px; padding: 6px 10px; background: var(--surface-2); border-radius: 7px; overflow-wrap: anywhere; }
.sf-hint { margin: 0; font-size: 12px; }
.sf-section h4 { margin: 0 0 4px; font-size: 13px; }
.sf-section > .muted { margin: 0 0 8px; font-size: 12px; }
.sf-pays { display: flex; gap: 14px; flex-wrap: wrap; }
.sf-online { margin-top: 10px; padding: 10px; border: 1px dashed var(--border); border-radius: 9px; }
.sf-online > .muted { margin: 0 0 8px; font-size: 12px; }
.sf-foot { display: flex; justify-content: flex-end; }
@media (max-width: 720px) {
  .sf-row { flex-direction: column; align-items: stretch; }
  .sf-switch { flex-direction: row !important; }
}

/* Storefront custom-CSS editor */
.sf-css {
  width: 100%; min-height: 140px; resize: vertical;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg); color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.5;
}
.sf-css:focus { outline: none; border-color: var(--accent); }
.sf-css-foot { display: flex; align-items: center; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.sf-css-upload { cursor: pointer; }
.sf-css-foot .muted { font-size: 11px; }

/* ===================== Printers & receipts ===================== */
.printer-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.printer-row { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.printer-row .prn-name { flex: 1 1 160px; height: 34px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); padding: 0 8px; font-size: 13px; font-weight: 600; }
.printer-row .prn-f { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-muted); }
.printer-row .prn-f select { height: 34px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); padding: 0 6px; font-size: 13px; }

.receipt-rules { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.receipt-rule { display: flex; align-items: center; gap: 10px; padding: 6px 2px; border-top: 1px solid var(--border); }
.receipt-rule:first-child { border-top: 0; }
.receipt-rule .rr-info { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.receipt-rule .rr-info .meta { font-size: 11px; color: var(--text-muted); }
.receipt-rule select { height: 32px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); padding: 0 6px; font-size: 12px; flex: 0 0 auto; max-width: 40%; }
.receipt-rule .rr-auto { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.receipt-rule .rr-auto.disabled { opacity: 0.45; }

.history-print-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.history-print-row .lbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); flex: 0 0 auto; }
.history-print-row .print-btns { display: flex; gap: 6px; flex-wrap: wrap; }

.delivery-mock .mock-drivers { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.delivery-mock .mock-driver { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.delivery-mock .md-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.delivery-mock .md-dot.busy { background: var(--warn); }

/* Green "enabled" badge — e.g. Receipts enabled on a device in the configurator */
.ok-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; background: var(--accent); vertical-align: middle; }

/* Cook Screen worker auto-print switch (flip printing on/off at the screen) */
.cook-print-toggle { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.cook-print-toggle:hover { border-color: var(--border-strong, var(--text-soft)); }
.cook-print-toggle .pt-box { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface); }
.cook-print-toggle.on { border-color: var(--accent); color: var(--accent-700); background: var(--accent-bg); }
.cook-print-toggle.on .pt-box { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ============================================================ Delivery module
   Manager Delivery screen (dispatch board, live map, drivers, settings) +
   Courier device view (crr-*) + the shared mini-map (minimap.js). */
.delivery-screen { display: flex; flex-direction: column; gap: 18px; padding: 4px 2px 40px; max-width: 1180px; }
.dlv-section { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.dlv-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dlv-section-head h3 { margin: 0; font-size: 16px; }

/* dispatch board */
.dlv-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dlv-col-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.dlv-col-head.s-pending { color: #b45309; }
.dlv-col-head.s-assigned { color: #1d4ed8; }
.dlv-col-head.s-enroute { color: #15803d; }
.dlv-count { background: var(--surface-2, #f1f0ec); border: 1px solid var(--border); border-radius: 999px; padding: 0 8px; font-size: 11px; }
.dlv-col-body { display: flex; flex-direction: column; gap: 10px; }
.dlv-col-empty { color: var(--text-soft); padding: 14px 0; text-align: center; }
.dlv-card { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--bg); }
.dlv-card.is-pending { border-left: 3px solid #f59e0b; }
.dlv-card.is-assigned { border-left: 3px solid #3b82f6; }
.dlv-card.is-enroute { border-left: 3px solid #22c55e; }
.dlv-card-head { display: flex; justify-content: space-between; align-items: baseline; }
.dlv-elapsed { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dlv-addr { font-weight: 600; line-height: 1.35; }
.dlv-contact { font-size: 13px; color: var(--text-muted); }
.dlv-contact a { color: inherit; }
.dlv-note { font-size: 12px; color: var(--text-muted); font-style: italic; }
.dlv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dlv-chip { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; border: 1px solid var(--border); color: var(--text-muted); background: var(--surface); white-space: nowrap; }
.dlv-chip.k-new { color: #b45309; border-color: #f6d7ae; background: #fdf4e7; }
.dlv-chip.k-cooking { color: #b91c1c; border-color: #f5c6c6; background: #fdeeee; }
.dlv-chip.k-ready { color: #15803d; border-color: #bbe3c8; background: #ecf8f0; }
.dlv-chip.k-completed { color: #475569; }
.dlv-chip.pay-cash { color: #7c2d92; border-color: #e5c9ec; background: #f9f0fb; }
.dlv-chip.busy { color: #b45309; border-color: #f6d7ae; background: #fdf4e7; }
.dlv-chip.free { color: #15803d; border-color: #bbe3c8; background: #ecf8f0; }
.dlv-chip.off { color: var(--text-soft); }
.dlv-card-driver { display: flex; flex-direction: column; gap: 4px; }
.dlv-card-driver label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft); }
.dlv-driver-select { height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); padding: 0 8px; font: inherit; font-size: 13px; }
.dlv-card-foot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dlv-foot-spacer { flex: 1; }
.btn.danger-ghost { color: #b91c1c; border-color: #f0caca; background: transparent; }
.btn.danger-ghost:hover { background: #fdeeee; }
.dlv-done { margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.dlv-done h4 { margin: 4px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.dlv-done-row { display: flex; gap: 12px; align-items: center; font-size: 13px; }
.dlv-done-row span { color: var(--text-muted); }
.dlv-done-row.canceled strong { text-decoration: line-through; color: var(--text-soft); }

/* drivers roster */
.dlv-driver-list { display: flex; flex-direction: column; gap: 8px; }
.dlv-driver-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); flex-wrap: wrap; }
.dlv-driver-id { display: flex; flex-direction: column; min-width: 140px; }
.dlv-driver-id a { text-decoration: none; }
.dlv-driver-row select { height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 12px; padding: 0 6px; margin-left: auto; }
.dlv-driver-add { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.dlv-driver-add input { height: 34px; border-radius: 8px; border: 1px solid var(--border); padding: 0 10px; font: inherit; }

/* settings */
.delivery-screen .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--border); }
.delivery-screen .toggle-row > span:first-child { display: flex; flex-direction: column; }
.delivery-screen .toggle, .dlv-driver-row .toggle { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--border-strong, #cfcdc7); border: none; cursor: pointer; flex: none; transition: background 0.15s; }
.delivery-screen .toggle::after, .dlv-driver-row .toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left 0.15s; }
.delivery-screen .toggle[data-on="true"], .dlv-driver-row .toggle[data-on="true"] { background: var(--accent); }
.delivery-screen .toggle[data-on="true"]::after, .dlv-driver-row .toggle[data-on="true"]::after { left: 16px; }
.dlv-loc-row { display: flex; align-items: center; gap: 10px; padding: 10px 0 2px; flex-wrap: wrap; }
.dlv-loc-row > span:first-child { display: flex; flex-direction: column; flex: 1; min-width: 220px; }
.dlv-loc-row small, .toggle-row small { display: block; font-weight: 400; }
.dlv-loc-value { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* live map */
.dlv-map { height: 360px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.dlv-modal { max-width: 520px; }

/* mini-map (shared) */
.minimap { position: relative; width: 100%; height: 100%; min-height: 240px; background: #e8e6e1; overflow: hidden; touch-action: none; cursor: grab; user-select: none; }
.minimap:active { cursor: grabbing; }
.mm-tiles img { position: absolute; top: 0; left: 0; width: 256px; height: 256px; pointer-events: none; }
.mm-markers { position: absolute; inset: 0; pointer-events: none; }
.mm-marker { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; margin-left: -14px; margin-top: -14px; }
.mm-dot { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 15px; background: #fff; border: 2px solid #1d4ed8; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,0.25); }
.mm-restaurant .mm-dot { border-color: #b45309; }
.mm-dest .mm-dot { border-color: #7c2d92; }
.mm-marker.stale { opacity: 0.45; }
.mm-label { margin-top: 2px; font-size: 10px; font-weight: 700; background: rgba(255,255,255,0.9); border-radius: 4px; padding: 0 4px; color: #333; white-space: nowrap; }
.mm-zoom { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.mm-zoom button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: #fff; font-size: 16px; font-weight: 700; cursor: pointer; color: #333; }
.mm-attr { position: absolute; right: 6px; bottom: 4px; font-size: 10px; color: #555; background: rgba(255,255,255,0.75); border-radius: 4px; padding: 0 4px; text-decoration: none; z-index: 2; }

/* orders detail: courier run row */
.history-delivery-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; flex-wrap: wrap; }
.history-delivery-row .lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft); }
.hdr-stage { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; border: 1px solid var(--border); }
.hdr-stage.s-pending { color: #b45309; background: #fdf4e7; border-color: #f6d7ae; }
.hdr-stage.s-assigned { color: #1d4ed8; background: #eef3fe; border-color: #c4d5f8; }
.hdr-stage.s-enroute { color: #15803d; background: #ecf8f0; border-color: #bbe3c8; }
.hdr-stage.s-delivered { color: #475569; background: var(--surface-2, #f1f0ec); }
.hdr-stage.s-canceled { color: #b91c1c; background: #fdeeee; border-color: #f5c6c6; }
.hdr-info { color: var(--text-muted); }

/* ---- Courier device view (phone-first) ---- */
.courier-screen { max-width: 560px; margin: 0 auto; padding: 6px 4px 60px; display: flex; flex-direction: column; gap: 12px; }
.crr-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.crr-top .lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-soft); }
.crr-top h2 { margin: 0; font-size: 22px; }
.crr-geo { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 4px 10px; border: 1px solid var(--border); color: var(--text-muted); }
.crr-geo.on { color: #15803d; background: #ecf8f0; border-color: #bbe3c8; }
.crr-geo.denied { color: #b91c1c; background: #fdeeee; border-color: #f5c6c6; }
.crr-sect { margin: 8px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }

/* Manager preview banner (this is not a courier device) */
.crr-preview-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--accent-bg); border: 1px solid var(--border); border-radius: 12px;
  font-size: 13px; color: var(--text-muted);
}
.crr-preview-ic { display: inline-flex; color: var(--accent-700); flex: 0 0 auto; }
:root[data-theme="dark"] .crr-preview-ic { color: var(--accent); }
.crr-preview-txt { flex: 1 1 auto; line-height: 1.35; }
.crr-preview-bar select {
  flex: 0 0 auto; max-width: 45%;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font-size: 13px;
}

/* Empty active queue */
.crr-none {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 40px 20px; text-align: center; color: var(--text-muted);
  border: 1px dashed var(--border); border-radius: 14px; background: var(--surface);
}
.crr-none .crr-none-ic { display: inline-flex; opacity: 0.5; }
.crr-none p { margin: 0; }
.crr-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.crr-card.enroute { border-left: 4px solid #22c55e; }
.crr-head { display: flex; align-items: center; gap: 8px; }
.crr-head strong { font-size: 17px; margin-right: auto; }
.crr-chip { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.crr-chip.ready { color: #15803d; background: #ecf8f0; }
.crr-chip.cooking { color: #b45309; background: #fdf4e7; }
.crr-status { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; border: 1px solid var(--border); color: var(--text-muted); }
.crr-status.s-enroute { color: #15803d; border-color: #bbe3c8; background: #ecf8f0; }
.crr-addr { font-size: 17px; font-weight: 700; line-height: 1.35; }
.crr-note { font-size: 13px; color: var(--text-muted); font-style: italic; }
.crr-lines { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--text-muted); }
.crr-line { display: flex; gap: 8px; }
.crr-pay .cash { color: #7c2d92; font-size: 15px; }
.crr-actions { display: flex; gap: 8px; }
.crr-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.crr-main-btn { height: 52px; border-radius: 12px; font-size: 16px; font-weight: 700; }
.crr-done-row { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 13px; }
.crr-done-row span { color: var(--text-muted); }
.crr-done-row .meta { margin-left: auto; }
.crr-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.crr-empty h2 { margin: 12px 0 6px; color: var(--text); }

@media (max-width: 900px) {
  .dlv-board { grid-template-columns: 1fr; }
  .dlv-map { height: 280px; }
}

/* Delivery UX pass: ghost one-click dispatch cards + 4-col board + the
   "Delivering" order state + run controls in the Orders History hub. */
.dlv-board.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dlv-col-head.s-suggest { color: var(--text-muted); }
.dlv-card.ghost { border-style: dashed; background: transparent; opacity: 0.92; }
.dlv-card.ghost .dlv-ghost-btn { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 6px; }
.history-row em.delivering, .history-status.delivering { background: #eef3fe; border-color: #1d4ed8; color: #1d4ed8; }
.history-delivery-row select { height: 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 12px; padding: 0 6px; }
@media (max-width: 1200px) { .dlv-board.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .dlv-board.four { grid-template-columns: 1fr; } }

/* POS: optional courier info on a delivery order */
.pos-courier { margin: 8px 0 2px; }
.pos-courier-toggle { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px dashed var(--border); background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 700; cursor: pointer; width: 100%; justify-content: center; }
.pos-courier.on .pos-courier-toggle { border-style: solid; border-color: var(--accent); color: var(--accent-700); background: var(--accent-bg); }
.pos-courier-toggle .pt-box { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface); }
.pos-courier.on .pos-courier-toggle .pt-box { background: var(--accent); border-color: var(--accent); color: #fff; }
.pos-courier-fields { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.pos-courier-fields input { height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); padding: 0 10px; font: inherit; font-size: 13px; }
.pos-courier-fields .pcf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* Dispatch cards: explicit lifecycle — progress segments + labeled next step */
.dlv-progress { display: flex; gap: 4px; margin: 8px 0 2px; }
.dlv-progress .seg { flex: 1; height: 4px; border-radius: 2px; background: var(--border); }
.dlv-progress .seg.done { background: var(--accent); opacity: 0.45; }
.dlv-progress .seg.cur { background: var(--accent); }
.dlv-progress.canceled .seg { background: var(--danger, #c22); opacity: 0.35; }
.dlv-next { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.dlv-next-lbl { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.dlv-next small { color: var(--text-muted); font-size: 11.5px; line-height: 1.35; }
.dlv-next-btn { width: 100%; justify-content: center; margin-top: 2px; }
/* Courier phone view: which step am I on and when do I press */
.crr-step-hint { margin-top: 10px; font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
.crr-step-hint .crr-step-no { display: inline-block; font-weight: 800; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-700); background: var(--accent-bg); border-radius: 6px; padding: 2px 7px; margin-right: 6px; }

/* ===================== Settings: category tabs + navigation ===================== */
.settings-tabs { display: flex; gap: 4px; margin: 0 0 18px; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; width: fit-content; max-width: 100%; flex-wrap: wrap; }
.settings-tabs .st-tab { border: 0; background: transparent; cursor: pointer; border-radius: 7px; padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.settings-tabs .st-tab:hover { color: var(--text); }
.settings-tabs .st-tab.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.10); }

/* Reorderable nav list (Settings business-wide + Configurator per-device) */
.nav-order-list, .dev-nav-list { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; max-width: 460px; }
.nav-order-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); cursor: grab;
}
.nav-order-row.drag-over { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
.nav-order-row .no-grip { color: var(--text-soft); display: inline-flex; }
.nav-order-row .no-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-order-row .no-actions { display: inline-flex; align-items: center; gap: 4px; }
.nav-order-row .no-btn {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  color: var(--text-muted); cursor: pointer; font-size: 10px;
}
.nav-order-row .no-btn:hover:not(:disabled) { color: var(--text); border-color: var(--border-strong); }
.nav-order-row .no-btn:disabled { opacity: .3; cursor: default; }
.nav-order-row .no-btn.on { color: var(--accent-700); border-color: var(--accent); background: var(--accent-bg); }
.nav-order-row .no-pin-badge {
  min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
}
.nav-pin-note { margin: 4px 2px 12px; }
.dev-nav-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* Per-device nav customize toggle (System Configurator) */
.dev-nav-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; margin: 6px 0 4px; }
.dev-nav-toggle input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* ============================================================
   Command palette (Ctrl+K) — screens + per-module actions.
   Sits under the PIN keypad (1200) but over everything else.
   ============================================================ */
.cp-scrim {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 20px 20px;
  background: var(--scrim-soft);
  backdrop-filter: blur(2px);
}
.cp {
  width: 100%; max-width: 560px; max-height: 60vh;
  display: flex; flex-direction: column;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow-detail);
  overflow: hidden;
}
.cp-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}
.cp-input-row input { flex: 1; border: 0; outline: 0; background: none; font-size: 15px; color: var(--text); }
.cp-input-row input::placeholder { color: var(--text-soft); }
.cp-input-row kbd {
  font: 11px/1 var(--mono); color: var(--text-soft);
  border: 1px solid var(--border); border-radius: 4px; padding: 3px 5px;
}
.cp-list { overflow-y: auto; padding: 6px; }
.cp-group {
  padding: 8px 10px 4px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-soft);
}
.cp-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 9px 10px;
  border-radius: 8px; text-align: left;
}
.cp-item:hover { background: var(--surface-2); }
.cp-item.on { background: var(--accent-bg); }
.cp-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-badge {
  flex: 0 0 auto;
  font-size: 11px; color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 2px 8px;
}
.cp-item.on .cp-badge { background: var(--surface); }
.cp-empty { padding: 18px 12px; text-align: center; color: var(--text-muted); }

/* ============================================================
   Coupons module — management screen + POS cart coupon section
   Self-contained: .det-section / .toggle / .scope-note are scoped under
   `.cfg` (configurator only), so this screen styles its own controls.
   ============================================================ */
/* Screen shell mirrors .movements-screen — the app convention for a plain
   scrolling list screen (padded, centred, capped width). */
.coupons-screen {
  display: flex; flex-direction: column; gap: 14px;
  padding: 4px 24px 40px;
  max-width: 1400px; margin: 0 auto;
}
.cpn-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.cpn-head h2 { margin: 0; font-size: 20px; }
.cpn-head .muted { margin: 2px 0 0; font-size: 13px; }
.cpn-head-actions { display: flex; gap: 8px; align-items: center; }
.cpn-search { position: relative; display: flex; align-items: center; }
.cpn-search svg { position: absolute; left: 10px; color: var(--text-soft); pointer-events: none; }
.cpn-search input[type="search"] {
  width: 240px; height: 34px; padding: 0 12px 0 32px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
}
.cpn-search input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }

.cpn-list { display: flex; flex-direction: column; gap: 8px; }
.cpn-row {
  display: flex; align-items: center; gap: 16px;
  width: 100%; padding: 12px 14px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  transition: border-color 80ms linear, background 80ms linear;
}
.cpn-row:hover { border-color: var(--border-strong); background: var(--surface-2); }
/* The code reads as a physical coupon tag, not a floating text column. */
.cpn-row .cpn-code {
  flex: 0 0 auto; min-width: 104px;
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 12px;
  font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--text);
  background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: 6px;
}
.cpn-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cpn-value {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 14px; font-weight: 600; line-height: 1.25;
}
.cpn-label {
  font-weight: 400; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cpn-label::before { content: "· "; }
.cpn-restrictions {
  font-size: 12px; line-height: 1.3; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cpn-meta { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.cpn-uses { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.cpn-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--border); color: var(--text-muted); background: var(--surface-2);
}
.cpn-chip.ok { color: var(--accent-700); background: var(--accent-bg); border-color: transparent; }
.cpn-chip.warn { color: var(--warn); background: var(--warn-bg); border-color: transparent; }
.cpn-chip svg { flex: 0 0 auto; }

.cpn-empty { padding: 64px 16px; text-align: center; }
.cpn-empty .t1 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.cpn-empty .t2 { color: var(--text-muted); font-size: 13px; max-width: 420px; margin: 0 auto; line-height: 1.45; }

/* ---- editor modal ---- */
.cpn-editor { max-width: 620px; display: flex; flex-direction: column; }
.cpn-editor .ie-body { display: flex; flex-direction: column; gap: 20px; }
.cpn-sect { display: flex; flex-direction: column; gap: 10px; }
.cpn-sect h4 {
  display: flex; align-items: center; gap: 8px;
  margin: 0;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.cpn-sect-meta {
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em; text-transform: none;
  color: var(--text-muted); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px;
}
.cpn-note { margin: -2px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-muted); }

.cpn-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cpn-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cpn-field-label { font-size: 11px; font-weight: 500; color: var(--text-muted); }
.cpn-field input,
.cpn-field select {
  width: 100%; height: 34px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text);
}
.cpn-field input:focus,
.cpn-field select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.cpn-field input[type="number"] { text-align: right; }
.cpn-code-field { display: flex; gap: 6px; }
.cpn-code-field input {
  flex: 1; min-width: 0;
  font-family: var(--mono); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.cpn-code-field .btn { flex: 0 0 auto; height: 34px; }
.cpn-suffix-field { position: relative; display: flex; align-items: center; }
.cpn-suffix-field input { padding-right: 28px; }
.cpn-suffix-field i {
  position: absolute; right: 10px;
  font-style: normal; font-size: 12px; color: var(--text-muted); pointer-events: none;
}

.cpn-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 2px 12px; }
.cpn-items-grid {
  max-height: 176px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; background: var(--surface);
}
.cpn-check {
  display: flex; align-items: center; gap: 8px;
  min-height: 28px; font-size: 13px; cursor: pointer;
  overflow: hidden;
}
.cpn-check span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpn-check input { flex: 0 0 auto; width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }
.cpn-item-search {
  width: 100%; height: 32px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text);
}
.cpn-item-search:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }

/* Label + hint stacked on the left, switch pinned right — the hint must never
   run inline with the label (it wraps into an unreadable paragraph). */
.cpn-switch-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
.cpn-switch-row + .cpn-switch-row { margin-top: 8px; }
.cpn-switch-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cpn-switch-label { font-size: 13px; font-weight: 600; }
.cpn-switch-hint { font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.cpn-switch {
  position: relative; flex: 0 0 auto;
  width: 36px; height: 20px; margin-top: 1px;
  border: 0; padding: 0; border-radius: 999px;
  background: var(--border-strong);
  transition: background 80ms linear;
  cursor: pointer;
}
.cpn-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface);
  transition: left 80ms linear;
}
.cpn-switch[data-on="true"] { background: var(--accent); }
.cpn-switch[data-on="true"]::after { left: 18px; }

.cpn-error {
  margin: 0; padding: 9px 11px;
  border-radius: 8px; background: var(--danger-bg); color: var(--danger);
  font-size: 13px; font-weight: 500;
}
.cpn-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--border); background: var(--surface-2);
}
.cpn-foot-actions { display: flex; gap: 8px; }

/* ---- POS cart coupon section ---- */
.cart-coupon { padding: 8px 0 0; }
.cart-coupon .cc-entry { display: flex; gap: 6px; }
.cart-coupon .cc-entry input {
  flex: 1; min-width: 0; height: 32px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text);
  font-family: var(--mono); letter-spacing: 0.04em; text-transform: uppercase;
}
.cart-coupon .cc-entry input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.cart-coupon .cc-entry .btn { flex: 0 0 auto; }
.cart-coupon .cc-applied {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px;
  background: var(--accent-bg); color: var(--accent-700);
  font-size: 13px; font-weight: 600;
}
.cart-coupon .cc-applied.err { background: var(--warn-bg); color: var(--warn); }
.cart-coupon .cc-applied .cc-code {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  font-family: var(--mono); letter-spacing: 0.04em;
}
.cart-coupon .cc-applied .cc-note {
  flex: 1; min-width: 0; text-align: right;
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cart-coupon .cc-remove { display: inline-flex; flex: 0 0 auto; padding: 2px; border-radius: 4px; color: inherit; opacity: 0.7; }
.cart-coupon .cc-remove:hover { opacity: 1; }
.cart-coupon .cc-error { color: var(--danger); font-size: 12px; margin: 6px 0 0; }
.cart-coupon .cc-picker {
  margin-top: 6px; border: 1px solid var(--border); border-radius: 8px;
  max-height: 168px; overflow-y: auto; background: var(--surface);
}
.cart-coupon .cc-pick {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 8px 10px; text-align: left; font-size: 13px;
}
.cart-coupon .cc-pick:hover { background: var(--surface-2); }
.cart-coupon .cc-pick + .cc-pick { border-top: 1px solid var(--border); }
.cart-coupon .cc-pick .cc-code { font-family: var(--mono); font-weight: 700; letter-spacing: 0.04em; }
.cart-coupon .cc-pick-value {
  color: var(--text-muted); font-size: 12px; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cart-coupon .cc-none { padding: 12px; margin: 0; color: var(--text-muted); font-size: 12px; text-align: center; }
.totals .row.cpn-discount .l, .totals .row.cpn-discount .v { color: var(--accent-700); }

@media (max-width: 720px) {
  .coupons-screen { padding: 4px 14px 32px; }
  .cpn-head-actions { width: 100%; }
  .cpn-search { flex: 1; }
  .cpn-search input[type="search"] { width: 100%; }
  .cpn-row { flex-wrap: wrap; gap: 10px; }
  .cpn-row .cpn-code { min-width: 92px; }
  .cpn-main { flex-basis: 100%; order: 3; }
  .cpn-meta { margin-left: auto; }
  .cpn-fields { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================ Finance module
   Supplier settlements (AP), cash shifts, money accounts + ledger, stock
   documents, payroll register, and the P&L / cash-flow report tables. */

/* -- kpi tone missing until now -- */
.kpi.good .kpi-v { color: var(--accent-700); }

/* -- Suppliers (AP) tab -- */
.ap-aging { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.ap-aging-total,
.ap-aging-cell { flex: 1 1 120px; min-width: 110px; display: flex; flex-direction: column; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.ap-aging-total { border-color: var(--border-strong); background: var(--surface-2); }
.ap-aging-cell.warn { border-color: var(--warn); background: var(--warn-bg); }
.ap-aging-cell.hot { border-color: var(--danger); background: var(--danger-bg); }
.ap-aging-cell.zero { opacity: 0.55; }
.ap-aging-v { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ap-aging-cell.warn .ap-aging-v { color: var(--warn); }
.ap-aging-cell.hot .ap-aging-v { color: var(--danger); }
.ap-aging-k { font-size: 10px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 3px; }

.ap-list { display: flex; flex-direction: column; gap: 8px; }
.ap-row { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; }
.ap-row.settled { opacity: 0.75; }
.ap-row-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.ap-row-head:hover { background: var(--surface-2); }
.ap-name { font-weight: 600; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-cell { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.ap-cell strong { color: var(--text); font-variant-numeric: tabular-nums; }
.ap-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.ap-chip.warn { color: var(--warn); background: var(--warn-bg); }
.ap-chip.hot { color: var(--danger); background: var(--danger-bg); }
.ap-balance { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-balance.due { color: var(--danger); }
.ap-balance.ok { color: var(--accent-700); }
.ap-caret { color: var(--text-soft); transition: transform 0.15s ease; }
.ap-row.open .ap-caret { transform: rotate(90deg); }
.ap-row-body { border-top: 1px solid var(--border); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.ap-credits { display: flex; flex-direction: column; gap: 6px; }
.ap-credit { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px dashed var(--warn); border-radius: 8px; background: var(--warn-bg); font-size: 12.5px; flex-wrap: wrap; }
.ap-credit input { flex: 0 1 160px; min-width: 120px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); font: inherit; color: inherit; }
.ap-statement { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ap-statement th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft); padding: 4px 8px; border-bottom: 1px solid var(--border); }
.ap-statement td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.ap-statement tr:last-child td { border-bottom: 0; }
.ap-statement .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ap-statement .num.ok { color: var(--accent-700); }
.ap-st-payment td:nth-child(2) { color: var(--accent-700); }
.ap-st-credit td:nth-child(2) { color: var(--info); }
.ap-overdue { font-size: 10px; font-weight: 700; color: var(--danger); background: var(--danger-bg); padding: 1px 6px; border-radius: 999px; margin-left: 4px; }
.ap-row-actions { display: flex; justify-content: flex-end; }

/* -- Shifts tab -- */
.fin-section { margin: 14px 0 8px; font-size: 13px; }
.fin-shift-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.fin-shift { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.fin-shift.status-amber { border-color: var(--warn); }
.fin-shift-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.fin-shift-head > div { display: flex; flex-direction: column; gap: 2px; }
.fin-shift-meta { font-size: 11.5px; color: var(--text-muted); }
.fin-shift-meta.ok { color: var(--accent-700); }
.fin-shift-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.fin-sn { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; padding: 2px 0; }
.fin-sn span { color: var(--text-muted); }
.fin-sn strong { font-variant-numeric: tabular-nums; }
.fin-sn.total { grid-column: 1 / -1; border-top: 1px dashed var(--border); padding-top: 6px; margin-top: 2px; font-weight: 600; }
.fin-sn.total.over strong { color: var(--accent-700); }
.fin-sn.total.short strong { color: var(--danger); }
.fin-shift-moves { display: flex; flex-wrap: wrap; gap: 6px; }
.fin-move { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); }
.fin-move.in { color: var(--accent-700); }
.fin-move.out { color: var(--danger); }
.fin-shift-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* -- Money tab -- */
.fin-accounts { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.fin-account { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); flex: 1 1 180px; min-width: 170px; }
.fin-account.type-bank { border-color: var(--border-strong); }
.fin-account.type-transit { border-style: dashed; }
.fin-account-name { font-size: 12.5px; color: var(--text-muted); flex: 1 1 auto; }
.fin-account-balance { font-weight: 700; font-variant-numeric: tabular-nums; }
.fin-account-balance.neg { color: var(--danger); }
.fin-actions { display: flex; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.fin-articles { margin-top: 6px; }
.fin-article-list { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fin-article-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 6px 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.fin-article-add { display: inline-flex; gap: 6px; align-items: center; }
.fin-article-add input { width: 140px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); font: inherit; color: inherit; }
.fin-ledger { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.fin-ledger th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft); padding: 4px 8px; border-bottom: 1px solid var(--border); }
.fin-ledger td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.fin-ledger tr:last-child td { border-bottom: 0; }
.fin-ledger .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-ledger .num.up { color: var(--accent-700); }
.fin-ledger .num.down { color: var(--danger); }

/* -- POS shift chip + menu -- */
.shift-wrap { position: relative; }
.shift-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; color: inherit; }
.shift-chip:hover { background: var(--surface-2); }
.shift-chip.none { border-color: var(--warn); color: var(--warn); }
.shift-chip.none em { font-style: normal; font-size: 10.5px; opacity: 0.85; }
.shift-chip.none.gate { animation: shift-gate-pulse 2.2s ease-in-out infinite; }
@keyframes shift-gate-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); } 50% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18); } }
.shift-chip.on .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); }
.shift-chip.on strong { font-variant-numeric: tabular-nums; }
.shift-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 190px; display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12); }
.shift-menu button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; color: inherit; }
.shift-menu button:hover { background: var(--surface-2); }
.shift-menu button.danger { color: var(--danger); }
.pos-overshort { margin: 8px 0; padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.pos-overshort.ok { background: var(--accent-bg); color: var(--accent-700); }
.pos-overshort.over { background: var(--info-bg); color: var(--info); }
.pos-overshort.short { background: var(--danger-bg); color: var(--danger); }

/* -- Warehouse stock documents -- */
.stock-docs { border-top: 1px solid var(--border); padding-top: 12px; }
.stock-doc-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.doc-scrim { z-index: 1200; }
.doc-outputs { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; }
.doc-outputs-head { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 600; }
.doc-pct { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.doc-pct.ok { color: var(--accent-700); }
.doc-pct.bad { color: var(--danger); }
.doc-output-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 70px 28px; gap: 6px; align-items: center; }
.doc-output-row select, .doc-output-row input { padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); font: inherit; font-size: 12.5px; color: inherit; min-width: 0; }

/* -- Accounting processed-line return -- */
.acc-line-return { flex: 0 0 auto; }
.acc-returned-tag { font-size: 11px; color: var(--text-soft); }

/* -- P&L + cash-flow report tables -- */
.pnl-table { display: flex; flex-direction: column; padding: 4px 8px 8px; }
.pnl-line { display: flex; justify-content: space-between; gap: 12px; padding: 7px 8px; font-size: 13px; border-bottom: 1px dashed var(--border); }
.pnl-line:last-child { border-bottom: 0; }
.pnl-line span:first-child { color: var(--text-muted); }
.pnl-line.strong { font-weight: 700; }
.pnl-line.strong span:first-child { color: var(--text); }
.pnl-line.good .tnum { color: var(--accent-700); }
.pnl-line.bad .tnum { color: var(--danger); }
.data-table .r.good, .data-table td.good { color: var(--accent-700); }
.data-table .r.bad, .data-table td.bad { color: var(--danger); }

/* -- Payroll tab -- */
.payroll-tab { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px 30px; }
.payroll-settings .payroll-set-row { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.payroll-settings .payroll-set-row.disabled { opacity: 0.55; }
.payroll-scheme { font-size: 11px; }
.payroll-table td .btn { margin-left: 4px; }

/* -- Mobile adjustments -- */
@media (max-width: 720px) {
  .ap-row-head { flex-wrap: wrap; }
  .ap-cell { display: none; }
  .fin-shift-list { grid-template-columns: 1fr; }
  .shift-chip.on span:not(.dot) { display: none; }
  .doc-output-row { grid-template-columns: minmax(0, 1fr) 70px 56px 26px; }
}

/* ============================================================
   Item Studio — food-chain graph + tech-card inspector
   ============================================================ */
.st-wrap {
  height: 100%; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--bg);
  --studio-raw: #C98A2B;
  --studio-prefab: #5B76D8;
  --studio-dish: #CC5680;
}
:root[data-theme="dark"] .st-wrap {
  --studio-raw: #E0AE5B;
  --studio-prefab: #8CA0F0;
  --studio-dish: #EE86A6;
}

.st-topbar {
  flex: 0 0 auto; height: 52px;
  display: flex; align-items: center; gap: 16px;
  padding: 0 16px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.st-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--text-muted); }
.st-crumb-mod { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); }
.st-crumbs .sep { color: var(--text-soft); }
.st-crumb-cur { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-seg { margin-left: auto; display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.st-seg button { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-muted); border: 0; background: none; padding: 6px 12px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.st-seg button.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-card); }

.st-main { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 384px; }

.st-canvas {
  position: relative; min-height: 0; overflow: hidden;
  background:
    radial-gradient(circle, var(--grid-dot) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--bg);
}
.st-stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.st-wires { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.st-wires path { fill: none; stroke-linecap: round; }
.st-wire-glow { opacity: 0.14; stroke-width: 8; }
.st-wire-core { stroke-width: 2; }
/* A replacement is a real path into the dish, but only travelled when the
   primary can't be covered — dotted says "conditional" without inventing a
   second colour language on top of the process palette. */
.st-wire-core.is-alt { stroke-width: 1.75; stroke-dasharray: 4 5; opacity: 0.85; }
.st-wire-glow.is-alt { opacity: 0.06; }
.st-wire-label {
  position: absolute; transform: translate(-50%, -50%);
  font-size: 11px; color: var(--text-muted);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 1px 7px; white-space: nowrap; pointer-events: none;
}

.st-node {
  position: absolute; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 13px; padding: 11px 12px 10px 14px;
  box-shadow: var(--shadow-card); cursor: pointer; overflow: hidden;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, opacity .18s ease;
  --k: var(--studio-prefab);
}
.st-node::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--k); }
.st-node.k-raw { --k: var(--studio-raw); }
.st-node.k-prefab { --k: var(--studio-prefab); }
.st-node.k-dish { --k: var(--studio-dish); }
.st-node:hover { transform: translateY(-2px); box-shadow: var(--shadow-modal); }
.st-node.is-current { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 0 26px -2px color-mix(in srgb, var(--accent) 55%, transparent), var(--shadow-card); }

/* Hover-to-focus: dim the graph, brighten the hovered item + everything it links to */
.st-wire-glow, .st-wire-core, .st-wire-label { transition: opacity .18s ease; }
.st-stage.is-focusing .st-node { opacity: .3; }
.st-stage.is-focusing .st-node.lit { opacity: 1; }
.st-stage.is-focusing .st-wire-glow { opacity: .04; }
.st-stage.is-focusing .st-wire-core { opacity: .1; }
.st-stage.is-focusing .st-wire-glow.lit { opacity: .3; }
.st-stage.is-focusing .st-wire-core.lit { opacity: 1; }
.st-stage.is-focusing .st-wire-label { opacity: .14; }
.st-stage.is-focusing .st-wire-label.lit { opacity: 1; }
.st-node-head { display: flex; align-items: center; gap: 10px; }
.st-node-id { min-width: 0; }
.st-node-name { font-weight: 620; font-size: 13.5px; line-height: 1.2; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-node-kind { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--k); margin-top: 2px; }
.st-node-foot { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.st-pill { font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: var(--surface-2); color: var(--text); font-variant-numeric: tabular-nums; }
.st-pill.cost { font-weight: 650; }
.st-pill.muted { color: var(--text-muted); }
.st-pill.alt { display: inline-flex; align-items: center; gap: 3px; background: var(--info-bg); color: var(--info); font-weight: 700; }

.st-thumb { display: inline-grid; place-items: center; border-radius: 8px; background-size: cover; background-position: center; flex: none; overflow: hidden; }
.st-thumb.ph { color: #fff; font-weight: 700; background: var(--text-soft); }
.st-thumb.ph.k-raw { background: var(--studio-raw); }
.st-thumb.ph.k-prefab { background: var(--studio-prefab); }
.st-thumb.ph.k-dish { background: var(--studio-dish); }
.st-thumb.emoji { background: var(--surface-2); }

.st-legend {
  position: absolute; left: 14px; top: 14px; z-index: 6;
  display: flex; flex-direction: column; gap: 6px;
  background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: 11px; padding: 9px 11px;
  box-shadow: var(--shadow-card); font-size: 12px;
}
.st-legend-h { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); font-weight: 700; }
.st-legend-row { display: flex; align-items: center; gap: 7px; color: var(--text-muted); }
.st-legend .sw { width: 11px; height: 11px; border-radius: 4px; }
.st-legend .sw.k-raw { background: var(--studio-raw); }
.st-legend .sw.k-prefab { background: var(--studio-prefab); }
.st-legend .sw.k-dish { background: var(--studio-dish); }
.st-legend .sw.sw-alt { border-radius: 0; height: 0; border-top: 2px dashed var(--text-muted); align-self: center; }

.st-zoom { position: absolute; right: 14px; bottom: 14px; z-index: 6; display: flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--border); border-radius: 10px; padding: 4px; box-shadow: var(--shadow-card); }
.st-zoom .iconbtn { width: 32px; height: 32px; }
/* The fit control carries a text label, so it can't share the fixed icon width
   (in Armenian "Տեղավորել" is far wider than 32px). */
.st-zoom .iconbtn[data-studio-fit] { width: auto; padding: 0 10px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.st-zoom .pct { font-size: 12px; color: var(--text-muted); min-width: 38px; text-align: center; font-variant-numeric: tabular-nums; }
.st-hint { position: absolute; left: 14px; bottom: 14px; z-index: 6; max-width: 260px; margin: 0; font-size: 11.5px; color: var(--text-soft); background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid var(--border); padding: 6px 10px; border-radius: 9px; }

.st-inspector { min-height: 0; overflow: auto; border-left: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; }
.st-insp-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 14px; border-bottom: 1px solid var(--border); }
.st-insp-id { flex: 1; min-width: 0; }
.st-name-input { width: 100%; font: inherit; font-size: 17px; font-weight: 650; color: var(--text); background: none; border: 1px solid transparent; border-radius: 7px; padding: 3px 6px; margin: -3px -6px 0; }
.st-name-input:hover { border-color: var(--border); }
.st-name-input:focus { border-color: var(--accent); background: var(--bg); outline: none; }
.st-insp-kind { display: inline-block; margin-top: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--text-muted); }
.st-insp-kind.k-raw { color: var(--studio-raw); }
.st-insp-kind.k-prefab { color: var(--studio-prefab); }
.st-insp-kind.k-dish { color: var(--studio-dish); }

.st-costbar { display: flex; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.st-costbar > div { flex: 1; padding: 10px 14px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.st-costbar > div:last-child { border-right: 0; }
.st-costbar .k { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); font-weight: 700; }
.st-costbar .v { font-size: 15px; font-weight: 700; color: var(--text); }
.st-costbar .v small { font-size: 11px; color: var(--text-muted); font-weight: 500; }

.st-block { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.st-block h3 { margin: 0 0 10px; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }

.st-recipe { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.st-recipe th { text-align: right; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); font-weight: 700; padding: 0 0 7px; border-bottom: 1px solid var(--border); }
.st-recipe th:first-child { text-align: left; }
.st-recipe td { padding: 8px 0; border-bottom: 1px solid var(--border); text-align: right; color: var(--text); }
.st-recipe td:first-child { text-align: left; }
.st-recipe tr:last-child td { border-bottom: 0; }
.st-ing-name { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 12.5px; font-weight: 550; color: var(--text); background: none; border: 0; padding: 0; cursor: pointer; }
.st-ing-name:hover { color: var(--accent); }
.st-qty { display: inline-flex; align-items: center; gap: 4px; }
.st-qty input { width: 62px; text-align: right; font: inherit; font-size: 12.5px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-variant-numeric: tabular-nums; }
.st-qty input:focus { border-color: var(--accent); outline: none; }
.st-qty em { font-style: normal; color: var(--text-soft); font-size: 10.5px; }
.iconbtn.sm { width: 26px; height: 26px; }

.st-add-line { margin-top: 10px; }
.st-add-line select { width: 100%; font: inherit; font-size: 12.5px; padding: 8px 10px; border: 1px dashed var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text-muted); cursor: pointer; }
.st-add-line select:focus { border-color: var(--accent); color: var(--text); outline: none; }

.st-usedin { display: flex; flex-direction: column; gap: 7px; }
.st-usedin-row { display: flex; align-items: center; gap: 10px; padding: 7px 9px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; cursor: pointer; font: inherit; text-align: left; }
.st-usedin-row:hover { border-color: var(--border-strong); }
.st-usedin-row .nm { font-size: 12.5px; font-weight: 600; color: var(--text); }
.st-usedin-row .q { margin-left: auto; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.st-usedin-row .arrow { color: var(--text-soft); display: inline-flex; }

.st-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.st-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); font-weight: 700; }
.st-fields label.st-full { grid-column: 1 / -1; }
.st-fields select, .st-fields input, .st-fields textarea { font: inherit; font-size: 12.5px; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 7px 8px; width: 100%; }
.st-fields select:focus, .st-fields input:focus, .st-fields textarea:focus { border-color: var(--accent); outline: none; }
.st-fields textarea { resize: vertical; min-height: 40px; }

.st-insp-foot { margin-top: auto; padding: 12px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-insp-foot .sm { font-size: 11px; }
.st-empty { height: 100%; display: grid; place-content: center; text-align: center; color: var(--text-muted); gap: 6px; }
.ie-head-actions { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }

/* ---- Processing (tech cards): how an ingredient is prepared ---- */
.processing-editor .ce-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.processing-editor .proc-add {
  font: inherit; font-size: 12.5px; padding: 6px 9px; max-width: 200px;
  border: 1px dashed var(--border-strong); border-radius: 7px;
  background: var(--surface); color: var(--text-muted); cursor: pointer;
}
.processing-editor .proc-add:focus { border-color: var(--accent); color: var(--text); outline: none; }
.processing-editor .muted { margin: 0 0 10px; }
.proc-rows { display: flex; flex-direction: column; gap: 8px; }
.proc-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.proc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 5px 10px;
  border: 1px solid; border-radius: 999px; min-width: 132px;
}
.proc-chip i { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.proc-row label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-soft);
}
.proc-row label input {
  width: 78px; font: inherit; font-size: 12.5px; text-align: right;
  padding: 5px 7px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font-variant-numeric: tabular-nums;
}
.proc-row label input:focus { border-color: var(--accent); outline: none; }
.proc-row label em { font-style: normal; color: var(--text-muted); font-size: 11px; }
.proc-row .iconbtn { margin-left: auto; }

/* Recipe line: process picker + what the raw quantity becomes */
.consumables-editor .ce-row .ce-process {
  font: inherit; font-size: 12px; max-width: 168px;
  padding: 5px 7px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text-muted); cursor: pointer;
}
.consumables-editor .ce-row .ce-process:focus { outline: none; border-color: var(--accent); }
.consumables-editor .ce-row .ce-prepared { font-size: 11.5px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- replacement ingredients (the ⋮ panel on a recipe line) ----
   A recipe line's fallbacks, in priority order. The badge on the row is the
   only hint on the collapsed line; everything else lives in the panel. */
.consumables-editor .ce-row .ce-alt-badge {
  display: inline-flex; align-items: center; gap: 3px; flex: none;
  padding: 2px 6px; border-radius: 999px; font-size: 11px; font-weight: 700;
  background: var(--info-bg); color: var(--info);
}
.consumables-editor .ce-row .ce-dots { flex: none; color: var(--text-soft); }
.consumables-editor .ce-row .ce-dots:hover { color: var(--text); }
.ce-alts-panel { width: min(620px, 94vw); }
.ce-alts-hint { margin: 0 0 12px; font-size: 12.5px; }
.ce-alt-rows { display: flex; flex-direction: column; gap: 8px; }
.ce-alt-row {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; background: var(--surface-2);
}
.ce-alt-rank {
  flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; background: var(--surface); border: 1px solid var(--border);
  font-size: 11.5px; font-weight: 800; color: var(--text-muted);
}
.ce-alt-row:first-child .ce-alt-rank { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-700); }
:root[data-theme="dark"] .ce-alt-row:first-child .ce-alt-rank { color: var(--accent); }
.ce-alt-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-alt-row input[type="number"] {
  width: 82px; font: inherit; font-size: 12.5px; padding: 5px 7px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text);
}
.ce-alt-row .unit { flex: none; font-size: 11px; color: var(--text-muted); }
.ce-alt-row .iconbtn:disabled { opacity: 0.3; cursor: default; }
.ce-alt-add {
  margin-top: 12px; width: 100%; font: inherit; font-size: 13px; padding: 8px 10px;
  border: 1px dashed var(--border-strong); border-radius: 9px; background: var(--surface); color: var(--text-muted); cursor: pointer;
}
.ce-alt-add:hover { border-color: var(--accent); color: var(--text); }

.st-wire-label.has-process { font-weight: 600; }
.st-wire-label em { font-style: normal; font-weight: 700; }
.st-wire-label.is-alt { border-style: dashed; opacity: 0.9; max-width: 190px; }
.st-wire-alt-tag { display: inline-flex; align-items: center; gap: 3px; color: var(--text-muted); font-weight: 600 !important; }
.st-legend-sep { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--border); }

/* Stock documents: each action explains what it does and when to use it */
.stock-doc-list { display: flex; flex-direction: column; gap: 8px; }
.stock-doc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stock-doc .btn { flex: 0 0 auto; min-width: 132px; justify-content: center; }
.stock-doc .sd-desc { flex: 1 1 240px; font-size: 11.5px; color: var(--text-muted); line-height: 1.35; }
.sd-vs { margin: 10px 0 0; font-size: 11px; padding: 8px 10px; border-left: 2px solid var(--border-strong); background: var(--surface-2); border-radius: 0 6px 6px 0; }

/* Studio breadcrumb → item browser (pick any item without leaving the screen) */
button.st-crumb-mod { font: inherit; font-size: 13px; border: 1px solid transparent; background: none; cursor: pointer; padding: 4px 8px; border-radius: 7px; }
button.st-crumb-mod:hover { background: var(--surface-2); border-color: var(--border); }
.st-crumb-caret { font-size: 9px; opacity: .6; margin-left: 2px; }
.st-browser {
  position: absolute; z-index: 40; top: 96px; left: 16px;
  width: 340px; max-height: min(560px, calc(100% - 120px));
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 12px; box-shadow: var(--shadow-modal); overflow: hidden;
}
.st-browser-head { display: flex; align-items: center; gap: 8px; padding: 10px; border-bottom: 1px solid var(--border); }
.st-browser-search { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); }
.st-browser-search:focus { border-color: var(--accent); outline: none; }
.st-browser-body { overflow-y: auto; min-height: 0; padding: 6px; }
.st-browser-group { margin-bottom: 8px; }
.st-browser-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--text-soft); padding: 6px 8px 4px; display: flex; justify-content: space-between; }
.st-browser-label.k-raw { color: var(--studio-raw); }
.st-browser-label.k-prefab { color: var(--studio-prefab); }
.st-browser-label.k-dish { color: var(--studio-dish); }
.st-browser-row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 8px; border: 0; border-radius: 7px; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--text); }
.st-browser-row:hover { background: var(--surface-2); }
.st-browser-row.is-current { background: var(--accent-bg); font-weight: 600; }
.st-browser-row .nm { flex: 1 1 auto; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-browser-row .u { font-size: 10.5px; color: var(--text-soft); font-family: var(--mono, ui-monospace, monospace); }

/* Studio right pane hosts the SHARED Warehouse item editor inline (embedded):
   strip the modal chrome so it fills the pane, and let its own .ie-body scroll. */
.st-main { grid-template-columns: 1fr 420px; }
.st-inspector { overflow: hidden; }
.st-inspector .ie-panel.st-embed {
  flex: 1 1 auto; min-height: 0;
  max-width: none; max-height: none;
  border-radius: 0; box-shadow: none; background: transparent;
}
.st-inspector .ie-panel.st-embed .ie-body { gap: 16px; }
.st-inspector .st-warehouse-link { border-top: 1px solid var(--border); padding-top: 14px; }

@media (max-width: 900px) {
  .st-main { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .st-inspector { border-left: 0; border-top: 1px solid var(--border); max-height: 46%; }
}

/* ============================== Reservations ==============================
   The Reservations screen (pending queue, day timeline, floor minimap), the
   reservation cards in the confirmation overlay, and the reserve-mode
   deployment settings (presets + field picker) on the Web & Kiosk screen. */

/* ---- overlay: reservation request card + modal extras ---- */
.confq-badge.rsv, .confm-badge.rsv { color: #6d28d9; background: #ede9fe; }
:root[data-theme="dark"] .confq-badge.rsv, :root[data-theme="dark"] .confm-badge.rsv { color: #c4b5fd; background: rgba(139, 92, 246, 0.18); }
.confm-rsv-when { display: flex; gap: 18px; flex-wrap: wrap; margin: 12px 0 0; font-size: 15px; font-weight: 600; }
.confm-rsv-when span { display: inline-flex; align-items: center; gap: 6px; }
.confm-tables { margin-top: 14px; }
.confm-tables .ct-head { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.confm-tables .ct-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.confm-tables .ct-chip {
  min-width: 40px; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); font-weight: 700; font-size: 14px; cursor: pointer;
}
.confm-tables .ct-chip:hover { border-color: var(--accent); }
.confm-tables .ct-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- Web & Kiosk: reserve deployment settings ---- */
.rs-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.rs-preset {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface); cursor: pointer;
}
.rs-preset:hover { border-color: var(--accent); }
.rs-preset.on { border-color: var(--accent); background: var(--accent-bg); }
.rs-preset.custom { cursor: default; }
.rs-preset-name { font-weight: 600; font-size: 13px; }
.rs-preset-desc { font-size: 11.5px; }
.rs-fields { display: flex; flex-direction: column; gap: 6px; }
.rs-field { display: flex; align-items: center; gap: 14px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 9px; flex-wrap: wrap; }
.rs-field.locked { background: var(--surface-2); font-size: 13px; justify-content: space-between; }
.rs-field .rs-req { margin-left: auto; font-size: 12px; color: var(--text-muted); }
.rs-field .rs-cf-label { flex: 1; min-width: 140px; }
.sf-hours-note { align-self: center; }

/* ---- Reservations screen ---- */
/* The screen root owns its own scrolling (same as .settings). */
.rsv { height: 100%; overflow-y: auto; padding: 22px 28px 48px; max-width: 1560px; margin: 0 auto; }

.rsv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.rsv-title h2 { margin: 0 0 3px; font-size: 20px; }
.rsv-sub { font-size: 13px; color: var(--text-muted); }
.rsv-datenav { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; }
.rsv-datenav > * { border: 0; border-right: 1px solid var(--border); }
.rsv-datenav > *:last-child { border-right: 0; }
.rsv-nav-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 38px; padding: 0 12px; height: 36px; background: var(--surface);
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer;
}
.rsv-nav-btn:hover { background: var(--surface-2); color: var(--text); }
.rsv-nav-btn.current { color: var(--accent-700); background: var(--accent-bg); cursor: default; }
:root[data-theme="dark"] .rsv-nav-btn.current { color: var(--accent); }
.rsv-nav-btn.prev svg { transform: rotate(180deg); }
.rsv-datenav input[type="date"] {
  height: 36px; padding: 0 10px; background: var(--surface); color: inherit;
  font: inherit; font-size: 13px; font-weight: 600;
}
.rsv-datenav input[type="date"]:focus { outline: none; background: var(--surface-2); }

/* The room is the primary surface, not a sidebar. Plan and book stack down the
   left; the rail spans BOTH rows so it keeps flowing beside the book instead of
   stopping under a short table card and leaving a dead column. */
.rsv-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) 350px;
  grid-template-rows: auto 1fr; gap: 20px 20px; align-items: start;
}
.rsv-cols > .rsv-floor { grid-column: 1; grid-row: 1; }
.rsv-cols > .rsv-book { grid-column: 1; grid-row: 2; }
.rsv-cols > .rsv-side { grid-column: 2; grid-row: 1 / span 2; }
.rsv-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rsv-new-panel { width: min(560px, 94vw); }
.rsv-new-hint { margin: 0 0 4px; font-size: 12.5px; }
.rsv-new-panel label { display: block; font-size: 12.5px; color: var(--text-muted); margin-bottom: 10px; }
.rsv-new-panel input, .rsv-new-panel textarea {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px; font: inherit; font-size: 14px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text);
}
.rsv-new-panel textarea { resize: vertical; }
.rsv-req { color: var(--danger); }
.rsv-new-error { color: var(--danger); font-size: 13px; margin: 2px 0 0; }
.rsv-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.rsv-floor { min-width: 0; }
.rsv-side { min-width: 0; }
.rsv-side > :first-child { margin-top: 0; }
.rsv-book { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.rsv-section-title {
  display: flex; align-items: center; gap: 8px; margin: 8px 2px 0;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted);
}
.rsv-count { background: var(--surface-3); color: var(--text); border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.rsv-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: rsv-pulse 1.6s ease-in-out infinite; }
@keyframes rsv-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* pending request cards */
.rsv-pending { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.rsv-pending-card {
  border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px;
  background: var(--surface); box-shadow: 0 1px 2px rgba(24, 24, 27, 0.05);
  display: flex; flex-direction: column; overflow: hidden;
}
.rsv-pending-card.overdue { border-left-color: var(--danger); }
.rsv-pc-main { display: flex; flex-direction: column; align-items: stretch; gap: 7px; text-align: left; padding: 14px 16px 10px; cursor: pointer; background: none; border: 0; color: inherit; font: inherit; }
.rsv-pc-main:hover { background: var(--surface-2); }
.rsv-pc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rsv-pc-name { font-weight: 700; font-size: 15px; }
.rsv-badge { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 3px 9px; }
.rsv-badge.new { background: var(--accent-bg); color: var(--accent-700); }
.rsv-badge.occ { background: var(--warn-bg); color: #92600a; }
.rsv-badge.wl { background: #ede9fe; color: #6d28d9; }
:root[data-theme="dark"] .rsv-badge.new { color: var(--accent); }
:root[data-theme="dark"] .rsv-badge.wl { background: rgba(139, 92, 246, 0.18); color: #c4b5fd; }
.rsv-pc-meta { display: flex; align-items: center; gap: 16px; font-size: 13px; font-weight: 600; }
.rsv-pc-meta span { display: inline-flex; align-items: center; gap: 5px; }
.rsv-pc-meta svg { color: var(--text-soft); }
.rsv-pc-note { font-size: 13px; font-style: italic; color: var(--text-muted); }
.rsv-pc-bits { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rsv-pc-overdue { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--danger); }
.rsv-pc-actions { display: grid; grid-template-columns: 1.35fr 1fr; gap: 8px; padding: 6px 16px 14px; }
.rsv-btn-accept {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 14px; border: 0; border-radius: 9px;
  background: var(--accent); color: #fff; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.rsv-btn-accept:hover { background: var(--accent-700); }
.rsv-btn-accept.sm { height: 30px; font-size: 12.5px; padding: 0 12px; }
.rsv-btn-decline {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 14px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); color: var(--text-muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.rsv-btn-decline:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }

/* shared tags */
.rsv-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2.5px 9px; background: var(--surface-2); color: var(--text-muted); }
.rsv-tag.occ { background: var(--warn-bg); color: #92600a; }
.rsv-tag.diet { background: var(--accent-bg); color: var(--accent-700); }
.rsv-tel { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); text-decoration: none; font-size: 12px; font-weight: 500; }
.rsv-tel:hover { color: var(--accent-700); }

/* day timeline */
.rsv-timeline { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 1px 2px rgba(24, 24, 27, 0.05); overflow: hidden; }
.rsv-row { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.rsv-row:last-child { border-bottom: 0; }
.rsv-row.closed { opacity: 0.5; }
.rsv-row.assigning { background: var(--accent-bg); }
.rsv-time {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; height: 30px; border-radius: 8px; background: var(--surface-2);
  font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums;
}
.rsv-who { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.rsv-name { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; flex-wrap: wrap; }
.rsv-party { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.rsv-bits { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rsv-note { font-size: 12.5px; font-style: italic; color: var(--text-muted); }
.rsv-tables {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  border: 1px dashed var(--border-strong); border-radius: 9px; padding: 6px 12px;
  background: none; color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.rsv-tables:hover, .rsv-tables.on { border-color: var(--accent); border-style: solid; color: var(--accent-700); background: var(--accent-bg); }
:root[data-theme="dark"] .rsv-tables:hover, :root[data-theme="dark"] .rsv-tables.on { color: var(--accent); }
.rsv-tbl { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.rsv-tbl + .rsv-tbl::before { content: "·"; margin: 0 3px; color: var(--text-soft); }
.rsv-tbl-none { font-weight: 500; }

/* segmented status control */
.rsv-sts { flex: 0 0 auto; display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.rsv-st {
  border: 0; border-right: 1px solid var(--border); padding: 7px 11px;
  font: inherit; font-size: 12px; font-weight: 600; background: var(--surface); color: var(--text-muted); cursor: pointer;
}
.rsv-st:last-child { border-right: 0; }
.rsv-st:hover { background: var(--surface-2); color: var(--text); }
.rsv-st.on { color: #fff; }
.rsv-st.confirmed.on { background: var(--info); }
.rsv-st.arrived.on { background: var(--warn); color: #451a03; }
.rsv-st.seated.on { background: var(--accent); }
.rsv-st.done.on { background: var(--text-soft); }
.rsv-st.noshow.on { background: var(--danger); }
.rsv-x { flex: 0 0 auto; border: 0; background: none; color: var(--text-soft); cursor: pointer; padding: 7px; border-radius: 8px; display: inline-flex; }
.rsv-x:hover { color: var(--danger); background: var(--danger-bg); }

.rsv-gone { margin-top: 2px; }
.rsv-gone summary { cursor: pointer; font-size: 12.5px; color: var(--text-muted); padding: 4px 2px; }
.rsv-gone-row { display: flex; align-items: center; gap: 14px; font-size: 13px; padding: 6px 2px 0 10px; color: var(--text-muted); }
.rsv-gone-row .rsv-time { min-width: 46px; height: 26px; font-size: 12.5px; }
.rsv-gone-st { margin-left: auto; font-size: 12px; }

/* empty / setup states */
.rsv-empty, .rsv-setup {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border: 1px dashed var(--border-strong); border-radius: 12px; padding: 34px 20px;
  color: var(--text-muted); text-align: center;
}
.rsv-empty svg, .rsv-setup svg { color: var(--text-soft); }
.rsv-empty p, .rsv-setup p { margin: 0; font-size: 13.5px; max-width: 420px; }
.rsv-setup { margin-bottom: 16px; }

/* floor side panel */
.rsv-floor { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 1px 2px rgba(24, 24, 27, 0.05); padding: 16px; }
.rsv-floor-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.rsv-floor-head h3 { margin: 0; font-size: 14px; font-weight: 700; }
.rsv-floor-tabs { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.rsv-floor-tab { border: 0; border-right: 1px solid var(--border); padding: 5px 11px; font: inherit; font-size: 12px; font-weight: 600; background: var(--surface); color: var(--text-muted); cursor: pointer; }
.rsv-floor-tab:last-child { border-right: 0; }
.rsv-floor-tab:hover { background: var(--surface-2); }
.rsv-floor-tab.on { background: var(--surface-3); color: var(--text); }
.rsv-floor-hint { margin: 0 0 12px; font-size: 12px; color: var(--text-muted); }
.rsv-assign-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--accent-bg); border-radius: 9px; padding: 8px 12px; margin: 4px 0 12px;
  font-size: 12.5px; font-weight: 600; color: var(--accent-700);
}
:root[data-theme="dark"] .rsv-assign-banner { color: var(--accent); }
/* The panel shows the SAME floor plan the Sales Terminal draws (.floor-table
   nodes on a .floor-stage) at native size and native typography. fitFloorStage()
   measures the panel after layout and shrinks the whole stage to fit, so the
   room is never clipped; reservation state rides on thin modifier classes so
   the tables keep the app-native look. */
.rsv-floor-view {
  position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg);
  background-image: radial-gradient(circle, var(--grid-dot) 1px, transparent 1px);
  background-size: 24px 24px;
}
.rsv-stage { transform-origin: top left; }
.floor-table.rsv-ft { cursor: pointer; }
.floor-table.rsv-ft .rsv-times { font-weight: 700; color: #92600a; max-width: 94%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.floor-table.rsv-held { border-color: var(--warn); background: var(--warn-bg); }
.floor-table.rsv-mine { border-color: var(--accent); background: var(--accent-bg); }
.floor-table.rsv-mine .rsv-times { color: var(--accent-700); }
.floor-table.rsv-clash { border-color: var(--danger); background: var(--danger-bg); opacity: 0.7; }
.floor-table.rsv-clash .rsv-times { color: var(--danger); }
.floor-table.rsv-ft:not(.rsv-clash):hover { border-color: var(--accent); }
/* The table whose card is open, whatever else it is doing. */
.floor-table.rsv-picked { outline: 3px solid var(--accent); outline-offset: 2px; }
.rsv-legend { display: flex; gap: 14px; margin-top: 12px; font-size: 11.5px; color: var(--text-muted); }
.rsv-legend span { display: inline-flex; align-items: center; gap: 5px; }
.rsv-legend .dot { width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid var(--border-strong); background: var(--surface); }
.rsv-legend .dot.held { border-color: var(--warn); background: var(--warn-bg); }
.rsv-legend .dot.mine { border-color: var(--accent); background: var(--accent-bg); }
.rsv-legend .dot.clash { border-color: var(--danger); background: var(--danger-bg); }
.rsv-legend .dot.occ { border-color: var(--info); background: var(--info-bg, var(--surface-2)); }

/* ---- sitting now: live occupancy the book can't see ----
   A table with an open bill is physically taken no matter what the timeline
   says. The floor plan gets a clock pill; the panel below ranks the room by
   how long each party has been down and how close the next booking is. */
.floor-table.rsv-ft .rsv-ft-sit {
  display: inline-flex; align-items: center; gap: 3px;
  font-weight: 700; color: var(--info); line-height: 1;
}
.floor-table.rsv-ft .rsv-ft-sit svg { flex: none; }
.floor-table.rsv-occ { border-style: solid; box-shadow: inset 0 0 0 2px var(--info); }
.floor-table.rsv-occ-warn { box-shadow: inset 0 0 0 2px var(--warn); }
.floor-table.rsv-occ-warn .rsv-ft-sit { color: var(--warn); }
.floor-table.rsv-occ-late { box-shadow: inset 0 0 0 2px var(--danger); }
.floor-table.rsv-occ-late .rsv-ft-sit { color: var(--danger); }

.rsv-sit {
  margin-top: 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px 16px;
}
.rsv-sit-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.rsv-sit-head h3 { margin: 0; font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; }
.rsv-sit-count { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.rsv-sit-count.warn { color: var(--danger); }
.rsv-sit-empty { margin: 0; font-size: 12.5px; color: var(--text-soft); }
.rsv-sit-list { display: flex; flex-direction: column; gap: 8px; }
.rsv-sit-row {
  display: flex; gap: 10px; align-items: stretch; width: 100%; text-align: left;
  font: inherit; cursor: pointer;
  border: 1px solid var(--border); border-left: 3px solid var(--info);
  border-radius: 9px; padding: 8px 10px; background: var(--surface-2);
}
.rsv-sit-row:hover { border-color: var(--border-strong); }
.rsv-sit-row.over { border-left-color: var(--warn); }
.rsv-sit-row.soon { border-left-color: var(--warn); background: var(--warn-bg); }
.rsv-sit-row.late { border-left-color: var(--danger); background: var(--danger-bg); }
.rsv-sit-tbl {
  flex: none; width: 34px; display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 800; color: var(--text);
  border-radius: 7px; background: var(--surface); border: 1px solid var(--border);
}
.rsv-sit-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.rsv-sit-top { display: flex; align-items: baseline; gap: 8px; }
.rsv-sit-dur { font-size: 14px; font-weight: 800; color: var(--text); }
.rsv-sit-meta { flex: 1; min-width: 0; font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rsv-sit-ready { font-style: normal; font-weight: 700; color: var(--accent-700); }
.rsv-sit-amt { font-size: 12.5px; font-weight: 700; color: var(--text); }
.rsv-sit-bar { display: block; height: 4px; border-radius: 3px; background: var(--border); overflow: hidden; }
.rsv-sit-fill { display: block; height: 100%; background: var(--info); transition: width 0.4s linear; }
.rsv-sit-row.over .rsv-sit-fill, .rsv-sit-row.soon .rsv-sit-fill { background: var(--warn); }
.rsv-sit-row.late .rsv-sit-fill { background: var(--danger); }
.rsv-sit-next { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-muted); }
.rsv-sit-next b { font-weight: 700; }
.rsv-sit-next.soon, .rsv-sit-next.over { color: var(--warn); }
.rsv-sit-next.late { color: var(--danger); }
.rsv-sit-next.free { color: var(--text-soft); }

/* ---- table card: what tapping a table on the plan opens ---- */
.rsv-tp {
  margin-top: 16px; background: var(--surface); border: 1px solid var(--accent);
  border-radius: 12px; padding: 14px 16px 16px;
}
.rsv-tp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rsv-tp-head h3 { margin: 0; flex: 1; font-size: 13.5px; }
.rsv-tp-tbl {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; border-radius: 8px;
  background: var(--accent-bg); color: var(--accent-700); border: 1px solid var(--accent);
}
:root[data-theme="dark"] .rsv-tp-tbl { color: var(--accent); }
.rsv-tp-now {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--info-bg); border-radius: 9px; padding: 10px 12px; margin-bottom: 14px;
}
.rsv-tp-now.stale { background: var(--warn-bg); }
.rsv-tp-now-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rsv-tp-now-top .rsv-sit-dur { font-size: 18px; font-weight: 800; color: var(--text); }
.rsv-tp-now-sub { font-size: 11.5px; color: var(--text-muted); }
.rsv-tp-amt { font-size: 14px; font-weight: 700; color: var(--text); }
.rsv-tp-bill { margin-top: 4px; width: 100%; justify-content: center; }
.rsv-tp-free {
  margin: 0 0 12px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--accent-700);
}
:root[data-theme="dark"] .rsv-tp-free { color: var(--accent); }
.rsv-tp-sec { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 7px; }
.rsv-tp-list { display: flex; flex-direction: column; gap: 6px; }
.rsv-tp-b {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--surface-2);
}
.rsv-tp-b.pending { border-style: dashed; }
.rsv-tp-b-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.rsv-tp-b-bot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rsv-tp-b-who { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rsv-tp-b-st { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.rsv-tp-empty { margin: 0; font-size: 12.5px; color: var(--text-soft); }
.rsv-tp-new { margin-top: 12px; width: 100%; justify-content: center; }

@media (max-width: 1100px) {
  /* minmax(0, …) is load-bearing: a bare 1fr takes its min from the stage's
     1200px intrinsic width and blows the whole screen past the viewport. */
  .rsv-cols { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  /* One column: plan → rail → book, so the live room and the card you just
     opened stay together instead of the book pushing them apart. */
  .rsv-cols > .rsv-floor { grid-column: 1; grid-row: auto; order: 1; }
  .rsv-cols > .rsv-side { grid-column: 1; grid-row: auto; order: 2; }
  .rsv-cols > .rsv-book { grid-column: 1; grid-row: auto; order: 3; }
}
@media (max-width: 720px) {
  .rsv { padding: 16px 14px 40px; }
  .rsv-row { flex-wrap: wrap; gap: 10px; }
  .rsv-sts { order: 5; }
  .rsv-floor-view { max-height: 300px; }
}

/* ---- Stock count acts (Accounting → Stock counts) ---- */
.acc-counts-intro { margin: 0 0 12px; }
.counts-table .count-row { cursor: pointer; }
.counts-table .count-row:hover { background: var(--surface-2); }
.counts-table td.num, .acc-table th.num { text-align: right; }
.counts-table .neg, .act-lines .neg { color: var(--danger); }
.counts-table .pos, .act-lines .pos { color: var(--accent); }

.count-act { display: flex; flex-direction: column; gap: 14px; }
.count-act .act-head { display: flex; align-items: center; gap: 10px; }
.count-act .act-head .spacer { flex: 1 1 auto; }
.count-act .act-title { display: flex; align-items: baseline; gap: 10px; }
.count-act .act-title h3 { margin: 0; font-size: 17px; }
.count-act .act-id { font-size: 11px; color: var(--text-soft); }
.count-act .act-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.count-act .act-meta > div { display: flex; flex-direction: column; gap: 2px; }
.count-act .act-meta .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); font-weight: 700; }
.count-act .act-meta .v { font-size: 13px; font-weight: 600; }
.count-act .act-note { margin: 0; font-size: 12.5px; color: var(--text-muted); font-style: italic; }
.count-act .act-totals { display: flex; flex-wrap: wrap; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.count-act .at-cell { flex: 1 1 130px; display: flex; flex-direction: column; gap: 3px; padding: 11px 14px; background: var(--surface); }
.count-act .at-cell .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); font-weight: 700; }
.count-act .at-cell .v { font-size: 15px; font-weight: 700; }
.count-act .at-cell.neg .v { color: var(--danger); }
.count-act .at-cell.pos .v { color: var(--accent); }
.count-act .at-cell.strong { background: var(--surface-2); }
.act-lines tr.has-var { font-weight: 600; }
.count-act .act-foot { margin: 0; font-size: 11.5px; }
button.linkish { font: inherit; font-size: 12px; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.count-act .acc-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.count-act .acc-table th { text-align: left; font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.count-act .acc-table th.num { text-align: right; }
.count-act .acc-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); }
.count-act .acc-table td.num { text-align: right; }
.count-act .acc-table tbody tr:last-child td { border-bottom: 0; }

/* ============================================================
   POS cart undo toast (Ctrl+Z + one-tap Undo). Fixed bottom-centre,
   above the cart; lives in #posToastMount so render() never wipes it.
   ============================================================ */
.pos-toast {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  z-index: 900;
  display: flex; align-items: center; gap: 14px;
  max-width: min(92vw, 460px);
  padding: 11px 12px 11px 16px;
  background: var(--text); color: var(--surface);
  border-radius: 10px;
  box-shadow: var(--shadow-modal);
  font-size: 13px; font-weight: 500;
  animation: posToastIn 140ms ease-out;
}
.pos-toast .pt-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-toast .pt-action {
  flex: 0 0 auto;
  padding: 5px 12px; border-radius: 7px;
  background: transparent; border: 1px solid rgba(255,255,255,0.3);
  color: var(--surface); font: inherit; font-weight: 700;
  cursor: pointer;
}
.pos-toast .pt-action:hover { background: rgba(255,255,255,0.14); }
@keyframes posToastIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .pos-toast { animation: none; }
}

/* ============================================================
   Global app toast (top-right, under the bell) — reports app-wide
   actions like the editorial Ctrl+Z undo. Distinct from .pos-toast,
   which stays bottom-centre beside the POS cart.
   ============================================================ */
.app-toast {
  position: fixed;
  top: 64px; right: 20px;
  z-index: 950;
  max-width: min(88vw, 380px);
  padding: 11px 14px;
  background: var(--text); color: var(--surface);
  border-radius: 10px;
  box-shadow: var(--shadow-modal);
  font-size: 13px; font-weight: 500; line-height: 1.4;
  animation: appToastIn 140ms ease-out;
}
.app-toast.warn { background: var(--warn); color: #18181B; }
@keyframes appToastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .app-toast { animation: none; } }
@media (max-width: 720px) { .app-toast { top: 12px; right: 12px; left: 12px; max-width: none; } }

/* Editorial (no-stock) rows in Actions History */
.mv-delta.edit {
  color: var(--text-muted); font-size: 12px; font-weight: 500;
  text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mv-row.is-undone .mv-item,
.mv-row.is-undone .mv-reason { text-decoration: line-through; opacity: 0.6; }

/* ==================== Order numbering + receipt designer ====================
   Settings › Receipts & numbering. Two jobs: show what the NEXT ticket will be
   called, and let a manager rebuild the paper without touching code. */
.set-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-top: 10px; }
.set-row label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.set-row label.set-grow { flex: 1 1 240px; }
.set-row input[type="text"], .set-row input[type="number"], .set-row select {
  height: 34px; padding: 0 9px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); color: var(--text); font-size: 13px; font-weight: 400; font-family: inherit;
}
.set-row input[type="number"] { width: 110px; font-variant-numeric: tabular-nums; }
.set-switch { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); flex-direction: row !important; font-weight: 500 !important; }

/* The whole point of the numbering section: see the next number, not a formula. */
.num-preview {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-top: 10px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
}
.num-preview .np-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.num-preview .np-sample {
  font-family: var(--mono); font-size: 26px; font-weight: 800;
  letter-spacing: 0.01em; color: var(--text);
}
.num-preview .np-then { font-family: var(--mono); font-size: 12px; color: var(--text-muted); }

/* ---- receipt type picker ---- */
.rc-types { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 14px; }
.rc-type {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 9px 13px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface); cursor: pointer; font-family: inherit; text-align: left;
}
.rc-type:hover { background: var(--surface-2); }
.rc-type.on { border-color: var(--accent); background: var(--accent-bg); }
.rc-type .rct-name { font-size: 13px; font-weight: 600; color: var(--text); }
.rc-type .rct-when { font-size: 11px; }

/* ---- editor + live preview, side by side ---- */
.rc-editor { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start; }
.rc-fields { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rc-fields > label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.rc-fields > label input[type="text"] {
  height: 34px; padding: 0 9px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); color: var(--text); font-size: 13px; font-weight: 400; font-family: inherit;
}
.rc-scale { display: grid !important; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; }
.rc-scale input[type="range"] { grid-column: 1; accent-color: var(--accent); }
.rc-scale .rc-scale-val { grid-column: 2; font-size: 12px; font-weight: 600; color: var(--text); }
.rc-switches {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px;
  padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.rc-foot { display: flex; gap: 8px; flex-wrap: wrap; }

.rc-preview { display: flex; flex-direction: column; gap: 6px; }
.rc-preview .rcp-caption { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
/* The paper at ACTUAL size — 80mm wide, and as tall as the receipt really is.
   No cap and no zoom: previewing a length is pointless if a metre of paper is
   squeezed into the same box as four centimetres. */
.rcp-stage {
  width: 302px; align-self: flex-start;
  border-radius: 4px; box-shadow: 0 2px 14px rgba(0,0,0,0.16);
  transition: height 0.15s ease;
}
.rcp-frame { width: 302px; border: 0; background: #fff; pointer-events: none; display: block; }
@media (max-width: 1100px) {
  .rc-editor { grid-template-columns: minmax(0, 1fr); }
  .rcp-frame { width: 100%; max-width: 302px; }
}

/* ==================== Counter hand-over strip (Sales Terminal) ====================
   Where the guest actually collects. Present only when something is waiting. */
.pickup-block {
  margin-bottom: 16px; padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 12px; background: var(--accent-bg);
}
.pickup-block .section-h { margin: 0 0 8px; }
.pickup-list { display: flex; flex-direction: column; gap: 6px; }
.pickup-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border);
}
.pickup-row .pk-num { font-family: var(--mono); font-size: 16px; font-weight: 800; color: var(--text); }
.pickup-row .pk-meta { font-size: 12px; color: var(--text-muted); }
.pickup-row .btn { margin-left: auto; }
.pickup-hint { margin: 8px 0 0; }

/* ==================== Cash-desk printing switch (Sales Terminal bar) ====================
   Sits between the terminal/brand selector and the shift chip. A sales terminal
   is a cash desk: this governs the CUSTOMER's documents (queue ticket, receipt,
   docket). Kitchen chits belong to the Cook Screen's own switch. */
.pos-print-wrap { position: relative; display: flex; align-items: stretch; flex: 0 0 auto; }
.pos-print-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 10px;
  border: 1px solid var(--border); border-right: 0;
  border-radius: 8px 0 0 8px;
  background: var(--surface); color: var(--text-muted);
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.pos-print-toggle:hover { background: var(--surface-2); color: var(--text); }
.pos-print-toggle .pt-box {
  width: 15px; height: 15px; flex: 0 0 auto;
  border: 1.5px solid var(--border-strong); border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.pos-print-toggle.on { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-700); }
.pos-print-toggle.on .pt-box { background: var(--accent); border-color: var(--accent); }
.pos-print-more {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 34px;
  border: 1px solid var(--border); border-radius: 0 8px 8px 0;
  background: var(--surface); color: var(--text-muted); cursor: pointer;
}
.pos-print-more:hover, .pos-print-more.open { background: var(--surface-2); color: var(--text); }
.pos-print-toggle.on + .pos-print-more { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-700); }

.pos-print-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  width: 290px; padding: 10px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); box-shadow: 0 10px 30px rgba(0,0,0,0.16);
  display: flex; flex-direction: column; gap: 2px;
}
.pos-print-menu .ppm-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 2px 4px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
  font-size: 12px;
}
.ppm-row {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 7px 6px; border-radius: 7px; cursor: pointer;
}
.ppm-row:hover { background: var(--surface-2); }
.ppm-row.is-off { opacity: 0.5; cursor: not-allowed; }
.ppm-row input { margin-top: 2px; accent-color: var(--accent); }
/* Master switch sits at the TOP of the panel so the hierarchy is visible: the
   power switch above, the documents it powers indented below it. */
.ppm-master {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 8px; margin-bottom: 4px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface); cursor: pointer; text-align: left;
}
.ppm-master:hover { background: var(--surface-2); }
.ppm-master .ppm-tx { flex: 1 1 auto; }
.ppm-master .ppm-state { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-muted); text-transform: uppercase; }
.ppm-master.on { border-color: var(--accent); background: var(--accent-bg); }
.ppm-master.on .pt-box { background: var(--accent); border-color: var(--accent); }
.ppm-master.on .ppm-state { color: var(--accent-700); }
/* Printing off: the rows still hold your choices, so they stay editable — but
   they must not read as live. Dimmed, and the tick goes grey instead of green. */
.ppm-row.is-muted { opacity: 0.55; }
.ppm-row.is-muted input { accent-color: var(--text-muted); }
.ppm-enable {
  display: block; width: 100%; margin-top: 6px; padding: 7px 10px;
  border: 1px solid var(--accent); border-radius: 8px;
  background: var(--accent-bg); color: var(--accent-700);
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.ppm-enable:hover { background: var(--accent); color: var(--on-accent, #fff); }
.ppm-row .ppm-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ppm-row .ppm-tx strong { font-size: 13px; font-weight: 600; color: var(--text); }
.ppm-row .ppm-tx em { font-style: normal; font-size: 11px; color: var(--text-muted); }
.pos-print-menu .ppm-foot { margin: 6px 4px 0; font-size: 11px; line-height: 1.4; }

/* ==================== ՀԴՄ switch (Sales Terminal bar) ====================
   Sits immediately right of the printing switch and borrows its shape on
   purpose — same height, same split button, same accent-when-on — so the two
   read as one family of desk switches. What it does NOT borrow is the meaning:
   this box files receipts with the tax authority and often runs the card, so it
   carries a live health pill the printer control has no need for. */
.pos-fiscal-wrap { position: relative; display: flex; align-items: stretch; flex: 0 0 auto; }
.pos-fiscal-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 10px;
  border: 1px solid var(--border); border-right: 0;
  border-radius: 8px 0 0 8px;
  background: var(--surface); color: var(--text-muted);
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.pos-fiscal-toggle:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.pos-fiscal-toggle:disabled { cursor: not-allowed; opacity: 0.6; }
.pos-fiscal-toggle .pt-box {
  width: 15px; height: 15px; flex: 0 0 auto;
  border: 1.5px solid var(--border-strong); border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.pos-fiscal-toggle.on { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-700); }
.pos-fiscal-toggle.on .pt-box { background: var(--accent); border-color: var(--accent); }
/* The Armenian acronym, not an icon: ՀԴՄ is what the device, the receipt and
   the tax paperwork all call it, in every language the app speaks. */
.pos-fiscal-toggle .pf-code { font-weight: 800; letter-spacing: 0.2px; }
/* Health, in the Configurator's own vocabulary and tones (fx-ok/warn/bad/idle
   mirror fiscalStatusMeta) so one glance means the same thing on both screens. */
.pos-fiscal-toggle .pf-status {
  padding: 2px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
}
.pos-fiscal-toggle .pf-status.fx-ok   { background: var(--accent-bg); color: var(--accent-700); }
.pos-fiscal-toggle .pf-status.fx-warn { background: var(--warn-bg);   color: var(--warn-strong); }
.pos-fiscal-toggle .pf-status.fx-bad  { background: var(--danger-bg); color: var(--danger); }
.pos-fiscal-toggle .pf-status.fx-idle { background: var(--surface-2); color: var(--text-muted); }
.pos-fiscal-more {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 34px;
  border: 1px solid var(--border); border-radius: 0 8px 8px 0;
  background: var(--surface); color: var(--text-muted); cursor: pointer;
}
.pos-fiscal-more:hover, .pos-fiscal-more.open { background: var(--surface-2); color: var(--text); }
.pos-fiscal-toggle.on + .pos-fiscal-more { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-700); }
.pos-fiscal-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  width: 300px; padding: 10px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); box-shadow: 0 10px 30px rgba(0,0,0,0.16);
  display: flex; flex-direction: column; gap: 2px;
}
.pos-fiscal-menu .ppm-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 2px 4px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
  font-size: 12px;
}
.pos-fiscal-menu .ppm-foot { margin: 6px 4px 0; font-size: 11px; line-height: 1.4; }

/* Greyed-out designer controls (e.g. number size while the number is hidden). */
.rc-scale.is-off, .rc-fields > label.is-off { opacity: 0.45; }

/* ==================== Custom receipt blocks + paper controls ====================
   The venue's own lines. Structured fields rather than markup: a thermal roll
   has no reflow, and the author is a manager, not a developer. */
.rc-blocks { border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.rc-blocks .rcb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rc-blocks .rcb-head h4 { margin: 0; font-size: 13px; }
.rc-blocks .rcb-empty { margin: 0; }
.rcb-row {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface);
}
.rcb-row.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
.rcb-top { display: flex; align-items: center; gap: 6px; }
.rcb-top .rcb-n { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
/* Settings sit UNDER the text, each with its own visible label — an unlabeled
   row of dropdowns reads as noise to whoever has to set this up once a year. */
.rcb-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.rcb-opts > label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.rcb-opts select {
  height: 28px; padding: 0 6px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font-size: 12px; font-family: inherit; font-weight: 400;
}
.rcb-opts .set-switch { font-size: 12px; align-self: flex-end; padding-bottom: 5px; }
.rcb-move { display: inline-flex; gap: 2px; margin-left: auto; }
.rcb-move button {
  width: 24px; height: 26px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text-muted); cursor: pointer; font-size: 12px;
}
.rcb-move button:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.rcb-move button:disabled { opacity: 0.35; cursor: not-allowed; }
.rcb-del {
  width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text-soft); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.rcb-del:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }
.rcb-row textarea {
  width: 100%; resize: vertical; min-height: 44px;
  padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); color: var(--text);
  font-family: var(--mono); font-size: 12px; line-height: 1.45;
}

/* Token palette — click to drop a variable into the line you're editing. */
.rcb-vars { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.rcb-vars .rcbv-lead { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.rcbv-chip {
  padding: 3px 7px; border: 1px solid var(--border); border-radius: 5px;
  background: var(--surface-2); color: var(--accent-700);
  font-family: var(--mono); font-size: 11px; cursor: pointer;
}
.rcbv-chip:hover { border-color: var(--accent); background: var(--accent-bg); }

.rc-paper { border-top: 1px solid var(--border); padding-top: 12px; }
.rc-paper h4 { margin: 0 0 2px; font-size: 13px; }
.rc-paper .set-row { margin-top: 8px; }
.rc-paper select {
  height: 34px; padding: 0 9px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); color: var(--text); font-size: 13px; font-weight: 400; font-family: inherit;
}

/* What the browser can and cannot tell the printer — stated where the setting
   is, not buried in docs. */
.rc-reality {
  display: flex; gap: 7px; align-items: flex-start;
  margin: 10px 0 0; padding: 9px 11px;
  border: 1px solid var(--border); border-left: 3px solid var(--warn, #d2842f);
  border-radius: 7px; background: var(--surface-2);
  font-size: 11px; line-height: 1.45; color: var(--text-muted);
}
.rc-reality svg { flex: 0 0 auto; margin-top: 1px; }

/* The ruler under the preview: how long each slip ACTUALLY is, measured from
   the rendered paper — the only honest answer to "is my ticket too long?". */
.rcp-ruler { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.rcpr-row { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-muted); }
.rcpr-row .rcpr-n {
  width: 15px; height: 15px; border-radius: 50%; background: var(--surface-3);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.rcpr-row .rcpr-name { flex: 1 1 auto; }
.rcpr-row .rcpr-mm { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
.rcpr-row .rcpr-mm.is-clipped { color: var(--danger); font-weight: 700; }
/* "0 = auto" only reads as auto if it says so next to the box. */
.rc-paper .set-row label { position: relative; }
.rc-auto-tag {
  margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--accent-bg); color: var(--accent-700);
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
}

/* ---- Order finalization + payment methods -------------------------------
   The cash desk's close-out popup, the Cash|Card|Other row it shares with the
   cart and the table bill, and the Settings editor behind them. */

/* The method row grows a third slot when the venue added its own methods, so
   the two-column grid the cart and bill used becomes auto-fit. */
.cart .pay-section .pm-row,
.bill-pay .pm-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 8px;
}
.pm-other-wrap { position: relative; }
.pm.other { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.pm.other.picked { border-color: var(--text); color: var(--text); }
.pm-other-menu {
  position: absolute; z-index: 40; right: 0; bottom: calc(100% + 6px);
  min-width: 190px; padding: 5px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-lg, 0 12px 28px rgba(0, 0, 0, 0.18));
  display: flex; flex-direction: column; gap: 2px;
}
.pmo-row {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 9px; border: 0; border-radius: 6px;
  background: transparent; color: var(--text);
  font-size: 13px; text-align: left;
}
.pmo-row:hover { background: var(--surface-3); }
.pmo-row.on { font-weight: 700; }
.pmo-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.pmo-name { flex: 1 1 auto; }

/* ---- ՀԴՄ: the fiscal-receipt failure dialog ------------------------------
   Stacks over the finalization popup (the sale is already committed by then)
   and has no dismiss control on purpose: both buttons resolve the job, and a
   fiscal obligation does not go away because someone closed a window. */
/* 260/262/270, not 60/62/70: these three are `.ie-scrim`s, and that base class
   already sits at 160 — so the old numbers put every fiscal layer UNDERNEATH
   the very popups they are meant to stack over (the finalize popup at 160, the
   bill panel at 160, the modifier modal at 200). The band above 200 is the top
   of the modal scale; app chrome that must still win — the welcome screen
   (300), the billing veil (320) and the billing lock (2000) — stays above. */
.ie-scrim.fiscal-fail { z-index: 260; }
.pos-fiscal-fail .ie-head { border-bottom-color: var(--warn); }
/* Said first, and in the calm colour: the order did NOT fail. A cashier who
   reads this as a failed sale will ring the whole thing up a second time. */
.pos-fiscal-fail .ff-sale-ok {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 12px;
  padding: 9px 11px; border-radius: 8px;
  background: var(--accent-bg); color: var(--accent-700);
  font-size: 13px; font-weight: 500;
}
.pos-fiscal-fail .ff-sale-ok svg { flex: 0 0 auto; margin-top: 2px; }
.pos-fiscal-fail .ff-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 13px; font-weight: 600; color: var(--text);
  margin-bottom: 8px;
}
.pos-fiscal-fail .ff-meta .muted { font-weight: 400; }
/* The reason is written for a cashier mid-service ("load paper, then retry"),
   so it gets the size of an instruction, not of an error code. */
.pos-fiscal-fail .ff-reason {
  margin: 0 0 10px;
  padding: 11px 12px; border-radius: 8px;
  background: var(--warn-bg); color: var(--warn-strong);
  border-left: 3px solid var(--warn);
  font-size: 15px; line-height: 1.4;
}
.pos-fiscal-fail .ff-reason.warn {
  background: var(--danger-bg); color: var(--danger); border-left-color: var(--danger);
}
.pos-fiscal-fail .ff-check { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); }
.pos-fiscal-fail .ie-actions .btn { flex: 1 1 0; justify-content: center; }

/* ---- ՀԴՄ: the settle was REFUSED (409) ----------------------------------
   Sibling of the dialog above and its exact opposite: no money was taken and
   the order is still open. Same shell, danger accent instead of warn, and no
   dismiss — Retry or pick another payment method are the only two ways out. */
.ie-scrim.fiscal-declined { z-index: 262; }
.pos-fiscal-declined .ie-head { border-bottom-color: var(--danger); }
.pos-fiscal-declined .fd-not-paid {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 12px;
  padding: 9px 11px; border-radius: 8px;
  background: var(--danger-bg); color: var(--danger);
  font-size: 13px; font-weight: 600;
}
.pos-fiscal-declined .fd-not-paid svg { flex: 0 0 auto; margin-top: 2px; }
.pos-fiscal-declined .ff-reason { background: var(--warn-bg); color: var(--warn-strong); border-left-color: var(--warn); }
.pos-fiscal-declined .ff-reason.warn { background: var(--danger-bg); color: var(--danger); border-left-color: var(--danger); }
/* One lone caption, so it reads as a label on the reason below rather than a
   stranded right-hand column (the failure dialog pairs it with an order no.). */
.pos-fiscal-declined .ff-meta { display: block; font-size: 12px; margin: 0 0 4px 2px; }
.pos-fiscal-declined .ff-check { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); }
.pos-fiscal-declined .ie-actions .btn { flex: 1 1 0; justify-content: center; }

/* ---- ՀԴՄ: waiting on the terminal ---------------------------------------
   Above everything, including both dialogs above: while the server is holding
   the settle open there is nothing else on this screen worth touching. No close
   button and no scrim dismissal — the request is live, and walking away from it
   is how a receipt gets filed with the tax office and lost from the books.
   Everything here exists to say "still working": a counter that ticks, a bar
   that travels, and the name of the box we are waiting on. */
.ie-scrim.fiscal-wait { z-index: 270; }
/* The popup underneath is `inert` while this is up (renderFinalizeModal), so it
   is genuinely unreachable by pointer AND by Tab. This is the belt to that
   braces, for anything that does not honour `inert`. */
.ie-scrim.is-waiting { pointer-events: none; user-select: none; }
.ie-scrim.is-waiting .ie-panel { opacity: 0.55; filter: saturate(0.6); }
.pos-fiscal-wait .fw-body {
  display: flex; flex-direction: column; align-items: center; min-height: 0;
  padding: 26px 24px 22px; text-align: center;
}
.pos-fiscal-wait .fw-body h3 { margin: 0 0 6px; font-size: 19px; line-height: 1.3; color: var(--text); }
.pos-fiscal-wait .fw-sub { margin: 0 0 16px; font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.pos-fiscal-wait .fw-spin { display: flex; gap: 7px; margin-bottom: 16px; }
.pos-fiscal-wait .fw-spin span {
  width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
  animation: fw-bounce 1.05s ease-in-out infinite;
}
.pos-fiscal-wait .fw-spin span:nth-child(2) { animation-delay: 0.15s; }
.pos-fiscal-wait .fw-spin span:nth-child(3) { animation-delay: 0.3s; }
@keyframes fw-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
  40%           { transform: translateY(-6px); opacity: 1; }
}
.pos-fiscal-wait .fw-meta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-bottom: 10px;
  font-size: 12px; color: var(--text-muted);
}
.pos-fiscal-wait .fw-meta .fw-name { font-weight: 700; color: var(--text); }
.pos-fiscal-wait .fw-meta .fw-elapsed { font-variant-numeric: tabular-nums; }
.pos-fiscal-wait .fw-bar {
  width: 100%; height: 4px; border-radius: 999px;
  background: var(--surface-2); overflow: hidden;
}
.pos-fiscal-wait .fw-bar > span {
  display: block; width: 38%; height: 100%; border-radius: 999px;
  background: var(--accent);
  animation: fw-travel 1.6s ease-in-out infinite;
}
@keyframes fw-travel {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(265%); }
}
.pos-fiscal-wait .fw-warn { margin: 14px 0 0; font-size: 12px; line-height: 1.4; color: var(--text-muted); }
/* Reduced motion: the movement is information here, so it is slowed rather
   than removed — a still overlay is exactly the "is it frozen?" it exists to
   answer, and the elapsed counter keeps ticking either way. */
@media (prefers-reduced-motion: reduce) {
  .pos-fiscal-wait .fw-spin span { animation-duration: 2.4s; }
  .pos-fiscal-wait .fw-bar > span { animation-duration: 4s; }
}

/* The popup itself. Reuses the .ie-panel shell the shift modals use. */
.pos-finalize .fin-breakdown {
  border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 12px;
  background: var(--surface-2, var(--surface));
}
.pos-finalize .fin-breakdown .row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; color: var(--text-muted); padding: 2px 0;
}
.pos-finalize .fin-breakdown .row.cpn-discount { color: var(--accent-700, var(--accent)); }
.pos-finalize .fin-due {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--text-muted);
}
.pos-finalize .fin-due strong { font-size: 22px; color: var(--text); }
.pos-finalize .fin-delta {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin: -4px 0 12px; padding: 7px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 600;
}
.pos-finalize .fin-delta.down { background: var(--accent-bg); color: var(--accent-700, var(--accent)); }
.pos-finalize .fin-delta.up { background: var(--warn-bg, var(--surface-3)); color: var(--warn, var(--text)); }
.pos-finalize .fin-delta strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.pos-finalize .fin-change {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 8px; padding: 9px 11px; border-radius: 6px;
  background: var(--accent-bg); color: var(--accent-700, var(--accent));
  font-size: 13px; font-weight: 600;
}
.pos-finalize .fin-change strong { font-size: 20px; }
.pos-finalize .fin-change.short { background: var(--danger-bg, var(--surface-3)); color: var(--danger); }
.pos-finalize .fin-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pos-finalize .qt {
  padding: 7px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.pos-finalize .qt:hover { background: var(--surface-3); }
.pos-finalize .pm-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; margin-bottom: 12px; }
.pos-finalize .pm {
  height: 40px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); font-size: 13px; font-weight: 600; color: var(--text-muted);
}
.pos-finalize .pm[aria-pressed="true"] { border-color: var(--text); color: var(--text); }
/* The menu opens DOWNWARD here — the row sits near the top of the panel. */
.pos-finalize .pm-other-menu { bottom: auto; top: calc(100% + 6px); }

/* Orders History: what was actually charged vs what the menu said. */
.history-payment {
  margin: 10px 0 0; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.history-payment .hp-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--text-muted); }
.history-payment .hp-row strong { color: var(--text); font-variant-numeric: tabular-nums; }
.history-payment .hp-row.down strong { color: var(--accent-700, var(--accent)); }
.history-payment .hp-row.up strong { color: var(--warn, var(--text)); }
.history-payment .hp-reason { margin: 4px 0 0; font-size: 12px; font-style: italic; color: var(--text-muted); }

/* Settings › Payment: one row per method. */
.settings .pay-sub { margin: 18px 0 8px; font-size: 13px; }
.settings .pay-methods { display: flex; flex-direction: column; gap: 8px; }
.settings .pay-method {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
}
.settings .pay-method.off { opacity: 0.55; }
.settings .pay-method .pm-swatch { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.settings .pay-method input[type="text"] { flex: 1 1 150px; min-width: 120px; }
.settings .pay-method select { flex: 0 0 auto; }
.settings .pm-flag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.settings .pm-tools { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.settings .pm-locked { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.settings .pay-add { display: flex; gap: 8px; margin-top: 10px; }
.settings .pay-add input { flex: 1 1 auto; }
.settings .muted.small { font-size: 12px; margin-top: 4px; }

/* Finalization popup: the coupon controls it borrows from the cart, the empty
   "Other" picker, and the locked price field. */
.pos-finalize .cart-coupon { margin: 0 0 12px; padding: 0; }
.pos-finalize .cc-entry { display: flex; gap: 6px; }
.pos-finalize .cc-entry input { flex: 1 1 auto; min-width: 0; }
.pmo-empty {
  margin: 0; padding: 10px 11px;
  font-size: 12px; line-height: 1.45; color: var(--text-muted);
}
.pos-finalize .acc-field.is-locked input { background: var(--surface-3); color: var(--text-muted); cursor: not-allowed; }
.fin-lock {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--surface-3); color: var(--text-muted);
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
}
.fin-lock svg { flex: 0 0 auto; }

/* The ⋮ in the finalization header, and the manual-price dialog it opens.
   Overriding a total is deliberate and rare, so it lives one step off the
   tap-path rather than beside "cash or card". */
.pos-finalize .fin-head-tools { display: inline-flex; align-items: center; gap: 2px; }
.fin-more-wrap { position: relative; }
.fin-more-wrap .iconbtn.on { background: var(--surface-3); }
.fin-more-menu {
  position: absolute; z-index: 60; right: 0; top: calc(100% + 6px);
  min-width: 250px; padding: 5px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-lg, 0 12px 28px rgba(0, 0, 0, 0.18));
  display: flex; flex-direction: column; gap: 2px;
}
.fmm-row {
  display: flex; align-items: flex-start; gap: 9px;
  width: 100%; padding: 9px 10px; border: 0; border-radius: 6px;
  background: transparent; color: var(--text); text-align: left;
}
.fmm-row:hover:not(:disabled) { background: var(--surface-3); }
.fmm-row:disabled { opacity: 0.6; cursor: not-allowed; }
.fmm-row.danger { color: var(--danger); }
.fmm-row svg { flex: 0 0 auto; margin-top: 1px; }
.fmm-tx { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.fmm-tx strong { font-size: 13px; font-weight: 600; }
.fmm-tx em { font-style: normal; font-size: 11px; line-height: 1.35; color: var(--text-muted); }

/* Second dialog, stacked on the popup. Above the parent's scrim, and darker so
   the stack reads as depth rather than as two competing windows. */
.ie-scrim.fin-nested { z-index: 120; background: rgba(0, 0, 0, 0.32); }
.pos-price-edit .fin-due { border-top: 0; padding-top: 0; margin-bottom: 12px; }
.pos-price-edit .fin-delta { margin: -4px 0 12px; }

/* A committed override in the breakdown: the menu figure stays struck through
   next to what is actually being charged. */
.fin-breakdown .row.fin-manual { color: var(--text); font-weight: 600; }
.fin-breakdown.has-override .fin-due strong s {
  color: var(--text-soft); font-weight: 500; font-size: 15px; margin-right: 4px;
}

/* ---- Awaiting-payment table stage -----------------------------------------
   The bill is on the table and the venue is waiting for the money to come
   back. This is a SOLID amber fill, not a tint: a floor manager reads it from
   across the room, which is the whole point of the stage. */
.table-tile.awaiting,
.table-row.awaiting,
.floor-table.awaiting {
  border-color: var(--warn);
  background: var(--warn);
}
/* Everything inside sits on amber now, so it all takes the dark ink. */
.table-tile.awaiting .bill,
.table-row.awaiting .tr-main,
.floor-table.awaiting .ft-main { background: transparent; }
.table-tile.awaiting .bill .lbl,
.table-tile.awaiting .bill .num,
.table-tile.awaiting .bill .status.active,
.table-tile.awaiting .bill .status.active .amt,
.table-tile.awaiting .bill .status.active .cnt,
.table-row.awaiting .tr-num,
.table-row.awaiting .tr-status.active,
.table-row.awaiting .tr-amt,
.floor-table.awaiting .ft-num,
.floor-table.awaiting .ft-amt,
.floor-table.awaiting .ft-cnt { color: #3F2A06; }
.table-tile.awaiting .bill:hover,
.table-row.awaiting .tr-main:hover,
.floor-table.awaiting .ft-main:hover { background: rgba(0, 0, 0, 0.06); }
.table-tile.awaiting .new,
.table-row.awaiting .tr-add,
.floor-table.awaiting .ft-add {
  background: rgba(0, 0, 0, 0.08); color: #3F2A06; border-color: rgba(0, 0, 0, 0.14);
}
.table-tile.awaiting .bill .status.active .cnt,
.table-row.awaiting .tr-status.active,
.floor-table.awaiting .ft-cnt { font-weight: 800; }

/* Checkout modal: the stage chip under the title. */
.bill-stage-chip {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 4px; padding: 3px 9px; border-radius: 999px;
  background: var(--warn-bg); color: var(--warn-strong);
  font-size: 11px; font-weight: 600;
  align-self: flex-start;
}

/* Print bill and Close table are peers. Whichever one the stage says you are
   here to do gets the filled treatment; the other stays outlined. */
.bill-actions { display: flex; flex-direction: column; gap: 8px; }
.bill-print {
  height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; border: 0; border-radius: 8px;
  background: var(--warn); color: #3F2A06;
}
.bill-print:hover { filter: brightness(0.96); }
.bill-print .l {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.bill-print .v { font-size: 17px; font-weight: 700; }
/* Demoted: still a real button, just not the one being suggested. */
.bill-print.secondary,
.bill-settle.secondary {
  height: 44px;
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border);
}
.bill-print.secondary:hover,
.bill-settle.secondary:hover { background: var(--surface-3); color: var(--text); filter: none; }
.bill-print.secondary .l,
.bill-settle.secondary .l { font-size: 12px; }
.bill-print.secondary .v,
.bill-settle.secondary .v { font-size: 14px; }

/* The method picker belongs to Close table, so they read as one control: the
   pair sits tight, and the standalone print button keeps its distance. */
.bill-actions { gap: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.bill-close-group { display: flex; flex-direction: column; gap: 6px; }
.bill-close-group .bcg-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-soft);
}
/* A secondary action states what it does and nothing else — no amount, no
   method, both of which are already on screen inches away. */
.bill-settle.secondary { justify-content: center; }
.bill-print.secondary { justify-content: center; }

/* ── Toasts (non-blocking notifications — the alert() replacement) ───────── */
.toast-stack {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-left-width: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  font-size: 13px;
  line-height: 1.35;
  pointer-events: auto;
  animation: toast-in 0.16s ease-out;
}
.toast.leaving { opacity: 0; transform: translateY(6px); transition: opacity 0.18s, transform 0.18s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.toast-error { border-left-color: var(--danger, #d64545); }
.toast-warn { border-left-color: var(--warn, #d9a013); }
.toast-success { border-left-color: var(--ok, #2e9e5b); }
.toast-info { border-left-color: var(--accent, #5b7fb5); }
.toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.toast-msg { min-width: 0; }
.toast-detail { font-size: 11px; color: var(--muted, #8a8f98); overflow-wrap: anywhere; }
.toast-count {
  flex: none;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.toast-action {
  flex: none;
  border: 1px solid var(--border);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.toast-action:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.toast-close {
  flex: none;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.55;
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
}
.toast-close:hover { opacity: 1; }
@media (max-width: 720px) {
  /* Sit above the mobile tab bar. */
  .toast-stack { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); left: 12px; right: 12px; max-width: none; }
}

/* Offline pill — reuses the db-badge shell, red because nothing is going through. */
.db-badge.net-offline {
  color: #fff;
  background: var(--danger, #d64545);
  border-color: var(--danger, #d64545);
  cursor: default;
}

/* The delta row doubles as the "type an amount" hint before anything differs,
   so it drops its tint and reads as quiet guidance rather than a result. */
.fin-delta.is-hint {
  background: transparent;
  color: var(--text-muted);
  font-weight: 400;
  padding-left: 0; padding-right: 0;
}
/* `hidden` is only display:none in the UA sheet, so an author display rule
   beats it — these two are toggled by the live sync and must actually hide. */
.fin-quick[hidden], .fin-change[hidden] { display: none; }