/* NordLeaf Procurement Portal — design system.
   Matches the published prototype: dark navy surface, elevated cards,
   status pills, monospace numbers. Light theme via [data-theme=light]. */

:root {
  --bg: #10151d;
  --bg-side: #0c1118;
  --bg-card: #141b25;
  --bg-card-2: #101722;
  --bg-hover: #1a2330;
  --bg-active: #1d2735;
  --line: #232d3b;
  --line-soft: #1b2430;
  --text: #dfe5ec;
  --text-strong: #f4f7fa;
  --muted: #8b95a3;
  --faint: #5d6875;
  --green: #63d68f;
  --green-bg: rgba(99, 214, 143, .12);
  --red: #e5697c;
  --red-bg: rgba(229, 105, 124, .12);
  --amber: #d9a742;
  --amber-bg: rgba(217, 167, 66, .12);
  --teal: #45c4a4;
  --teal-bg: rgba(69, 196, 164, .13);
  --blue: #5aa7e8;
  --blue-bg: rgba(90, 167, 232, .13);
  --gray-pill: #313c4c;
  --accent: #63d68f;
  --sans: "Inter", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(0,0,0,.25);
}
[data-theme="light"] {
  --bg: #f4f6f9;
  --bg-side: #eceff4;
  --bg-card: #ffffff;
  --bg-card-2: #f8fafc;
  --bg-hover: #eef1f6;
  --bg-active: #e3e9f2;
  --line: #d8dee8;
  --line-soft: #e5eaf1;
  --text: #29313c;
  --text-strong: #10151d;
  --muted: #66707e;
  --faint: #98a1ad;
  --green: #1d9e57;
  --green-bg: rgba(29, 158, 87, .1);
  --red: #cc3d54;
  --red-bg: rgba(204, 61, 84, .09);
  --amber: #a97b14;
  --amber-bg: rgba(169, 123, 20, .1);
  --teal: #15806a;
  --teal-bg: rgba(21, 128, 106, .1);
  --blue: #2d6fb4;
  --blue-bg: rgba(45, 111, 180, .1);
  --gray-pill: #dde3ec;
  --shadow: 0 1px 3px rgba(16,21,29,.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  display: flex;
  overflow: hidden;           /* every page fits the viewport; panels scroll inside */
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
.mono, td.num, .kpi-value, code { font-family: var(--mono); }

/* ---------- sidebar ---------- */
.sidebar {
  width: 234px; min-width: 234px;
  background: var(--bg-side);
  border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column;
  height: 100vh; position: sticky; top: 0;
}
.side-head { display: flex; gap: 10px; align-items: center; padding: 18px 16px 14px; }
.side-logo {
  width: 30px; height: 30px; border-radius: 7px;
  background: linear-gradient(135deg, #2e7d54, #63d68f);
  color: #fff; font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
}
.side-title { font-weight: 600; font-size: 14px; color: var(--text-strong); line-height: 1.2; }
.side-sub { font-size: 9.5px; letter-spacing: .12em; color: var(--faint); margin-top: 2px; }
.side-nav { flex: 1; overflow-y: auto; padding: 4px 10px 10px; }
.nav-section { font-size: 10px; letter-spacing: .14em; color: var(--faint);
  padding: 16px 8px 6px; font-weight: 600; }
.nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 10px; border-radius: 7px; margin: 1px 0;
  color: var(--muted); font-size: 13.5px;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text); }
.nav-item.active { background: var(--bg-active); color: var(--text-strong); }
.nav-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--faint); flex: none; }
.nav-item.active .nav-dot { background: var(--green); }
.nav-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-badge {
  font-family: var(--mono); font-size: 10.5px; color: var(--amber);
  background: var(--amber-bg); border-radius: 9px; padding: 1px 7px;
}
.side-foot { border-top: 1px solid var(--line-soft); padding: 10px 14px 14px; }
.seg { display: flex; background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden; margin-bottom: 9px; }
.seg a { flex: 1; text-align: center; padding: 5px 0; font-size: 12.5px; color: var(--muted); }
.seg a.on { background: var(--bg-active); color: var(--text-strong); }
.side-user { font-size: 11px; color: var(--faint); line-height: 1.45; }

