/* ============================================================================================================
   Haseeb Autos ERP - the interface system
   ------------------------------------------------------------------------------------------------------------
   One stylesheet, no build step, no framework. The theme packages in `themes/` supply the palette through
   custom properties printed by the layout (see App\Support\Theme); everything below derives from those values,
   so rebranding the product is a theme change and not a find-and-replace in component styles.

   Order of the file:
     1  tokens          the semantic layer the components actually use
     2  base            reset, typography, focus, scrollbars
     3  shell           rail, topbar, content, context panel, phone tab bar, sheets
     4  controls        buttons, inputs, switches, segmented, chips
     5  surfaces        cards, panels, KPIs, tables, lists, timelines
     6  overlays        dialog, drawer, menu, command palette, toast, tooltip
     7  states          skeletons, empty states, offline, print, reduced motion
   ============================================================================================================ */

/* 1 ---------------------------------------------------------------- tokens */
:root {
  /* spacing: a 4px rhythm, named by intent rather than by number */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px;

  --radius-xs: 6px;
  --radius: var(--radius-md, 12px);
  --radius-card: var(--radius-lg, 16px);

  --font-ui: var(--font-family-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
  --font-mono: var(--font-family-mono, ui-monospace, Consolas, monospace);
  --fs-base: var(--font-size-base, 14.8px);
  --fs-xs: 11.5px; --fs-sm: 12.5px; --fs-md: 13.5px;
  --fs-lg: 15.5px; --fs-xl: 18px;  --fs-2xl: 22px; --fs-3xl: 27px; --fs-4xl: 34px;
  --lh-tight: 1.22; --lh-base: var(--font-line-height-base, 1.5);
  --fw-regular: var(--font-weight-regular, 500);
  --fw-medium: var(--font-weight-medium, 600);
  --fw-bold: var(--font-weight-bold, 800);
  --tracking-wide: .06em;

  /* semantics derived from the package */
  --bg: var(--color-bg, #f4f6fb);
  --surface: var(--color-surface, #fff);
  --surface-2: var(--color-surface-raised, #f8fafc);
  --line: var(--color-border, #e5e9f0);
  --ink: var(--color-text, #0f172a);
  --muted: var(--color-text-muted, #556274);
  --brand: var(--color-brand, #c2410c);
  --brand-ink: var(--color-brand-text, #fff);
  --accent: var(--color-accent, #ff6a00);
  --ok: var(--color-success, #15803d);
  --warn: var(--color-warning, #a16207);
  --bad: var(--color-danger, #b91c1c);
  --info: var(--color-info, #0369a1);
  --ring: var(--color-focus-ring, #2563eb);
  --overlay: var(--color-overlay, rgba(11, 18, 32, .55));

  --line-strong: color-mix(in srgb, var(--ink) 14%, var(--line));
  --wash: color-mix(in srgb, var(--brand) 7%, var(--surface));
  --wash-2: color-mix(in srgb, var(--brand) 12%, var(--surface));
  /* The rail is the one surface that does not follow the mode. It is a deep navy in both: on a paper-white
     workspace it is the anchor, and in dark mode it is the edge of the room. Deriving it from --ink made it turn
     white in dark mode, with white labels on it. */
  --rail-bg: #0b1020;
  --rail-bg-top: #121a2e;
  --rail-ink: #e8edf6;
  --rail-muted: #8f9cb5;

  --e1: var(--elevation-1, 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08));
  --e2: var(--elevation-2, 0 4px 12px rgba(16,24,40,.08));
  --e3: var(--elevation-3, 0 18px 40px rgba(16,24,40,.16));

  --rail-w: 258px;
  --rail-w-collapsed: 76px;
  --topbar-h: 58px;
  --aside-w: 372px;
  --tabbar-h: 62px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  --dur-fast: var(--motion-duration-fast, 120ms);
  --dur: var(--motion-duration-base, 160ms);
  --ease: cubic-bezier(.2, .8, .2, 1);

  --tap: 44px;
  --row-h: 44px;
}

[data-density="compact"] { --row-h: 34px; --s-4: 12px; --s-5: 16px; }

/* 2 ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
/* The class on these elements sets `display`, which beats the user agent's [hidden] rule. Without this line a
   hidden banner is still on screen, which is how a "new version is ready" bar ends up showing on every page. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
  margin: 0; min-height: 100%;
  font-family: var(--font-ui);
  font-size: var(--fs-base, 14.8px);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
h1, h2, h3, h4, h5 { margin: 0; font-weight: var(--fw-bold); letter-spacing: -.015em; line-height: var(--lh-tight); }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); font-weight: var(--fw-medium); letter-spacing: 0; }
p { margin: 0 0 var(--s-3); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg, video, canvas { max-width: 100%; }
svg { display: block; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-4) 0; }
::selection { background: color-mix(in srgb, var(--brand) 26%, transparent); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-xs); }
@media (pointer: coarse) { :focus-visible { outline-offset: 3px; } }

/* thin, quiet scrollbars; a data tool should not fight its own furniture */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 999px; border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink) 30%, transparent); background-clip: content-box; }


.back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--muted);
  text-decoration: none;
}
.back:hover { color: var(--ink); }
.back svg { width: 14px; height: 14px; transform: rotate(180deg); }
.grow { flex: 1 1 auto; min-width: 0; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.tiny { font-size: var(--fs-xs); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.stack { display: flex; flex-direction: column; gap: var(--s-3); }
.row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.row.nowrap { flex-wrap: nowrap; }
.spacer { flex: 1 1 auto; }

/* 3 ---------------------------------------------------------------- shell */
.app {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}
.app[data-rail="collapsed"] { grid-template-columns: var(--rail-w-collapsed) minmax(0, 1fr); }

/* ---- the rail: grouped, with bold group headings, per the product brief ---- */
.rail {
  position: sticky; top: 0; align-self: start;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 60% at 0% 0%, color-mix(in srgb, var(--brand) 30%, transparent) 0%, transparent 62%),
    linear-gradient(180deg, var(--rail-bg-top) 0%, var(--rail-bg) 42%, var(--rail-bg) 100%);
  color: var(--rail-ink);
  border-right: 1px solid color-mix(in srgb, #000 22%, transparent);
  z-index: 40;
}
.rail-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: calc(var(--s-4) + var(--safe-t)) var(--s-4) var(--s-4);
  min-height: var(--topbar-h);
}
.rail-logo {
  width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto;
  background: linear-gradient(140deg, var(--accent), var(--brand));
  color: #fff; display: grid; place-items: center;
  font-weight: var(--fw-bold); font-size: 15px; letter-spacing: -.03em;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 45%, transparent);
}
.rail-title { min-width: 0; }
.rail-title strong { display: block; font-size: 14.5px; letter-spacing: -.01em; color: #fff; }
.rail-title span { display: block; font-size: var(--fs-xs); color: var(--rail-muted); letter-spacing: .02em; }
.rail-scroll { flex: 1 1 auto; overflow-y: auto; padding: 0 var(--s-3) var(--s-4); }
.rail-group {
  margin: var(--s-4) 0 var(--s-1);
  padding: 0 var(--s-2);
  font-size: 10.5px; font-weight: var(--fw-bold); letter-spacing: .1em; text-transform: uppercase;
  color: var(--rail-muted);
}
.rail-group:first-child { margin-top: var(--s-2); }
button.nav-item {
  width: 100%; border: 0; background: transparent; font-family: inherit; cursor: pointer; text-align: left;
}
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; margin-bottom: 2px;
  border-radius: 10px; color: var(--rail-ink); font-size: var(--fs-md); font-weight: var(--fw-medium);
  text-decoration: none; position: relative;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-item:hover { background: color-mix(in srgb, #fff 10%, transparent); text-decoration: none; }
.nav-item .ico { width: 18px; height: 18px; flex: 0 0 18px; opacity: .82; }
.nav-item.active {
  background: color-mix(in srgb, #fff 15%, transparent);
  color: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 14%, transparent);
}
.nav-item.active::before {
  content: ""; position: absolute; left: -11px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.nav-item.active .ico { opacity: 1; color: var(--accent); }
.nav-item .count {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 700;
  background: var(--accent); color: #1b1300;
}
.nav-item .kbd { margin-left: auto; }
.rail-foot { padding: var(--s-3); border-top: 1px solid color-mix(in srgb, #fff 10%, transparent); }
.rail-user {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px; border-radius: 11px; border: 1px solid color-mix(in srgb, #fff 12%, transparent);
  background: color-mix(in srgb, #fff 6%, transparent); color: var(--rail-ink);
  font: inherit; font-size: var(--fs-sm); cursor: pointer; text-align: left;
}
.rail-user:hover { background: color-mix(in srgb, #fff 12%, transparent); }
.avatar {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 30px;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: color-mix(in srgb, var(--accent) 82%, #fff); color: #1b1300;
}
.avatar.lg { width: 44px; height: 44px; border-radius: 13px; font-size: 15px; flex-basis: 44px; }

/* collapsed rail: icons only, labels become tooltips */
.app[data-rail="collapsed"] .rail-title,
.app[data-rail="collapsed"] .rail-group,
.app[data-rail="collapsed"] .nav-item span:not(.count),
.app[data-rail="collapsed"] .rail-user small { display: none; }
.app[data-rail="collapsed"] .nav-item { justify-content: center; padding: 10px 0; }
.app[data-rail="collapsed"] .nav-item .count { position: absolute; top: 2px; right: 6px; min-width: 16px; height: 16px; font-size: 9.5px; }
.app[data-rail="collapsed"] .rail-head { justify-content: center; padding-left: 0; padding-right: 0; }

/* ---- main column ---- */
.main-col { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--s-3);
  height: var(--topbar-h);
  padding: 0 var(--s-5);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar .crumb { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: var(--fs-md); color: var(--muted); }
.topbar .crumb strong { color: var(--ink); font-weight: var(--fw-medium); }
.topbar .crumb svg { width: 15px; height: 15px; opacity: .55; }
.search-trigger {
  display: flex; align-items: center; gap: 9px;
  min-width: 260px; max-width: 420px; flex: 1 1 320px;
  height: 36px; padding: 0 10px; margin-left: auto;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2); color: var(--muted);
  font: inherit; font-size: var(--fs-md); cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.search-trigger:hover { border-color: var(--line-strong); background: var(--surface); }
.search-trigger svg { width: 16px; height: 16px; }
.search-trigger .kbd { margin-left: auto; }
.icon-btn {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 10px; border: 1px solid transparent; background: transparent;
  color: var(--muted); cursor: pointer; position: relative;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn .dot {
  position: absolute; top: 6px; right: 7px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--surface);
}
.net-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 9px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--muted); white-space: nowrap;
}
.net-pill .led { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
body.is-offline .net-pill .led { background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 18%, transparent); }
body.is-offline .net-pill { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }

.content { padding: var(--s-6) var(--s-5) var(--s-9); width: 100%; max-width: 1560px; margin: 0 auto; flex: 1 1 auto; }
.page-head { display: flex; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-5); flex-wrap: wrap; }
.page-head .titles { min-width: 0; }
.page-head h1 { font-size: var(--fs-3xl); letter-spacing: -.025em; }
.page-head .lede { color: var(--muted); font-size: var(--fs-md); margin: 4px 0 0; max-width: 78ch; }
.page-actions { margin-left: auto; display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }

/* ---- optional context panel: the right column that pushes the shell, not an overlay ---- */
.app[data-aside="open"] { grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--aside-w); }
.app[data-aside="open"][data-rail="collapsed"] { grid-template-columns: var(--rail-w-collapsed) minmax(0, 1fr) var(--aside-w); }
.aside {
  position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh;
  border-left: 1px solid var(--line); background: var(--surface);
  display: none; flex-direction: column; z-index: 25;
}
.app[data-aside="open"] .aside { display: flex; }
.aside-head {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-4) var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--line); min-height: var(--topbar-h);
}
.aside-body { flex: 1 1 auto; overflow-y: auto; padding: var(--s-4); }

/* ---- phone tab bar: five destinations, thumb height, safe-area aware ---- */
.tabbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  padding: 6px 8px calc(6px + var(--safe-b));
  grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-top: 1px solid var(--line);
}
.tabbar a {
  display: grid; place-items: center; gap: 3px;
  min-height: 48px; border-radius: 12px;
  color: var(--muted); font-size: 10.5px; font-weight: var(--fw-medium); text-decoration: none;
}
.tabbar a svg { width: 21px; height: 21px; }
.tabbar a.active { color: var(--brand); background: var(--wash); }
.tabbar a:active { transform: scale(.96); }

/* 4 ---------------------------------------------------------------- controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--fs-md); font-weight: var(--fw-medium);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.btn:hover { background: var(--surface-2); border-color: var(--line-strong); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }
.btn.primary {
  background: var(--brand); border-color: color-mix(in srgb, #000 12%, var(--brand));
  color: var(--brand-ink); box-shadow: 0 1px 0 color-mix(in srgb, #fff 22%, transparent) inset, var(--e1);
}
.btn.primary:hover { background: color-mix(in srgb, #000 8%, var(--brand)); }
.btn.accent { background: var(--accent); border-color: color-mix(in srgb, #000 12%, var(--accent)); color: #1b1300; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); background: color-mix(in srgb, var(--bad) 7%, var(--surface)); }
.btn.sm { min-height: 30px; padding: 0 10px; font-size: var(--fs-sm); border-radius: 8px; }
.btn.lg { min-height: 46px; padding: 0 20px; font-size: var(--fs-lg); border-radius: 12px; }
.btn.block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn.icon { width: 38px; padding: 0; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .label {
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--muted);
  display: flex; align-items: center; gap: 6px;
}
.field .hint { font-size: var(--fs-xs); color: var(--muted); }
.field .err { font-size: var(--fs-xs); color: var(--bad); font-weight: var(--fw-medium); }
.input, input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="date"], input[type="datetime-local"],
input[type="url"], input[type="time"], input[type="month"], input[type="week"], select, textarea {
  width: 100%; min-height: 40px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--fs-md);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
/* an input with no type attribute is a text input, and must look like every other field */
.input:hover, input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
.input:focus, input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 22%, transparent);
}
input[disabled], select[disabled], textarea[disabled] { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) 17px, calc(100% - 11px) 17px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 32px;
}
input[type="checkbox"], input[type="radio"] { width: 17px; height: 17px; min-height: 0; accent-color: var(--brand); }
.input-group { position: relative; display: flex; align-items: center; }
.input-group svg { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.input-group input { padding-left: 34px; }
.input-group .suffix { position: absolute; right: 8px; }

.segmented {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
}
.segmented button {
  min-height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent;
  color: var(--muted); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer;
}
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--e1); }

.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: var(--fs-md); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track {
  width: 40px; height: 23px; border-radius: 999px; background: var(--line-strong);
  position: relative; transition: background var(--dur) var(--ease);
}
.switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform var(--dur) var(--ease);
}
.switch input:checked + .track { background: var(--brand); }
.switch input:checked + .track::after { transform: translateX(17px); }
.switch input:focus-visible + .track { outline: 2px solid var(--ring); outline-offset: 2px; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--muted); white-space: nowrap;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 38%, var(--line)); background: color-mix(in srgb, var(--ok) 9%, var(--surface)); }
.chip.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
.chip.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); background: color-mix(in srgb, var(--bad) 9%, var(--surface)); }
.chip.info { color: var(--info); border-color: color-mix(in srgb, var(--info) 38%, var(--line)); background: color-mix(in srgb, var(--info) 9%, var(--surface)); }
.chip.brand { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 38%, var(--line)); background: var(--wash); }
.chip.solid { background: var(--brand); color: var(--brand-ink); border-color: transparent; }
.kbd {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 6px; border: 1px solid var(--line); border-bottom-width: 2px;
  background: var(--surface-2); color: var(--muted);
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1;
}

/* 5 ---------------------------------------------------------------- surfaces */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--e1); overflow: hidden;
}
.card.flat { box-shadow: none; }
.card-head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line);
}
.card-head h2, .card-head h3 { font-size: var(--fs-lg); letter-spacing: -.01em; }
.card-head .sub { font-size: var(--fs-sm); color: var(--muted); }
.card-head .actions { margin-left: auto; display: flex; gap: var(--s-2); align-items: center; }
.card-body { padding: var(--s-5); }
.card-body.tight { padding: 0; }
.card-foot { padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-sm); color: var(--muted); }

