:root {
  --green-900: #06382c;
  --green-800: #0b4a3a;
  --green-700: #0f5c4a;
  --green-600: #14785f;
  --green-500: #1c9475;
  --green-100: #d9efe8;
  --green-50:  #eef8f4;

  --amber-700: #8a5a00;
  --amber-500: #d69a12;
  --amber-100: #fdf0d5;

  --red-700: #a32114;
  --red-600: #c22e1c;
  --red-100: #fdecea;

  --blue-700: #1d4c86;
  --blue-100: #e4eefa;

  --violet-700: #5b3d9e;
  --violet-100: #ece6fa;

  --ink-900: #101a20;
  --ink-700: #2c3b45;
  --ink-500: #5a6b77;
  --ink-400: #7b8a95;
  --line:    #dde4e8;
  --line-strong: #c3ced5;
  --surface: #ffffff;
  --surface-2: #f6f9fa;
  --surface-3: #eef3f5;
  --page: #f2f6f7;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --shadow-1: 0 1px 2px rgba(16, 26, 32, .06), 0 1px 3px rgba(16, 26, 32, .07);
  --shadow-2: 0 4px 10px rgba(16, 26, 32, .08), 0 2px 4px rgba(16, 26, 32, .06);
  --shadow-3: 0 18px 44px rgba(16, 26, 32, .18);

  --topbar-h: 56px;
  --sidenav-w: 244px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

[data-theme="dark"] {
  --green-900: #041f19;
  --green-800: #0a3a2e;
  --green-700: #14785f;
  --green-600: #1c9475;
  --green-500: #27b48d;
  --green-100: #10352a;
  --green-50:  #0c2a22;

  --amber-700: #e0aa3c;
  --amber-500: #d69a12;
  --amber-100: #33280c;

  --red-700: #f0836f;
  --red-600: #e5674f;
  --red-100: #3a1c17;

  --blue-700: #86b6ec;
  --blue-100: #14273b;

  --violet-700: #b9a4ee;
  --violet-100: #241d3a;

  --ink-900: #eef3f5;
  --ink-700: #c8d4da;
  --ink-500: #93a3ad;
  --ink-400: #74858f;
  --line:    #24333b;
  --line-strong: #33454f;
  --surface: #131d23;
  --surface-2: #18242b;
  --surface-3: #1e2c34;
  --page: #0d1519;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 4px 12px rgba(0,0,0,.45);
  --shadow-3: 0 18px 44px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }

html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-900);
  background: var(--page);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }
p { margin: 0 0 .8em; }
a { color: var(--green-700); }
[data-theme="dark"] a { color: var(--green-500); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--green-600); outline-offset: 2px; border-radius: 4px; }
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--green-700); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }
[hidden] { display: none !important; }

/* ------------------------------- boot ------------------------------- */
.boot {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--green-800), var(--green-900));
  color: #eaf6f1; z-index: 300;
}
.boot-inner { text-align: center; width: min(320px, 84vw); }
.boot-mark { color: #7fdcbf; margin-bottom: 12px; }
.boot-title { font-size: 1.7rem; letter-spacing: .02em; margin: 0 0 6px; color: #fff; }
.boot-line { color: #a9cfc2; font-size: .88rem; min-height: 1.3em; margin: 0 0 16px; }
.boot-bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.16); overflow: hidden; }
.boot-bar span { display: block; height: 100%; width: 8%; background: #7fdcbf; border-radius: 4px; transition: width .35s ease; }
.boot.is-error .boot-line { color: #ffc9bf; }

/* ------------------------------ login ------------------------------- */
.login-screen { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; background: var(--page); }
.login-card {
  width: min(408px, 100%); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px 26px 22px; box-shadow: var(--shadow-2);
}
.login-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 22px; color: var(--green-700); }
[data-theme="dark"] .login-brand { color: var(--green-500); }
.login-brand h1 { margin: 0; font-size: 1.28rem; color: var(--ink-900); }
/* The client's own logo, when the deployment has one. Sized to the wordmark it replaces so
   the sign-in card does not move by a pixel when a logo is uploaded or removed. */
#login-brand-logo { width: 40px; height: 40px; object-fit: contain; }
.login-brand p { margin: 2px 0 0; font-size: .82rem; color: var(--ink-500); }
.brand-logo-row { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-top: 6px; }
.brand-logo-preview { max-width: 132px; max-height: 64px; object-fit: contain; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); padding: 4px; }
.field { display: block; position: relative; margin-bottom: 16px; }
.field-label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-500); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green-600); box-shadow: 0 0 0 3px var(--green-100); outline: none; }
.field-reveal { position: absolute; right: 6px; bottom: 6px; background: none; border: 0; color: var(--green-700); font-size: .78rem; font-weight: 600; cursor: pointer; padding: 6px 8px; border-radius: 6px; }
.login-foot { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 18px; font-size: .8rem; color: var(--ink-500); }
.login-hint { margin: 14px 0 0; font-size: .8rem; color: var(--ink-500); background: var(--amber-100); padding: 10px 12px; border-radius: var(--radius-sm); }
.dot { color: var(--line-strong); }