/* ---------- main ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column;
  height: 100vh; overflow: hidden; }
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 26px; border-bottom: 1px solid var(--line-soft);
  position: sticky; top: 0; background: var(--bg); z-index: 5;
}
.crumb { font-size: 13px; color: var(--muted); }
.crumb b { color: var(--text-strong); font-weight: 500; }
.topbar .spacer { flex: 1; }
.badge-demo {
  font-size: 10px; letter-spacing: .1em; font-weight: 600;
  color: var(--amber); background: var(--amber-bg);
  border: 1px solid rgba(217,167,66,.25);
  padding: 4px 10px; border-radius: 6px; font-family: var(--mono);
}
.badge-live { color: var(--green); background: var(--green-bg);
  border-color: rgba(99,214,143,.25); }
.btn-ghost {
  background: var(--bg-card); color: var(--text); border: 1px solid var(--line);
  border-radius: 7px; padding: 5px 13px; font-size: 12.5px;
}
.btn-ghost:hover { background: var(--bg-hover); }

.content { padding: 24px 26px 40px; max-width: 1220px; width: 100%;
  margin: 0 auto; transition: max-width .18s;
  flex: 1; min-height: 0; overflow-y: auto; }
.content > .fill-page { height: auto; min-height: 0; }
.side-hidden .content { max-width: 1600px; padding: 24px 44px 60px; }
.side-hidden .topbar { padding-left: 46px; }
h1 { font-size: 22px; font-weight: 600; color: var(--text-strong); margin-bottom: 4px; }
.lede { color: var(--muted); max-width: 560px; margin-bottom: 22px; }

/* ---------- banner ---------- */
.banner {
  background: var(--amber-bg); border: 1px solid rgba(217,167,66,.3);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 22px;
  font-size: 13px; color: var(--text);
}
.banner b { color: var(--text-strong); }
.banner.green { background: var(--green-bg); border-color: rgba(99,214,143,.3); }