.grid { display: grid; gap: var(--s-4); }
.grid.kpis { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.side { grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr); align-items: start; }
.stack-16 { display: flex; flex-direction: column; gap: var(--s-4); }

.kpi { position: relative; padding: var(--s-4) var(--s-5) var(--s-4); }
.kpi .k-top { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.kpi .k-top .ico {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: var(--wash); color: var(--brand);
}
.kpi .k-top .ico svg { width: 15px; height: 15px; }
.kpi .k-val { font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: -.03em; margin-top: 10px; font-variant-numeric: tabular-nums; }
.kpi .k-val small { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--muted); margin-left: 4px; }
.kpi .k-foot { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: var(--fs-sm); color: var(--muted); }
.kpi .trend { display: inline-flex; align-items: center; gap: 3px; font-weight: var(--fw-medium); }
.kpi .trend.up { color: var(--ok); }
.kpi .trend.down { color: var(--bad); }
.kpi .spark { position: absolute; right: var(--s-4); bottom: var(--s-3); width: 92px; height: 34px; opacity: .9; }
.kpi.accent { background: linear-gradient(150deg, var(--wash-2), var(--surface) 62%); }

/* ---- tables: dense ERP rows, column separators, sticky head, row actions ---- */
.table-wrap { width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-md); }
.table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2);
  color: var(--muted); text-align: left; font-weight: var(--fw-medium);
  font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  padding: 0 var(--s-3); height: 34px; white-space: nowrap;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
}
.table thead th:last-child { border-right: 0; }
.table thead th.num { text-align: right; }
.table thead th.sortable { cursor: pointer; user-select: none; }
.table thead th.sortable:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, var(--surface-2)); }
.table thead th .sort { display: inline-flex; align-items: center; gap: 4px; }
.table thead th .sort svg { width: 11px; height: 11px; opacity: .4; }
.table thead th[aria-sort="ascending"] .sort svg, .table thead th[aria-sort="descending"] .sort svg { opacity: 1; color: var(--brand); }
.table tbody td {
  height: var(--row-h); padding: 0 var(--s-3); vertical-align: middle;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
}
.table tbody td:last-child { border-right: 0; }
.table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tbody tr { transition: background var(--dur-fast); }
.table tbody tr:hover td { background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr[aria-selected="true"] td { background: var(--wash); }
.table tbody tr.is-clickable { cursor: pointer; }
.table .cell-strong { font-weight: var(--fw-medium); }
.table .cell-sub { display: block; font-size: var(--fs-xs); color: var(--muted); }
/* one line per cell keeps a dense table dense: an ERP row that grows to three lines loses its scan rhythm */
.table td, .table th { white-space: nowrap; }
.table .cell-wrap { white-space: normal; }
.table td.truncate-cell { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.table .cell-actions { display: flex; gap: 4px; justify-content: flex-end; opacity: 0; transition: opacity var(--dur-fast); }
.table tbody tr:hover .cell-actions, .table tbody tr:focus-within .cell-actions { opacity: 1; }
@media (hover: none) { .table .cell-actions { opacity: 1; } }
.table.sticky-first td:first-child, .table.sticky-first th:first-child {
  position: sticky; left: 0; z-index: 3; background: var(--surface);
  box-shadow: 1px 0 0 var(--line);
}
.table tbody tr:hover td:first-child { background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
.table .check { width: 36px; text-align: center; }

.toolbar {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); background: var(--surface);
}
.toolbar .search { flex: 1 1 320px; max-width: 460px; min-width: 180px; }
/* a select in a toolbar is a filter, not a form field: it takes the width of its longest option and no more */
.toolbar select { width: auto; flex: 0 0 auto; min-width: 128px; max-width: 220px; }
.toolbar .chip { flex: 0 0 auto; }
.toolbar .sep { width: 1px; height: 22px; background: var(--line); margin: 0 var(--s-1); }
.link-quiet {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink);
  cursor: pointer;
  border-bottom: 1px dashed color-mix(in srgb, var(--ink) 30%, transparent);
}
.link-quiet:hover { color: var(--brand); border-bottom-color: var(--brand); }

.result-line {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-4); border-top: 1px solid var(--line);
  background: var(--surface-2); font-size: var(--fs-sm); color: var(--muted);
}
.pagination { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.pagination a, .pagination span {
  min-width: 30px; height: 30px; padding: 0 8px; display: grid; place-items: center;
  border-radius: 8px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font-size: var(--fs-sm); text-decoration: none;
}
.pagination a:hover { background: var(--surface-2); text-decoration: none; }
.pagination .active { background: var(--brand); border-color: transparent; color: var(--brand-ink); font-weight: var(--fw-medium); }
.pagination .disabled { opacity: .4; pointer-events: none; }

/* ---- definition lists, activity, timelines ---- */
.dl { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 0; }
.dl dt, .dl dd {
  margin: 0; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  font-size: var(--fs-md);
}
.dl dt { color: var(--muted); font-size: var(--fs-sm); }
.dl dd { font-weight: var(--fw-medium); }
.dl dt:last-of-type, .dl dd:last-of-type { border-bottom: 0; }

.list { list-style: none; margin: 0; padding: 0; }
.list-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 11px var(--s-5); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  text-decoration: none; color: inherit;
}
.list-item:last-child { border-bottom: 0; }
.list-item:hover { background: var(--surface-2); text-decoration: none; }
.list-item .li-ico {
  width: 32px; height: 32px; border-radius: 9px; flex: 0 0 32px; display: grid; place-items: center;
  background: var(--wash); color: var(--brand);
}
.list-item .li-ico svg { width: 16px; height: 16px; }
.list-item .li-main { min-width: 0; flex: 1 1 auto; }
.list-item .li-main strong { display: block; font-size: var(--fs-md); font-weight: var(--fw-medium); }
.list-item .li-main span { display: block; font-size: var(--fs-sm); color: var(--muted); }