/* ------------------------------ shell ------------------------------- */
.shell { min-height: 100%; display: grid; grid-template-columns: var(--sidenav-w) 1fr; grid-template-rows: var(--topbar-h) 1fr; grid-template-areas: "nav top" "nav main"; }
.topbar {
  grid-area: top; position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 8px;
  padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.topbar-brand { display: flex; flex-direction: column; min-width: 0; }
.topbar-brand #brand-name { font-weight: 700; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-sub { font-size: .7rem; color: var(--ink-500); white-space: nowrap; }
.topbar-spacer { flex: 1; }

.sidenav {
  grid-area: nav; background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; overflow-y: auto; z-index: 60;
}
.sidenav-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 14px 8px; }
.sidenav-business { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-500); }
.nav-list { flex: 1; padding: 4px 8px 16px; }
.nav-group { margin: 12px 0 4px; padding: 0 8px; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-400); font-weight: 700; }
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 10px; border: 0; background: none; border-radius: var(--radius-sm);
  color: var(--ink-700); cursor: pointer; font-size: .9rem; font-weight: 500;
}
.nav-item:hover { background: var(--surface-3); }
.nav-item.is-active { background: var(--green-50); color: var(--green-800); font-weight: 650; }
[data-theme="dark"] .nav-item.is-active { background: var(--green-100); color: var(--green-500); }
.nav-item svg { flex: none; opacity: .8; }
.nav-badge { margin-left: auto; background: var(--red-600); color: #fff; font-size: .68rem; font-weight: 700; border-radius: 20px; padding: 1px 7px; }
.sidenav-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: .78rem; }
.build-tag { color: var(--ink-400); font-family: var(--mono); font-size: .7rem; }

.main { grid-area: main; overflow-y: auto; padding: 18px 18px calc(28px + env(safe-area-inset-bottom)); }
.view { max-width: 1400px; margin: 0 auto; }
.scrim { position: fixed; inset: 0; background: rgba(4, 16, 20, .45); z-index: 55; backdrop-filter: blur(1px); }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; grid-template-areas: "top" "main"; }
  .sidenav { position: fixed; top: 0; bottom: 0; left: 0; width: min(var(--sidenav-w), 82vw); transform: translateX(-102%); transition: transform .22s ease; box-shadow: var(--shadow-3); }
  .sidenav.is-open { transform: none; }
  .topbar-brand { display: none; }
  .main { padding: 14px 12px calc(24px + env(safe-area-inset-bottom)); }
}
@media (min-width: 901px) { #nav-toggle, #nav-close { display: none; } .scrim { display: none !important; } }

/* ------------------------------ chips ------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px;
  border-radius: 20px; border: 1px solid var(--line-strong); background: var(--surface-2);
  font-size: .78rem; font-weight: 600; color: var(--ink-700); cursor: default; white-space: nowrap;
}
button.chip { cursor: pointer; }
button.chip:hover { background: var(--surface-3); }
.chip-branch { max-width: 190px; }
.chip-branch span:last-child { overflow: hidden; text-overflow: ellipsis; }
.net-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-400); flex: none; }
.chip-net[data-state="online"] .net-dot { background: #18a06f; box-shadow: 0 0 0 3px rgba(24,160,111,.18); }
.chip-net[data-state="offline"] .net-dot { background: var(--red-600); box-shadow: 0 0 0 3px rgba(194,46,28,.18); }
.chip-net[data-state="degraded"] .net-dot { background: var(--amber-500); }
.chip-net[data-state="syncing"] .net-dot { background: var(--blue-700); animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.chip-queue { background: var(--amber-100); border-color: var(--amber-500); color: var(--amber-700); }
@media (max-width: 620px) {
  .chip-net span:last-child { display: none; }
  .chip-net { padding: 0 9px; }
  .chip-branch { max-width: 120px; }
}

.icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 0; background: none; border-radius: 50%; color: var(--ink-700); cursor: pointer; }
.icon-btn:hover { background: var(--surface-3); }
.icon-btn-sm { width: 30px; height: 30px; }
#theme-toggle .icon-moon { display: none; }
[data-theme="dark"] #theme-toggle .icon-sun { display: none; }
[data-theme="dark"] #theme-toggle .icon-moon { display: block; }
.avatar { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--green-700); color: #fff; font-weight: 700; font-size: .82rem; cursor: pointer; display: grid; place-items: center; }
.avatar:hover { filter: brightness(1.1); }
.link-btn { background: none; border: 0; color: var(--green-700); cursor: pointer; padding: 4px; font-size: .82rem; font-weight: 600; }
[data-theme="dark"] .link-btn { color: var(--green-500); }

/* A paused subscription is not a network state: it is a decision by the vendor, and
   the shop has to be able to read it, understand it and ring somebody about it. It
   sits at the top of the bar stack so it is never hidden behind the offline bar. */
.subscription-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 46;
  background: var(--red-100); color: var(--red-700); border-top: 1px solid var(--red-700);
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); font-size: .8rem; text-align: center;
  display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap;
}
.subscription-bar.is-vendor { background: var(--amber-100); color: var(--amber-700); border-top-color: var(--amber-500); }
.subscription-bar .link-btn { color: inherit; text-decoration: underline; }