/* ---------- KPI cards ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px; margin-bottom: 22px; }
.kpi { background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.kpi-label { font-size: 10px; letter-spacing: .12em; color: var(--muted);
  font-weight: 600; margin-bottom: 10px; }
.kpi-value { font-size: 26px; font-weight: 600; color: var(--text-strong); }
.kpi-value.good { color: var(--green); }
.kpi-value.bad { color: var(--red); }
.kpi-value.warn { color: var(--amber); }
.kpi-sub { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ---------- panels & tables ---------- */
.grid { display: grid; gap: 16px; }
.grid-main-side { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
@media (max-width: 1100px) { .grid-main-side { grid-template-columns: 1fr; } }
.panel { background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.panel-head { display: flex; align-items: baseline; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.panel-title { font-size: 15px; font-weight: 600; color: var(--text-strong); }
.panel-hint { font-size: 12px; color: var(--faint); }
.panel-body { padding: 16px 18px; }
.panel .table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-size: 10px; letter-spacing: .1em; color: var(--faint);
  font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--line-soft);
  white-space: nowrap; }
td { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tr.hover:hover, tbody tr:hover { background: var(--bg-card-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th.num { text-align: right; }
.cell-main { color: var(--text-strong); font-weight: 500; }
.cell-sub { font-size: 11.5px; color: var(--faint); margin-top: 1px; }
.id { font-family: var(--mono); font-size: 12.5px; color: var(--text); }

/* ---------- pills ---------- */
.pill { display: inline-block; font-size: 11.5px; font-weight: 500;
  padding: 3px 10px; border-radius: 7px; white-space: nowrap; }
.pill-red { color: var(--red); background: var(--red-bg); }
.pill-amber { color: var(--amber); background: var(--amber-bg); }
.pill-green { color: var(--green); background: var(--green-bg); }
.pill-teal { color: var(--teal); background: var(--teal-bg); }
.pill-blue { color: var(--blue); background: var(--blue-bg); }
.pill-gray { color: var(--muted); background: var(--gray-pill); }

/* ---------- buttons / forms ---------- */
.btn { background: var(--bg-card-2); color: var(--text-strong);
  border: 1px solid var(--line); border-radius: 7px; padding: 6px 14px;
  font-size: 12.5px; font-weight: 500; }
.btn:hover { background: var(--bg-hover); }
.btn-primary { background: var(--green); border-color: var(--green); color: #0c1118; }
.btn-primary:hover { filter: brightness(1.08); background: var(--green); }
.btn-danger { color: var(--red); border-color: rgba(229,105,124,.35); }
.btn-sm { padding: 3px 10px; font-size: 11.5px; }
input, select, textarea {
  font: inherit; color: var(--text-strong);
  background: var(--bg-card-2); border: 1px solid var(--line);
  border-radius: 7px; padding: 6px 10px; font-size: 13px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green); }
input.mono { font-family: var(--mono); }
input.cell { width: 88px; text-align: right; font-family: var(--mono); padding: 4px 8px; }
label.f { display: block; font-size: 11px; letter-spacing: .08em; color: var(--muted);
  font-weight: 600; margin-bottom: 4px; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.field { display: flex; flex-direction: column; }

/* ---------- misc ---------- */
.bar { height: 5px; border-radius: 3px; background: var(--line-soft);
  min-width: 70px; position: relative; overflow: hidden; }
.bar > i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; display: block; }
.tag-metric { font-family: var(--mono); font-size: 12px; }
.pos { color: var(--green); } .neg { color: var(--red); } .mid { color: var(--amber); }
.muted { color: var(--muted); } .faint { color: var(--faint); }
.small { font-size: 12px; }
.mt { margin-top: 16px; } .mb { margin-bottom: 16px; }
.flex { display: flex; gap: 10px; align-items: center; }
.right { margin-left: auto; }
.section-gap { margin-top: 24px; }
.checks { display: flex; flex-direction: column; gap: 6px; }
.check { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.check .ok { color: var(--green); font-family: var(--mono); }
.check .fail { color: var(--red); font-family: var(--mono); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 13px; }
.kv dt { color: var(--muted); } .kv dd { font-family: var(--mono); }
.toast { position: fixed; bottom: 18px; right: 18px; background: var(--green);
  color: #0c1118; font-weight: 600; padding: 10px 18px; border-radius: 9px;
  box-shadow: 0 4px 16px rgba(0,0,0,.35); animation: fade 3.5s forwards; }
@keyframes fade { 0%,80% { opacity: 1 } 100% { opacity: 0; visibility: hidden } }
details.rowform summary { cursor: pointer; color: var(--blue); font-size: 12.5px; }
.overflow-note { font-size: 11px; color: var(--faint); padding: 8px 14px; }

.btn, .pill { white-space: nowrap; }
.panel table td:first-child { white-space: nowrap; }
.panel table td:first-child .cell-main,
.panel table td:first-child .cell-sub { white-space: normal; }

.grid-main-side > .panel:last-child td, .grid-main-side > .panel:last-child th { padding: 9px 10px; }
.grid-main-side > .panel:last-child table { table-layout: fixed; }
.grid-main-side > .panel:last-child td:first-child { white-space: normal; }

/* ---------- collapsible sidebar ---------- */
.side-toggle { position: fixed; left: 222px; top: 14px; z-index: 30;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg-card); color: var(--muted); border: 1px solid var(--line);
  font-size: 12px; line-height: 1; transition: left .18s; }
.side-toggle:hover { color: var(--text-strong); }
.side-hidden .sidebar { display: none; }
.side-hidden .side-toggle { left: 10px; transform: rotate(180deg); }
/* ---------- pagination ---------- */
.pager { display: flex; gap: 8px; align-items: center; padding: 12px 16px; }
.pager .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
/* ---------- pharmacy chips in grouped stock ---------- */
.ph-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ph-chip { font-family: var(--mono); font-size: 11px; padding: 2px 8px;
  border-radius: 6px; background: var(--bg-card-2); border: 1px solid var(--line); }

td.cell-alert { background: var(--red-bg); box-shadow: inset 2px 0 0 var(--red); }

/* inner scroller: the table scrolls, the page stays put (like the Looker dashboard) */
/* Adaora's rule (8 Sep): a page may scroll, but never gets long — a long
   table scrolls INSIDE its panel, roughly two-thirds of the screen tall
   (the Launch & day-after page is the model). */
.table-scroller { max-height: 68vh; overflow-y: auto; }
.table-scroller thead th { position: sticky; top: 0; background: var(--bg-card); z-index: 3; }
.th-sort { color: inherit; }
.th-sort:hover, .th-sort.on { color: var(--text-strong); }

/* ---------- one-viewport table pages ---------- */
/* .fill-page used to pin the page to ONE viewport (fixed height, panels
   squeezed to fit). That collapsed the last table whenever a panel above it
   grew (8 Sep). It is now an ordinary scrolling page whose tables scroll
   inside themselves; the compact typography below is kept. */
.fill-page { display: block; height: auto; min-height: 0; }
.fill-page h1 { margin-bottom: 10px; }
.fill-page .kpis { margin-bottom: 14px; }
.fill-page .kpi { padding: 10px 16px; }
.fill-page .kpi-value { font-size: 21px; }
.fill-page .kpi-label { margin-bottom: 4px; }
.fill-page .form-row { margin-bottom: 10px; }
.fill-page > .panel, .fill-page > .grid-main-side > div > .panel:first-child,
.fill-page > .grid-main-side > .panel { display: block; }
.fill-page .table-scroller { max-height: 68vh; }
/* compact two-line rows, wide product names */
.col-product { min-width: 340px; max-width: 480px; }
.fill-page td { padding: 6px 12px; }
.fill-page th { padding: 8px 12px; }
.fill-page .cell-sub { font-size: 10.5px; margin-top: 0; }
.fill-page .cell-main { font-size: 13px; line-height: 1.3; }
.weeks-cell { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.weeks-cell .bar { width: 44px; min-width: 44px; margin: 0 !important; }
.fill-page .btn-sm { padding: 2px 9px; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal; }
/* pharmacy multi-select chips */
.ph-picker { display: flex; gap: 6px; }
.ph-check { display: inline-flex; align-items: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: 7px; padding: 5px 11px;
  font-size: 12px; font-family: var(--mono); font-weight: 600;
  color: var(--muted); background: var(--bg-card); user-select: none; }
.ph-check input { display: none; }
.ph-check.on { color: var(--text-strong); background: var(--bg-active);
  border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.ph-check:hover { background: var(--bg-hover); }

/* extra-dense table for wide views — everything fits one page width */
table.tight { table-layout: auto; width: 100%; }
table.tight th, table.tight td { padding: 5px 8px; font-size: 12.5px;
  white-space: nowrap; }
table.tight th { font-size: 10px; }
table.tight .col-product { min-width: 220px; max-width: 340px;
  white-space: normal; }
table.tight .cell-main { font-size: 12.5px; }
table.tight .pill { padding: 1px 7px; font-size: 10.5px; }
table.tight .weeks-cell .bar { width: 30px; min-width: 30px; }
table.tight .btn-sm { padding: 2px 7px; font-size: 11px; }

/* click-to-highlight rows */
tr[data-mark] { cursor: pointer; }
tr.row-marked, tr.row-marked:hover { background: var(--amber-bg) !important;
  box-shadow: inset 3px 0 0 var(--amber); }


/* v8.4 — denser KPIs on fill-page screens: more table at a glance */
.fill-page .kpi { padding: 7px 14px; }
.fill-page .kpi-value { font-size: 18px; line-height: 1.25; }
.fill-page .kpi-label { margin-bottom: 2px; font-size: 9.5px; }
.fill-page .kpi-sub { font-size: 10px; margin-top: 1px; }
.fill-page .kpis { margin-bottom: 10px; gap: 10px; }

/* zebra striping instead of heavier rules: guides the eye across a wide row
   without spending ink on borders; hover marks the row you're reading */
.table-scroller tbody tr:nth-child(even) td { background: var(--zebra, rgba(127,127,127,.045)); }
.table-scroller tbody tr:hover td { background: rgba(127,166,255,.07); }

/* v8.6 — slimmer footer bar: one more table row on screen */
.fill-page .pager { padding: 5px 14px; }
.fill-page .pager .btn { padding: 2px 9px; }

/* v8.8 — sidebar sheen reverted at Adaora's request: the original flat navy stays. */

/* v8.8 — quieter footer: the table is the show */
.fill-page .pager { opacity: .78; }
.fill-page .pager .btn { border-color: transparent; background: transparent; }
.fill-page .pager .btn:hover { opacity: 1; border-color: var(--line); }
.fill-page .pager .small { font-size: 11px; }

/* collapsed sidebar peeks back as an overlay from the left edge */
.side-hidden.side-peek .sidebar {
  display: flex; position: fixed; left: 0; top: 0; z-index: 60;
  height: 100vh; box-shadow: 12px 0 40px -18px rgba(0,0,0,.6);
  animation: nl-peek .14s ease-out;
}
@keyframes nl-peek { from { transform: translateX(-40px); opacity: .4; } to { transform: none; opacity: 1; } }

/* a row that opens on a click anywhere — the cursor says so */
tr[data-href] { cursor: pointer; }
tr[data-href]:hover { background: var(--bg-card-2); }
.btn:disabled, button:disabled { opacity: .45; cursor: not-allowed; }

/* A KPI you can click filters or opens what it counted. It stays a card —
   only the cursor, a hover lift and a small ↗ say it is a link; an active
   filter gets a green edge and clicking it again clears the filter. */
a.kpi-click { display: block; text-decoration: none; color: inherit;
  position: relative; transition: border-color .15s, transform .15s; }
a.kpi-click:hover { border-color: var(--green); transform: translateY(-1px); }
a.kpi-click::after { content: "↗"; position: absolute; top: 10px; right: 12px;
  font-size: 11px; color: var(--muted); opacity: .55; }
a.kpi-click.on { border-color: var(--green); box-shadow: inset 3px 0 0 var(--green); }
a.kpi-click.on::after { content: "✕ clear"; opacity: .9; color: var(--green); }

/* ---------- pending state ---------------------------------------------------
   The submit handler in base.html has always set data-busy on the button, and
   its comment claimed "CSS blocks a second click" — but no rule was ever
   written, so the attribute did nothing. A slow POST looked exactly like a
   dead one (Adaora, 2 Sep: "when something is loading, for example when one
   tries to login, can you do the loading thing so one knows"). The label is
   hidden rather than replaced so the button keeps its width and the row does
   not jump, and the control is never `disabled` — a disabled button is not
   submitted, which would drop its name and value from the POST. */
button[data-busy], .btn[data-busy] {
  position: relative;
  pointer-events: none;
  color: transparent !important;
}
button[data-busy]::after, .btn[data-busy]::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--muted); border-top-color: transparent;
  animation: nl-spin .6s linear infinite;
}
@keyframes nl-spin { to { transform: rotate(360deg); } }
/* the rest of the form dims, so it reads as "in flight", not "broken" */
form[data-busy] { opacity: .62; transition: opacity .12s ease; }
form[data-busy] input, form[data-busy] select, form[data-busy] textarea {
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  button[data-busy]::after, .btn[data-busy]::after { animation-duration: 2.4s; }
  form[data-busy] { transition: none; }
}

/* ---------- a table that scrolls inside a panel -----------------------------
   .fill-page sizes its direct children, so a .table-scroller nested inside a
   <form> and a .panel (the ticked-rows table on Expiry & push) never got a
   bound and the page grew instead of the table scrolling. */
.fill-page .fill-flex { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* ---------- mobile (additive) ----------
   Adaora, 8 Sep: "yes go ahead with the mobile — hope it won't affect the
   desktop version at all". Everything below lives inside media queries that
   only match narrow screens; not one desktop rule above is touched. On a
   phone the sidebar becomes a drawer behind the ⟨ button, pages scroll
   normally instead of fitting one viewport, tables scroll sideways inside
   their panel, and the grids stack. */
@media (max-width: 820px) {
  .sidebar { display: none; }
  html.m-side-open .sidebar {
    display: flex; position: fixed; left: 0; top: 0; z-index: 60;
    height: 100vh; width: min(82vw, 290px); min-width: 0;
    box-shadow: 12px 0 40px -18px rgba(0,0,0,.6);
  }
  html.m-side-open::after {
    content: ""; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.35);
  }
  .side-toggle, .side-hidden .side-toggle { left: 10px; top: 10px; transform: none; }
  html.m-side-open .side-toggle { left: calc(min(82vw, 290px) - 14px); z-index: 70; transform: rotate(180deg); }
  .topbar, .side-hidden .topbar { padding: 10px 12px 10px 44px; gap: 8px; flex-wrap: wrap; }
  .crumb { font-size: 12px; }
  .content, .side-hidden .content { padding: 12px 12px 40px; max-width: none; }
  h1 { font-size: 18px; }
  .lede { font-size: 13px; }
  /* one-viewport pages become ordinary scrolling pages */
  .fill-page, .content > .fill-page { height: auto; min-height: 0; display: block; }
  .fill-page > .panel { display: block; }
  .fill-page .table-scroller, .table-scroller { max-height: none; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: 640px; }
  .col-product { min-width: 200px; max-width: 260px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 10px 12px; }
  .kpi-value { font-size: 18px; }
  .grid-main-side { grid-template-columns: 1fr; }
  .panel-head { flex-wrap: wrap; padding: 10px 12px; gap: 6px; }
  .panel-body { padding: 10px 12px; }
  .panel-head .right, .panel-hint { margin-left: 0; }
  .form-row .field input, .form-row .field select { max-width: 100%; }
  .form-row .field { min-width: 0; }
  .btn, .btn-sm { white-space: nowrap; }
  .pager { flex-wrap: wrap; row-gap: 6px; }
  .pager .right { margin-left: 0; width: 100%; }
  /* the candidate grids on the expiry page stack instead of squeezing */
  [style*="grid-template-columns:repeat(6"], [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns:repeat(4"], [style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  .side-hidden.side-peek .sidebar { display: none; }
}
@media (max-width: 480px) {
  .kpis { grid-template-columns: 1fr; }
  .topbar .badge-demo { display: none; }
  td, th { padding: 6px 8px; }
}