.timeline { position: relative; margin: 0; padding: 0 0 0 22px; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px; background: var(--line); }
.timeline li { position: relative; padding: 0 0 var(--s-4); font-size: var(--fs-sm); }
.timeline li::before {
  content: ""; position: absolute; left: -21px; top: 4px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--line-strong);
}
.timeline li.ok::before { border-color: var(--ok); }
.timeline li.bad::before { border-color: var(--bad); }
.timeline li.brand::before { border-color: var(--brand); background: var(--brand); }
.timeline strong { display: block; font-weight: var(--fw-medium); color: var(--ink); }
.timeline time { color: var(--muted); font-size: var(--fs-xs); }

.bar { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--accent)); }
.bar.ok > span { background: var(--ok); }
.bar.warn > span { background: var(--warn); }
.bar.bad > span { background: var(--bad); }

.stat-strip { display: flex; flex-wrap: wrap; gap: var(--s-5); margin: var(--s-4) 0; }
.banner + .stat-strip, .page-head + .stat-strip { margin-top: var(--s-2); }
.stat-strip > div { min-width: 110px; }
.stat-strip b { display: block; font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.stat-strip span { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }

/* ---- tabs ---- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs button {
  position: relative; padding: 11px 14px; border: 0; background: transparent;
  color: var(--muted); font: inherit; font-size: var(--fs-md); font-weight: var(--fw-medium);
  cursor: pointer; white-space: nowrap; text-decoration: none; border-radius: 8px 8px 0 0;
}
.tabs a:hover, .tabs button:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.tabs a.active, .tabs button.active { color: var(--ink); }
.tabs a.active::after, .tabs button.active::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
  background: var(--brand); border-radius: 2px 2px 0 0;
}
.tab-panel[hidden] { display: none; }

/* ---- banners ---- */
.banner {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-md);
}
.banner svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; }
.banner.info { border-color: color-mix(in srgb, var(--info) 40%, var(--line)); background: color-mix(in srgb, var(--info) 8%, var(--surface)); }
.banner.ok { border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); background: color-mix(in srgb, var(--ok) 8%, var(--surface)); }
.banner.warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); background: color-mix(in srgb, var(--warn) 9%, var(--surface)); }
.banner.bad { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); background: color-mix(in srgb, var(--bad) 8%, var(--surface)); }
.banner strong { font-weight: var(--fw-medium); }