.offline-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: var(--amber-100); color: var(--amber-700); border-top: 1px solid var(--amber-500);
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); font-size: .8rem; text-align: center;
}

/* ------------------------------ menu -------------------------------- */
.menu-pop {
  position: fixed; top: 50px; right: 10px; z-index: 120; min-width: 232px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-3); overflow: hidden;
}
.menu-head { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.menu-head span { font-size: .76rem; color: var(--ink-500); }
.menu-item { display: block; width: 100%; text-align: left; padding: 10px 14px; background: none; border: 0; cursor: pointer; font-size: .88rem; }
.menu-item:hover { background: var(--surface-3); }
.menu-sep { height: 1px; background: var(--line); }

/* ------------------------------ alerts ------------------------------ */
.bell-btn { position: relative; }
.bell-badge {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 9px; background: var(--red-600, #b42318); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  box-shadow: 0 0 0 2px var(--surface);
}
.bell-pop { width: min(380px, 92vw); max-height: min(72vh, 560px); display: flex; flex-direction: column; }
.bell-list { overflow-y: auto; }
.bell-item { display: block; width: 100%; text-align: left; padding: 11px 14px; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.bell-item:hover { background: var(--surface-3); }
.bell-item.is-read { opacity: .55; }
.bell-row { display: flex; align-items: baseline; gap: 8px; }
.bell-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 5px; background: var(--blue-600, #1c64f2); }
.bell-dot.sev-WARNING { background: var(--amber-600, #a15c00); }
.bell-dot.sev-CRITICAL { background: var(--red-600, #b42318); }
.bell-title { font-size: .88rem; font-weight: 600; }
.bell-body { font-size: .8rem; color: var(--ink-600, var(--ink-500)); margin-top: 2px; }
.bell-meta { font-size: .72rem; color: var(--ink-500); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; }
.bell-foot { padding: 8px 12px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.bell-empty { padding: 22px 16px; text-align: center; color: var(--ink-500); font-size: .86rem; }

/* ------------------------------ content ----------------------------- */
.page-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 16px; }
.page-head h1 { margin: 0; }
.page-head .sub { color: var(--ink-500); font-size: .86rem; margin: 2px 0 0; }
.page-head .actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); margin-bottom: 16px; }
.card-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.card-head h2, .card-head h3 { margin: 0; }
.card-head .spacer { flex: 1; }
.card-body { padding: 15px; }
.card-body.tight { padding: 0; }
.card-foot { padding: 11px 15px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }

.grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); }
.grid-5 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row > .grow { flex: 1; min-width: 140px; }
.stack { display: flex; flex-direction: column; gap: 12px; }

/* KPI tiles */
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px; box-shadow: var(--shadow-1); }
.kpi-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-500); font-weight: 650; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.kpi-icon { display: inline-flex; align-items: center; color: var(--ink-400, var(--ink-500)); flex: none; }
/* The label shrinks before the chip does: "Sales 07 Sept → 07 Oct" is a long label and the
   chip beside it is the only thing on the row that is a fact about the figure below. */
.kpi-label-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A TREND CHIP: an arrow pointing the way the figure actually went, with the amount it
   moved. Green when that direction is good for the shop, red when it is not — and the
   direction is read off the number, never off the label. */
.kpi-trend {
  margin-left: auto; display: inline-flex; align-items: center; gap: 2px; flex: none;
  font-size: .72rem; font-weight: 700; letter-spacing: 0; text-transform: none;
  padding: 1px 6px; border-radius: 999px; background: var(--surface-2, rgba(127,127,127,.09));
  color: var(--ink-600, var(--ink-500));
}
.kpi-trend-icon { display: inline-flex; align-items: center; }
.kpi-trend.is-good { color: var(--green-700); background: var(--green-100, var(--surface-2, rgba(127,127,127,.09))); }
.kpi-trend.is-bad { color: var(--red-700); background: var(--red-100); }
.kpi-trend.is-flat { color: var(--ink-500); }
[data-theme="dark"] .kpi-trend.is-good { color: var(--green-500); }
[data-theme="dark"] .kpi-trend.is-bad { color: var(--red-700); }
/* The leading glyph on an action row — same vocabulary as the sidebar, so a row that
   says "3 batches expiring" carries the calendar the Stock screen uses. */
.row-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--surface-2, rgba(127,127,127,.09)); color: var(--ink-600, var(--ink-500)); flex: none; margin-right: 10px; }
.kpi.tone-good .kpi-icon { color: var(--green-700); }
.kpi.tone-warn .kpi-icon { color: var(--amber-700); }
.kpi.tone-bad  .kpi-icon { color: var(--red-700); }
.kpi.tone-info .kpi-icon { color: var(--blue-700); }
.kpi-value { font-size: 1.42rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi-value.sm { font-size: 1.1rem; }
.kpi-foot { font-size: .76rem; color: var(--ink-500); margin-top: 4px; }
.kpi.tone-good .kpi-value { color: var(--green-700); }
.kpi.tone-warn .kpi-value { color: var(--amber-700); }
.kpi.tone-bad  .kpi-value { color: var(--red-700); }
[data-theme="dark"] .kpi.tone-good .kpi-value { color: var(--green-500); }
.kpi.tone-info .kpi-value { color: var(--blue-700); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 0 15px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink-900); font-weight: 600; font-size: .88rem;
  cursor: pointer; transition: background .13s, border-color .13s, transform .06s; white-space: nowrap;
}
.btn:hover { background: var(--surface-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.btn-primary:hover { background: var(--green-600); }
.btn-danger { background: var(--red-600); border-color: var(--red-600); color: #fff; }
.btn-danger:hover { background: var(--red-700); }
.btn-ghost { background: none; border-color: transparent; }
.btn-ghost:hover { background: var(--surface-3); }
.btn-sm { min-height: 32px; padding: 0 10px; font-size: .8rem; border-radius: 7px; }
.btn-lg { min-height: 50px; font-size: 1rem; padding: 0 22px; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: .86rem; }
table.data th, table.data td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data thead th { position: sticky; top: 0; background: var(--surface-2); font-size: .74rem; text-transform: uppercase; letter-spacing: .045em; color: var(--ink-500); font-weight: 700; z-index: 1; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: .82rem; }
table.data td.wrap { white-space: normal; min-width: 180px; }
table.data tfoot td { font-weight: 700; background: var(--surface-2); border-top: 2px solid var(--line-strong); }
table.data tr.is-clickable { cursor: pointer; }
table.data tr.row-warn td { background: var(--amber-100); }
table.data tr.row-bad td { background: var(--red-100); }
.mono { font-family: var(--mono); font-size: .82em; }

/* badges */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; background: var(--surface-3); color: var(--ink-700); white-space: nowrap; }
.badge-good { background: var(--green-100); color: var(--green-800); }
.badge-warn { background: var(--amber-100); color: var(--amber-700); }
.badge-bad  { background: var(--red-100); color: var(--red-700); }
.badge-info { background: var(--blue-100); color: var(--blue-700); }
.badge-mute { background: var(--surface-3); color: var(--ink-500); }
.badge-violet { background: var(--violet-100); color: var(--violet-700); }

/* forms */
.form-grid { display: grid; gap: 13px; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-all { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid .span-2 { grid-column: span 1; } }
input[type="text"], input[type="number"], input[type="date"], input[type="search"], input[type="tel"], input[type="email"], input[type="password"], input[type="datetime-local"], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); font-size: .9rem; min-height: 40px;
}
textarea { min-height: 74px; resize: vertical; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-500) 50%), linear-gradient(135deg, var(--ink-500) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
label.ctl { display: block; font-size: .78rem; font-weight: 650; color: var(--ink-500); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .035em; }
.check { display: flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 500; }
.check input { width: 19px; height: 19px; min-height: 0; accent-color: var(--green-700); }
.hint { font-size: .76rem; color: var(--ink-500); margin-top: 4px; }
.err { font-size: .76rem; color: var(--red-700); margin-top: 4px; font-weight: 600; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 0 0 14px; }
legend { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-500); padding: 0 6px; }

