/* ============================================================
   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;
  width: 1800px;
  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); }
.cfg svg.lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
}
.cfg .node { z-index: 1; }
.cfg svg.lines path.conn { pointer-events: stroke; cursor: pointer; }
.cfg svg.lines path.conn-halo {
  stroke: var(--surface);
  stroke-width: 6;
  stroke-linecap: round;
  fill: none;
}
.cfg svg.lines path.conn { stroke: var(--text-muted); stroke-width: 2; fill: 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 path.conn:hover { stroke: var(--text); stroke-width: 2.5; }
.cfg svg.lines 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);
}

/* ============================================================
   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); }
.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); }
.canvas.floor-canvas { width: 2400px; 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; }

/* ===== 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); }
.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; }

/* 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 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-msg { flex: 1; min-width: 0; }
.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; }