/* 6 ---------------------------------------------------------------- overlays */
.scrim {
  position: fixed; inset: 0; z-index: 60; background: var(--overlay);
  opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease);
  backdrop-filter: blur(2px);
}
.scrim.show { opacity: 1; pointer-events: auto; }

.dialog {
  position: fixed; z-index: 70; left: 50%; top: 50%;
  width: min(560px, calc(100vw - 32px)); max-height: min(84vh, 780px);
  transform: translate(-50%, calc(-50% + 8px)) scale(.98);
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  box-shadow: var(--e3); opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.dialog.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.dialog.wide { width: min(840px, calc(100vw - 32px)); }
.dialog-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.dialog-head h2 { font-size: var(--fs-lg); }
.dialog-body { padding: var(--s-5); overflow-y: auto; }
.dialog-foot { display: flex; gap: var(--s-2); justify-content: flex-end; padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line); background: var(--surface-2); }

.drawer {
  position: fixed; z-index: 70; top: 0; right: 0; bottom: 0;
  width: min(460px, 92vw); display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--e3);
  transform: translateX(100%); transition: transform var(--dur) var(--ease);
}
.drawer.show { transform: none; }
.drawer-head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
.drawer-body { flex: 1 1 auto; overflow-y: auto; padding: var(--s-5); }
.drawer-foot { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line); display: flex; gap: var(--s-2); }