/* alerts */
.alert { padding: 11px 14px; border-radius: var(--radius-sm); font-size: .86rem; border: 1px solid transparent; margin-bottom: 12px; }
.alert strong { font-weight: 700; }
.alert-danger  { background: var(--red-100); color: var(--red-700); border-color: var(--red-600); }
.alert-warn    { background: var(--amber-100); color: var(--amber-700); border-color: var(--amber-500); }
.alert-info    { background: var(--blue-100); color: var(--blue-700); border-color: var(--blue-700); }
.alert-good    { background: var(--green-100); color: var(--green-800); border-color: var(--green-600); }
.alert ul { margin: 6px 0 0; padding-left: 18px; }

.empty { text-align: center; padding: 40px 18px; color: var(--ink-500); }
.empty-mark { color: var(--line-strong); margin-bottom: 10px; }
.empty h3 { color: var(--ink-700); }
.empty p { max-width: 460px; margin: 0 auto 14px; font-size: .87rem; }

/* toasts */
.toasts { position: fixed; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: min(400px, calc(100vw - 24px)); }
.toast { background: var(--ink-900); color: var(--surface); padding: 11px 14px; border-radius: var(--radius-sm); box-shadow: var(--shadow-3); font-size: .86rem; display: flex; gap: 9px; align-items: flex-start; animation: slide-in .18s ease; border-left: 4px solid var(--green-500); }
.toast.t-warn { border-left-color: var(--amber-500); }
.toast.t-err { border-left-color: var(--red-600); }
.toast.t-info { border-left-color: var(--blue-700); }
.toast .toast-x { margin-left: auto; background: none; border: 0; color: inherit; opacity: .6; cursor: pointer; font-size: 1.05rem; line-height: 1; }
@keyframes slide-in { from { transform: translateY(10px); opacity: 0; } }

