/* =============================================================================
   Huệ Chi — shared design system (assets/common.css)
   Two ledgers, two colours:
     --contract  (ultramarine)    = contract balance & revenue
     --stock     (clinical green) = physical on-hand stock
   Every action shows which ledger it moves (.ledger indicator + button colour).
   ========================================================================== */
:root {
  --font: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --bg: #eef1f4;
  --surface: #ffffff;
  --surface-2: #f6f8fa;
  --line: #dde3ea;
  --line-2: #c6cfd9;
  --text: #1b2a3a;
  --text-2: #3b4b5c;
  --muted: #637387;
  --slate: #1b2a3a;
  --slate-2: #24374b;

  --contract: #2f4bd1;
  --contract-ink: #1f3399;
  --contract-soft: #eef1ff;
  --contract-line: #cdd5fb;

  --stock: #0f8a6c;
  --stock-ink: #0a6550;
  --stock-soft: #e5f5ef;
  --stock-line: #b5e2d3;

  --warn: #b26a00;
  --warn-ink: #6b3f00;
  --warn-soft: #fff5e3;
  --warn-line: #f2d49b;

  --danger: #c0362c;
  --danger-ink: #7d1d16;
  --danger-soft: #fdeeec;
  --danger-line: #f3c3be;

  --ok: #2d7d46;
  --ok-soft: #e8f5ec;
  --ok-line: #bfe2ca;

  --r-lg: 14px;
  --r: 10px;
  --shadow-pop: 0 18px 50px rgba(20, 35, 55, .22);
  --sidebar-w: 252px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
a { color: var(--contract-ink); }
h1, h2, h3 { margin: 0; line-height: 1.25; letter-spacing: -0.01em; }
h1 { font-size: 24px; font-weight: 700; }
h2 { font-size: 16px; font-weight: 700; }
h3 { font-size: 14px; font-weight: 600; }
p { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
code { font-size: 12px; background: rgba(127,127,127,.16); padding: 1px 5px; border-radius: 4px; word-break: break-word; }
:focus-visible { outline: 2px solid var(--contract); outline-offset: 2px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
.t-contract { color: var(--contract-ink); }
.t-stock { color: var(--stock-ink); }
.t-danger { color: var(--danger); }
.t-warn { color: var(--warn); }
.t-ok { color: var(--ok); }
.role-hidden { display: none !important; }
[hidden] { display: none !important; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  background: var(--slate);
  color: #d6dee8;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  padding: 18px 12px 14px;
  display: flex; flex-direction: column;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 2px 8px 18px; text-decoration: none; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: #fff; color: var(--slate); font-weight: 700; font-size: 15px;
  box-shadow: inset 0 -3px 0 var(--stock), inset 0 3px 0 var(--contract);
}
.brand-name { font-weight: 700; font-size: 16px; color: #fff; letter-spacing: -0.01em; }
.brand-sub { font-size: 12px; color: #93a4b8; }
.nav-group { margin-top: 14px; }
.nav-group-label { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: #8397ad; padding: 4px 10px 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot-contract { background: #8a9cff; }
.dot-stock { background: #4fd1ad; }
.nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin: 1px 0; border-radius: 8px;
  color: #d6dee8; text-decoration: none; font-weight: 500;
}
.nav-link .ico { width: 18px; height: 18px; opacity: .85; }
.nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-link.active { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 3px 0 0 var(--nav-accent, #fff); }
.nav-link[data-tone="contract"] { --nav-accent: #8a9cff; }
.nav-link[data-tone="stock"] { --nav-accent: #4fd1ad; }
.sidebar-foot { margin-top: auto; padding: 16px 10px 4px; font-size: 12px; color: #93a4b8; display: grid; gap: 6px; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-foot .row { display: flex; align-items: center; gap: 8px; }
.sidebar-foot a { color: #c3cfdc; }

.main-col { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  min-height: 60px; padding: 10px 28px;
  background: rgba(238, 241, 244, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); font-size: 13px; }
.crumbs b { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumbs .sep { color: var(--line-2); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.today { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.today .ico { width: 15px; height: 15px; }
.content { padding: 24px 28px 72px; width: 100%; max-width: 1360px; }

.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); cursor: pointer; }
.icon-btn .ico { width: 18px; height: 18px; }
.nav-toggle { display: none; }
.scrim { display: none; }

/* role switch (demo control, dashed = not part of the real product) */
.seg { display: inline-flex; align-items: center; border: 1px dashed #9aa9b9; border-radius: 9px; background: var(--surface); padding: 2px; gap: 2px; }
.seg-label { font-size: 11.5px; color: var(--muted); padding: 0 6px 0 8px; font-weight: 600; }
.seg button { border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 7px; cursor: pointer; color: var(--muted); }
.seg button.on { background: var(--slate); color: #fff; }

.user { position: relative; }
.user-btn { display: flex; align-items: center; gap: 9px; border: 0; background: none; font: inherit; cursor: pointer; padding: 4px 6px; border-radius: 9px; color: var(--text); text-align: left; }
.user-btn:hover { background: rgba(27,42,58,.06); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--slate); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; }
.user-meta b { display: block; font-size: 13px; line-height: 1.2; }
.user-meta small { color: var(--muted); font-size: 12px; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 270px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 6px; display: none; z-index: 40; }
.menu.open { display: block; }
.menu button { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: none; font: inherit; font-size: 13px; padding: 9px 10px; border-radius: 8px; cursor: pointer; color: var(--text); text-align: left; }
.menu button:hover { background: var(--surface-2); }
.menu .ico { width: 16px; height: 16px; color: var(--muted); flex: none; }
.menu-note { font-size: 11.5px; color: var(--muted); padding: 6px 10px 4px; }

/* ---------- page header ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head .sub { color: var(--muted); margin-top: 4px; max-width: 70ch; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); text-decoration: none; margin-bottom: 8px; }
.back-link .ico { width: 14px; height: 14px; transform: rotate(180deg); }
.back-link:hover { color: var(--text); }

/* ---------- surfaces ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.panel-head a { font-size: 13px; font-weight: 600; text-decoration: none; }
.panel-head .sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.panel-body { padding: 16px 18px; }
.panel.ledger-contract { border-top: 3px solid var(--contract); }
.panel.ledger-stock { border-top: 3px solid var(--stock); }
.stack { display: grid; gap: 16px; }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cols-main-side { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }

.meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px 22px; margin: 0; }
.meta-grid dt { font-size: 12px; color: var(--muted); }
.meta-grid dd { margin: 2px 0 0; font-weight: 600; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data th { text-align: left; font-weight: 600; font-size: 12px; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
.data td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.data tbody tr:last-child td { border-bottom: 0; }
.data .num { text-align: right; white-space: nowrap; }
.data .center { text-align: center; }
.data tr.clickable { cursor: pointer; }
.data tr.clickable:hover td { background: #f8fafc; }
.data tr.flag-danger td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.data tr.flag-warn td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.data tr.highlight td { animation: row-flash 2.4s ease; }
.data tfoot td { font-weight: 700; background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 0; }
.data .sub-line { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; font-weight: 400; }
.data a { font-weight: 600; text-decoration: none; }
.data a:hover { text-decoration: underline; }
@keyframes row-flash { 0% { background: #fff3c4; } 100% { background: transparent; } }

.empty { padding: 40px 18px; text-align: center; color: var(--muted); }
.empty b { display: block; color: var(--text); font-size: 15px; margin-bottom: 4px; }
.empty .btn { margin-top: 12px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 15px; border-radius: 9px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--text);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--surface-2); }
.btn .ico { width: 16px; height: 16px; flex: none; }
.btn-sm { height: 31px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--slate); border-color: var(--slate); color: #fff; }
.btn-primary:hover { background: var(--slate-2); }
.btn-contract { background: var(--contract); border-color: var(--contract); color: #fff; }
.btn-contract:hover { background: var(--contract-ink); }
.btn-stock { background: var(--stock); border-color: var(--stock); color: #fff; }
.btn-stock:hover { background: var(--stock-ink); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger-ink); }
.btn-soft-contract { background: var(--contract-soft); border-color: var(--contract-line); color: var(--contract-ink); }
.btn-soft-contract:hover { background: #e2e7ff; }
.btn-soft-stock { background: var(--stock-soft); border-color: var(--stock-line); color: var(--stock-ink); }
.btn-soft-stock:hover { background: #d6efe6; }
.btn-soft-warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-ink); }
.btn-soft-warn:hover { background: #ffecc6; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
a.btn[aria-disabled="true"] { pointer-events: none; }

.demo-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 31px; padding: 0 11px; border-radius: 8px;
  border: 1px dashed #8d9db0; background: #f7f9fb; color: var(--text-2);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.demo-btn::before { content: "Demo"; font-size: 10.5px; font-weight: 700; background: var(--slate); color: #fff; padding: 1px 6px; border-radius: 4px; }
.demo-btn:hover { border-style: solid; }

/* ---------- ledger indicator: which balance an action moves ---------- */
.ledger { display: inline-flex; border-radius: 999px; border: 1px solid var(--line-2); overflow: hidden; font-size: 11.5px; font-weight: 600; background: var(--surface); vertical-align: middle; flex: none; }
.ledger span { padding: 2px 9px; color: #9aa7b6; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ledger span + span { border-left: 1px solid var(--line-2); }
.ledger span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .4; }
.ledger .c.on { background: var(--contract-soft); color: var(--contract-ink); }
.ledger .s.on { background: var(--stock-soft); color: var(--stock-ink); }
.ledger span.on::before { opacity: 1; }
.ledger-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }

/* ---------- badges & chips ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; border: 1px solid transparent; white-space: nowrap; }
.badge-ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); }
.badge-warn { background: var(--warn-soft); color: var(--warn-ink); border-color: var(--warn-line); }
.badge-danger { background: var(--danger-soft); color: var(--danger-ink); border-color: var(--danger-line); }
.badge-neutral { background: #eef1f5; color: var(--text-2); border-color: var(--line); }
.badge-contract { background: var(--contract-soft); color: var(--contract-ink); border-color: var(--contract-line); }
.badge-stock { background: var(--stock-soft); color: var(--stock-ink); border-color: var(--stock-line); }
.badge-outline { background: none; border: 1px dashed var(--line-2); color: var(--muted); font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 6px; background: #eef1f5; border: 1px solid var(--line); color: var(--text-2); }
.chip button { border: 0; background: none; cursor: pointer; padding: 0 0 0 2px; color: var(--muted); font-size: 15px; line-height: 1; }
.chip button:hover { color: var(--danger); }

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field-label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.req::after { content: " *"; color: var(--danger); }
.input, .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: 9px;
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 14px;
}
select.input { width: auto; }
.field textarea, textarea.input { height: auto; min-height: 76px; padding: 9px 12px; resize: vertical; line-height: 1.45; }
.input:hover, .field input:hover, .field select:hover, .field textarea:hover { border-color: #aab6c3; }
.field.invalid input, .field.invalid select, .field.invalid textarea, .field.invalid .chip-input, .input.invalid { border-color: var(--danger); background: #fffafa; }
.field-error { color: var(--danger); font-size: 12.5px; font-weight: 500; }
.field-error:empty { display: none; }
.hint { font-size: 12px; color: var(--muted); }
.input-unit { display: flex; }
.input-unit input { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; min-width: 0; }
.input-unit .unit { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--line-2); border-left: 0; border-radius: 0 9px 9px 0; background: var(--surface-2); color: var(--text-2); font-weight: 600; white-space: nowrap; min-width: 56px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--contract); margin: 0; }
.radio-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.radio-card { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; cursor: pointer; background: var(--surface); }
.radio-card input { margin-top: 3px; accent-color: var(--contract); }
.radio-card.on { border-color: var(--contract); background: var(--contract-soft); }
.radio-card b { display: block; font-size: 13.5px; }
.radio-card small { color: var(--muted); font-size: 12px; }

.chip-input { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 40px; padding: 5px 8px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--surface); }
.field .chip-input input { border: 0; outline: 0; flex: 1; min-width: 140px; height: 28px; padding: 0 4px; background: transparent; }
.chip-input:focus-within { outline: 2px solid var(--contract); outline-offset: 1px; }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.toolbar .input { height: 36px; min-width: 150px; }
.search { position: relative; flex: 1; min-width: 200px; max-width: 360px; }
.search .ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.search .input { padding-left: 34px; width: 100%; }

/* ---------- notices (inline, confirmable) ---------- */
.notice { display: flex; gap: 11px; padding: 12px 14px; border-radius: 10px; border: 1px solid; font-size: 13.5px; }
.notice-ico .ico { width: 18px; height: 18px; margin-top: 1px; }
.notice-body { min-width: 0; }
.notice-title { display: block; margin-bottom: 2px; }
.notice-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.notice-warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn-ink); }
.notice-danger { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-ink); }
.notice-info { background: var(--surface-2); border-color: var(--line); color: var(--text-2); }
.notice-ok { background: var(--ok-soft); border-color: var(--ok-line); color: #1f5a31; }
.notice-contract { background: var(--contract-soft); border-color: var(--contract-line); color: var(--contract-ink); }
.notice-stock { background: var(--stock-soft); border-color: var(--stock-line); color: var(--stock-ink); }
.notice ul { margin: 6px 0 0; padding-left: 18px; }

/* ---------- progress & quantity bars ---------- */
.progress { height: 7px; border-radius: 99px; background: #e4e9ef; overflow: hidden; min-width: 90px; }
.progress > i { display: block; height: 100%; border-radius: 99px; background: var(--contract); }
.progress.over > i { background: var(--danger); }
.qtybar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: #e4e9ef; min-width: 110px; }
.qtybar i { display: block; height: 100%; }
.qtybar .s, .qty-legend .s { background: var(--stock); }
.qtybar .c, .qty-legend .c { background: repeating-linear-gradient(45deg, #9aa7b6 0 3px, #cfd7e0 3px 6px); }
.qtybar .o, .qty-legend .o { background: #f0bf5a; }
.qty-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--muted); }
.qty-legend span { display: inline-flex; align-items: center; gap: 6px; }
.qty-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.tab { padding: 10px 14px; border: 0; background: none; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--slate); }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: flex-start; justify-content: center; padding: 7vh 16px 24px; background: rgba(18, 30, 44, .45); overflow-y: auto; }
.modal.open { display: flex; }
.modal-card { width: 100%; max-width: 580px; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-pop); animation: pop-in .16s ease-out; }
.modal-card.wide { max-width: 760px; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 22px 14px; border-bottom: 1px solid var(--line); border-radius: 16px 16px 0 0; }
.modal-head.contract { box-shadow: inset 0 4px 0 var(--contract); }
.modal-head.stock { box-shadow: inset 0 4px 0 var(--stock); }
.modal-head.danger { box-shadow: inset 0 4px 0 var(--danger); }
.modal-head p { color: var(--muted); font-size: 13px; margin-top: 4px; }
.modal-x { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 4px; border-radius: 6px; }
.modal-x:hover { background: var(--surface-2); color: var(--text); }
.modal-x .ico { width: 20px; height: 20px; }
.modal-body { padding: 18px 22px; display: grid; gap: 16px; }
.modal-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.modal-foot .grow { margin-right: auto; }
@keyframes pop-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- toast ---------- */
#toast-root { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: grid; gap: 10px; width: min(440px, calc(100vw - 40px)); }
.toast { display: flex; gap: 11px; padding: 13px 15px; border-radius: 12px; background: var(--slate); color: #fff; font-size: 13.5px; box-shadow: var(--shadow-pop); animation: pop-in .18s ease-out; transition: opacity .3s, transform .3s; }
.toast .ico { width: 18px; height: 18px; margin-top: 1px; flex: none; }
.toast b { display: block; margin-bottom: 1px; }
.toast code { background: rgba(255,255,255,.14); }
.toast.ok .ico { color: #6fe0a0; }
.toast.warn .ico { color: #ffc766; }
.toast.info .ico { color: #a9b8ff; }
.toast.danger { background: #5a1c17; }
.toast.danger .ico { color: #ff9d94; }
.toast.out { opacity: 0; transform: translateY(6px); }

/* ---------- stat strip (numbers always with unit) ---------- */
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.stat { padding: 12px 14px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat .k { font-size: 12px; color: var(--muted); }
.stat .v { font-size: 18px; font-weight: 700; margin-top: 2px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .cols-main-side { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 272px; z-index: 60; transform: translateX(-100%); transition: transform .2s ease; }
  .shell.nav-open .sidebar { transform: none; }
  .shell.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(18,30,44,.4); z-index: 55; }
  .nav-toggle { display: inline-grid; }
  .topbar { padding: 10px 16px; }
  .content { padding: 18px 16px 64px; }
  .today, .user-meta { display: none; }
  .cols-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .form-grid, .form-grid.cols-3, .radio-cards { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .seg-label { display: none; }
  h1 { font-size: 21px; }
  .panel-head, .toolbar { padding-left: 14px; padding-right: 14px; }
  .data th, .data td { padding: 9px 10px; }
  .crumbs .grp, .crumbs .sep { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.radio-card[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.radio-card.on-stock { border-color: var(--stock); background: var(--stock-soft); }
.radio-card.on-warn { border-color: var(--warn); background: var(--warn-soft); }
/* grid children must be allowed to shrink so wide tables scroll inside their panel instead of overflowing */
.stack > *, .cols-2 > *, .cols-main-side > * { min-width: 0; }
.demo-btn { height: auto; min-height: 31px; padding-top: 5px; padding-bottom: 5px; text-align: left; line-height: 1.3; }
main.content { min-width: 0; } .panel { min-width: 0; }