.menu {
  position: absolute; z-index: 80; min-width: 210px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--e3);
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.menu.show { opacity: 1; pointer-events: auto; transform: none; }
.menu a, .menu button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ink); font: inherit; font-size: var(--fs-md); text-align: left; cursor: pointer; text-decoration: none;
}
.menu a:hover, .menu button:hover { background: var(--surface-2); text-decoration: none; }
.menu svg { width: 15px; height: 15px; color: var(--muted); }
.menu .sep { height: 1px; margin: 5px 4px; background: var(--line); }
.menu .label { padding: 6px 10px 4px; font-size: 10.5px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--muted); }

/* ---- command palette ---- */
.cmdk {
  position: fixed; inset: 0; z-index: 90; display: none;
  align-items: flex-start; justify-content: center;
  padding: 10vh var(--s-4) var(--s-4);
  background: color-mix(in srgb, var(--overlay) 88%, transparent);
  backdrop-filter: blur(6px);
}
.cmdk.show { display: flex; }
.cmdk-box {
  width: min(680px, 100%); max-height: 70vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-card);
  box-shadow: var(--e3); overflow: hidden;
  animation: cmdk-in var(--dur) var(--ease);
}
@keyframes cmdk-in { from { opacity: 0; transform: translateY(-10px) scale(.99); } }
.cmdk-input {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line);
}
.cmdk-input svg { width: 18px; height: 18px; color: var(--muted); }
.cmdk-input input { border: 0; background: transparent; font-size: var(--fs-lg); min-height: 34px; padding: 0; }
.cmdk-input input:focus { box-shadow: none; }
.cmdk-list { overflow-y: auto; padding: 6px; }
.cmdk-group { padding: 8px 10px 4px; font-size: 10.5px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--muted); }
.cmdk-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 9px; background: transparent;
  color: var(--ink); font: inherit; font-size: var(--fs-md); text-align: left; cursor: pointer;
}
.cmdk-item svg { width: 16px; height: 16px; color: var(--muted); }
.cmdk-item .hint { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); }
.cmdk-item[aria-selected="true"] { background: var(--wash); }
.cmdk-item[aria-selected="true"] svg { color: var(--brand); }
.cmdk-foot { display: flex; gap: var(--s-4); padding: 9px var(--s-4); border-top: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-xs); color: var(--muted); }