/* modal */
.modal-root { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 16px; background: rgba(4,16,20,.5); }
.modal { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); width: min(620px, 100%); max-height: 88vh; display: flex; flex-direction: column; }
.modal.wide { width: min(940px, 100%); }
.modal.full { width: min(1080px, 100%); }
.po-line { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; background: var(--surface); }
.po-line.on-order { border-color: var(--green-600); }
.modal.narrow { width: min(430px, 100%); }
.modal-head { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 1.08rem; }
.modal-head .spacer { flex: 1; }
.modal-body { padding: 18px; overflow-y: auto; }
.modal-foot { display: flex; gap: 9px; justify-content: flex-end; padding: 13px 18px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); flex-wrap: wrap; }

/* tabs */
.tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--line); margin-bottom: 15px; overflow-x: auto; }
.tab { padding: 9px 14px; border: 0; background: none; cursor: pointer; font-size: .87rem; font-weight: 600; color: var(--ink-500); border-bottom: 2.5px solid transparent; white-space: nowrap; }
.tab:hover { color: var(--ink-900); }
.tab.is-active { color: var(--green-700); border-bottom-color: var(--green-700); }
[data-theme="dark"] .tab.is-active { color: var(--green-500); border-bottom-color: var(--green-500); }

/* pagination */
.pager { display: flex; gap: 9px; align-items: center; justify-content: flex-end; padding: 11px 15px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--ink-500); }
.pager .spacer { flex: 1; }

/* POS */
.pos { display: grid; grid-template-columns: 1fr 392px; gap: 14px; align-items: start; }
@media (max-width: 1080px) { .pos { grid-template-columns: 1fr; } }
.pos-scan { position: relative; }
.pos-scan input { font-size: 1.05rem; padding: 12px 14px; padding-right: 90px; font-family: var(--mono); }
.pos-scan .scan-btn { position: absolute; right: 6px; top: 6px; }
.scan-flash { animation: flash-good .5s ease; }
@keyframes flash-good { 0% { background: var(--green-100); } 100% { background: var(--surface); } }
.scan-flash-bad { animation: flash-bad .5s ease; }
@keyframes flash-bad { 0% { background: var(--red-100); } 100% { background: var(--surface); } }
.pos-results { max-height: 340px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-top: 8px; }
.pos-hit { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 9px 12px; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.pos-hit:last-child { border-bottom: 0; }
.pos-hit:hover { background: var(--surface-2); }
.pos-hit .ph-name { font-weight: 600; font-size: .89rem; }
.pos-hit .ph-meta { font-size: .75rem; color: var(--ink-500); }
.pos-hit .ph-price { margin-left: auto; font-family: var(--mono); font-weight: 700; font-size: .86rem; }
.cart-line { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.cart-line:last-child { border-bottom: 0; }
.cart-line .cl-name { font-weight: 620; font-size: .89rem; }
.cart-line .cl-meta { font-size: .74rem; color: var(--ink-500); font-family: var(--mono); }
.cart-line .cl-total { text-align: right; font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.cart-line .qty { display: inline-flex; align-items: center; gap: 6px; }
.cart-line .qty button { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; font-weight: 700; }
.cart-line .qty input { width: 62px; text-align: center; min-height: 30px; padding: 3px 5px; font-family: var(--mono); }
.totals { display: flex; flex-direction: column; gap: 6px; }
.totals-row { display: flex; justify-content: space-between; font-size: .88rem; }
.totals-row.grand { font-size: 1.32rem; font-weight: 750; padding-top: 9px; border-top: 2px solid var(--line-strong); margin-top: 5px; font-variant-numeric: tabular-nums; }
.pay-btn { display: grid; gap: 2px; padding: 11px 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; font-size: .8rem; font-weight: 650; text-align: center; }
.pay-btn.is-active { border-color: var(--green-700); background: var(--green-50); color: var(--green-800); }
.pay-btn small { font-weight: 500; color: var(--ink-500); font-size: .68rem; }
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.numpad button { min-height: 46px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); font-size: 1.08rem; font-weight: 650; cursor: pointer; }
.numpad button:hover { background: var(--surface-3); }

/* receipt */
.receipt { font-family: var(--mono); font-size: .79rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; background: var(--surface-2); padding: 14px; border-radius: var(--radius-sm); border: 1px dashed var(--line-strong); max-height: 460px; overflow: auto; }
@media print {
  body * { visibility: hidden; }
  #print-area, #print-area * { visibility: visible; }
  #print-area { position: absolute; left: 0; top: 0; width: 100%; }
  .no-print { display: none !important; }
}

/* charts (pure CSS bars — no chart library, no network) */
.bars { display: flex; flex-direction: column; gap: 7px; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 168px) 1fr auto; gap: 9px; align-items: center; font-size: .83rem; }
.bar-track { height: 18px; background: var(--surface-3); border-radius: 5px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--green-600), var(--green-500)); border-radius: 5px; }
.bar-fill.b2 { background: linear-gradient(90deg, var(--blue-700), #4b8bd6); }
.bar-val { font-family: var(--mono); font-size: .79rem; font-variant-numeric: tabular-nums; }
.spark { display: flex; align-items: flex-end; gap: 2px; height: 42px; }
.spark i { flex: 1; background: var(--green-500); border-radius: 2px 2px 0 0; min-height: 2px; opacity: .85; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 5px 14px; font-size: .86rem; }
.kv dt { color: var(--ink-500); }
.kv dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

.chips-row { display: flex; flex-wrap: wrap; gap: 6px; }
.skeleton { background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%); background-size: 200% 100%; animation: sk 1.3s infinite; border-radius: 6px; height: 15px; }
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.spinner { width: 17px; height: 17px; border: 2.5px solid var(--line-strong); border-top-color: var(--green-600); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-line { display: flex; gap: 9px; align-items: center; color: var(--ink-500); font-size: .85rem; padding: 18px; justify-content: center; }

.stat-line { display: flex; gap: 16px; flex-wrap: wrap; }
.stat-line > div { min-width: 118px; }
.stat-line .sl-k { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-500); font-weight: 650; }
.stat-line .sl-v { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.noscript { padding: 40px; text-align: center; }

@media (max-width: 560px) {
  .page-head .actions { margin-left: 0; width: 100%; }
  .modal-foot { flex-direction: column-reverse; }
  .modal-foot .btn { width: 100%; }
}