/* ---- toasts ---- */
.toasts { position: fixed; z-index: 100; right: var(--s-4); bottom: calc(var(--s-4) + var(--safe-b)); display: flex; flex-direction: column; gap: 8px; }
.toast {
  display: flex; align-items: flex-start; gap: 10px; min-width: 260px; max-width: 420px;
  padding: 11px 13px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); box-shadow: var(--e3); font-size: var(--fs-md);
  animation: toast-in var(--dur) var(--ease);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
.toast.ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.toast.bad { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.toast svg { width: 17px; height: 17px; margin-top: 1px; }
.toast.ok svg { color: var(--ok); } .toast.bad svg { color: var(--bad); } .toast.info svg { color: var(--info); }

/* 7 ---------------------------------------------------------------- states */
.skeleton {
  border-radius: 8px; background: linear-gradient(90deg, var(--surface-2) 25%, color-mix(in srgb, var(--line) 60%, var(--surface-2)) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.skeleton.line { height: 12px; margin-bottom: 8px; }
.skeleton.line.w60 { width: 60%; }
.skeleton.block { height: 96px; }

.empty { display: grid; place-items: center; text-align: center; padding: var(--s-8) var(--s-5); gap: var(--s-2); }
.empty .art { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--wash); color: var(--brand); margin-bottom: var(--s-2); }
.empty .art svg { width: 30px; height: 30px; }
.empty h3 { font-size: var(--fs-lg); }
.empty p { margin: 0; color: var(--muted); font-size: var(--fs-md); max-width: 46ch; }

.offline-bar {
  display: none; align-items: center; gap: 9px;
  padding: 8px var(--s-4); background: color-mix(in srgb, var(--warn) 18%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line));
  color: var(--ink); font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
body.is-offline .offline-bar { display: flex; }

/* ---- responsive: tablet tightens the rail, phone becomes an app ---- */
@media (max-width: 1280px) {
  .app[data-aside="open"] { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .app[data-aside="open"] .aside {
    position: fixed; right: 0; top: 0; width: min(var(--aside-w), 92vw);
    box-shadow: var(--e3); display: flex; transform: translateX(0);
  }
}
@media (max-width: 1080px) {
  :root { --rail-w: var(--rail-w-collapsed); }
  .rail-title, .rail-group, .nav-item span:not(.count) { display: none; }
  .nav-item { justify-content: center; padding: 10px 0; }
  .rail-head { justify-content: center; }
}
@media (max-width: 760px) {
  :root { --rail-w: 0px; }
  /* the breadcrumb becomes the page title on a phone; the shop name is already on the icon and the tab bar */
  .topbar .crumb a, .topbar .crumb > svg:first-child, .topbar .crumb svg + svg { display: none; }
  .topbar .crumb { min-width: 0; }
  .topbar .crumb strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kpi .spark { display: none; }
  .app, .app[data-rail="collapsed"], .app[data-aside="open"], .app[data-aside="open"][data-rail="collapsed"] {
    grid-template-columns: minmax(0, 1fr);
  }
  .rail { display: none; }
  .tabbar { display: grid; }
  .topbar { padding: 0 var(--s-3); height: 54px; }
  .topbar .crumb { font-size: var(--fs-sm); }
  .search-trigger { min-width: 0; flex: 1 1 auto; }
  .search-trigger .label-text, .search-trigger .kbd { display: none; }
  .content { padding: var(--s-4) var(--s-3) calc(var(--tabbar-h) + var(--safe-b) + var(--s-6)); }
  .page-head h1 { font-size: var(--fs-2xl); }
  .page-actions { width: 100%; margin-left: 0; }
  .page-actions .btn { flex: 1 1 auto; }
  .grid.side, .grid.two, .grid.three { grid-template-columns: minmax(0, 1fr); }
  .dl { grid-template-columns: 1fr; }
  .dl dt { padding-bottom: 0; border-bottom: 0; }
  .card-head, .card-body { padding-left: var(--s-4); padding-right: var(--s-4); }
  .list-item { padding-left: var(--s-4); padding-right: var(--s-4); }
  .dialog { top: auto; bottom: 0; left: 0; width: 100vw; max-height: 88vh; transform: translateY(100%);
            border-radius: var(--radius-card) var(--radius-card) 0 0; }
  .dialog.show { transform: none; }
  .dialog.wide { width: 100vw; }
  .drawer { width: 100vw; border-left: 0; }
  .toasts { left: var(--s-3); right: var(--s-3); bottom: calc(var(--tabbar-h) + var(--safe-b) + 10px); }
  .toast { min-width: 0; max-width: none; width: 100%; }
  .cmdk { padding-top: 6vh; }
  .table thead th, .table tbody td { padding: 0 10px; }
  .stat-strip { gap: var(--s-4); }
  .stat-strip > div { min-width: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media print {
  .rail, .topbar, .tabbar, .aside, .toasts, .toolbar, .page-actions, .scrim, .dialog, .drawer { display: none !important; }
  .app { display: block; }
  .content { padding: 0; }
  .card { box-shadow: none; border-color: #ccc; }
  body { background: #fff; color: #000; }
}

/* 7d --------------------------------------------------------------- forms
   A form is a stack of blocks. Each block says what it is for, so a fifteen-field product form reads as four
   short decisions instead of one wall. The heading is the navigation. */
.form-block {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--line);
}
.form-block:first-of-type { border-top: 0; padding-top: 0; }
.form-block:last-of-type { padding-bottom: 0; }
.form-block-head { display: flex; flex-direction: column; gap: 3px; }
.form-block-head h3 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: -.005em;
}
.form-block-head p { margin: 0; font-size: var(--fs-sm); color: var(--muted); max-width: 70ch; }
.field .req {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted);
}
.input-group .prefix {
  position: absolute;
  left: 12px;
  font-size: var(--fs-sm);
  color: var(--muted);
  pointer-events: none;
}
.input-group:has(.prefix) input { padding-left: 34px; }
.card.kpi.alert strong { color: var(--warn); }

.form-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  position: sticky;
  bottom: 0;
  z-index: 2;
}

/* 8 ---------------------------------------------------------------- legacy aliases
   Screens that have not been rebuilt yet still use the first generation class names. Rather than leave them
   unstyled between deploys, the old names are mapped onto the new components. Nothing new should be written
   against these; they exist so a half-migrated interface stays coherent instead of half-broken. */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--e1); overflow: hidden; }
.panel .pad { padding: var(--s-5); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-4); }
.cards .card b { display: block; font-size: var(--fs-2xl); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cards .card span { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.cards .card { padding: var(--s-4) var(--s-5); }
.sub { color: var(--muted); font-size: var(--fs-md); margin: 0 0 var(--s-4); max-width: 90ch; }
.table-scroll { overflow: auto; }
.tabletight { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.tabletight th { text-align: left; font-weight: var(--fw-medium); color: var(--muted); padding: 7px 12px 7px 0; white-space: nowrap; vertical-align: top; border-bottom: 1px solid var(--line); }
.tabletight td { padding: 7px 12px 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); }
.formgrid label { font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-medium); display: block; }
.formgrid input, .formgrid select, .formgrid textarea { margin-top: 5px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.span2 { grid-column: 1 / -1; }
.wiz { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--s-5); margin: 0 0 var(--s-4); box-shadow: var(--e1); }
.wiz h2 { font-size: var(--fs-lg); }
.pager { display: flex; gap: var(--s-2); align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); background: var(--surface-2); }
.flash, .errors { padding: var(--s-3) var(--s-4); border-radius: var(--radius); margin-bottom: var(--s-4); font-size: var(--fs-md); }
.flash { border: 1px solid color-mix(in srgb, var(--ok) 45%, var(--line)); background: color-mix(in srgb, var(--ok) 8%, var(--surface)); }
.errors { border: 1px solid var(--bad); background: color-mix(in srgb, var(--bad) 8%, var(--surface)); }
.pill, .badge, .hits, .totals, .grand, .iconbtn, .search, .view, .n, .title, .on { }
.pill { display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); }
.pill.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.pill.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.pill.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
.iconbtn { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; }
.iconbtn:hover { color: var(--ink); background: var(--surface-2); }
.login { max-width: 400px; margin: 6vh auto; }
.login h1 { margin-bottom: var(--s-4); }
.login label { display: block; margin: var(--s-3) 0 5px; font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-medium); }
.login button[type="submit"] { width: 100%; margin-top: var(--s-4); }
/* a payload shown as it arrived: monospace, wrapped, never cut off mid-token */
.json {
  margin: 0;
  padding: var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 260px;
  overflow: auto;
}
tr + tr > td.right, td.right { text-align: right; }
.ok { color: var(--ok); } .warn { color: var(--warn); } .bad { color: var(--bad); }
@media (max-width: 760px) { .formgrid, .grid2 { grid-template-columns: 1fr; } }