/* MSV Transport — industrial utility SaaS
   Light theme by default; theme accents switchable via CSS vars. */

:root {
  /* Warm neutral surface palette */
  --bg:          #F3F0EA;    /* bone/paper */
  --surface:    #FFFFFF;
  --surface-1:  #FFFFFF;
  --surface-2:  #FAF7F1;
  --surface-3:  #EDE8DF;
  --ink:        #141210;
  --ink-2:      #2A2621;
  --muted:      #6B6358;
  --muted-2:    #94897B;
  --line:       #D9D2C4;
  --line-2:     #E7E1D3;
  --hairline:   #C9C1B1;

  /* Accent — blue by default */
  --accent:        oklch(0.55 0.22 255);
  --accent-ink:    #ffffff;
  --accent-soft:   oklch(0.95 0.05 255);
  --accent-2:      oklch(0.42 0.22 255);

  /* Status */
  --ok:      oklch(0.62 0.14 150);
  --ok-soft: oklch(0.94 0.05 150);
  --warn:    oklch(0.72 0.16 60);
  --warn-soft: oklch(0.94 0.06 75);
  --err:     oklch(0.58 0.19 25);
  --err-soft: oklch(0.94 0.06 25);
  --info:    oklch(0.58 0.11 240);
  --info-soft: oklch(0.94 0.04 240);
  --slate:    #6B6358;
  --slate-soft: #EDE8DF;

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Density (comfortable default) */
  --row-pad-y: 12px;
  --row-pad-x: 14px;
  --cell-pad-y: 10px;
  --cell-pad-x: 12px;
  --btn-pad-y: 8px;
  --btn-pad-x: 14px;
  --card-pad: 18px;
  --radius: 6px;
  --radius-sm: 4px;

  color-scheme: light;
}

:root[data-theme="amber"] {
  --accent:      oklch(0.74 0.17 65);
  --accent-ink:  #1A1408;
  --accent-soft: oklch(0.94 0.06 75);
  --accent-2:    oklch(0.60 0.17 65);
}
:root[data-theme="red"] {
  --accent:      oklch(0.52 0.22 25);
  --accent-ink:  #ffffff;
  --accent-soft: oklch(0.95 0.05 25);
  --accent-2:    oklch(0.40 0.22 25);
}
:root[data-theme="green"] {
  --accent:      oklch(0.55 0.14 150);
  --accent-ink:  #0B1A0F;
  --accent-soft: oklch(0.94 0.05 150);
  --accent-2:    oklch(0.45 0.14 150);
}
:root[data-theme="steel"] {
  --accent:      oklch(0.50 0.11 240);
  --accent-ink:  #0A1220;
  --accent-soft: oklch(0.94 0.04 240);
  --accent-2:    oklch(0.40 0.11 240);
}
:root[data-theme="violet"] {
  --accent:      oklch(0.55 0.20 300);
  --accent-ink:  #ffffff;
  --accent-soft: oklch(0.95 0.06 300);
  --accent-2:    oklch(0.43 0.20 300);
}

:root[data-density="compact"] {
  --row-pad-y: 7px;
  --row-pad-x: 10px;
  --cell-pad-y: 6px;
  --cell-pad-x: 10px;
  --btn-pad-y: 6px;
  --btn-pad-x: 11px;
  --card-pad: 13px;
}

/* ===== Dark mode ===== */
:root[data-mode="dark"] {
  --bg:        #0c1017;
  --surface:   #131920;
  --surface-1: #131920;
  --surface-2: #1a2230;
  --surface-3: #1f2937;
  --ink:       #dde6f0;
  --ink-2:     #b8c8da;
  --muted:     #6b7f96;
  --muted-2:   #4a5e72;
  --line:      #1e2d3e;
  --line-2:    #192536;
  --hairline:  #253848;
  --slate:     #6b7f96;
  --slate-soft: #1a2230;

  --ok-soft:   oklch(0.22 0.06 150);
  --warn-soft: oklch(0.22 0.07 65);
  --err-soft:  oklch(0.22 0.06 25);
  --info-soft: oklch(0.22 0.04 240);

  color-scheme: dark;
}
:root[data-mode="dark"][data-theme="blue"]  { --accent-soft: oklch(0.22 0.08 255); }
:root[data-mode="dark"][data-theme="red"]   { --accent-soft: oklch(0.22 0.08 25); }
:root[data-mode="dark"][data-theme="steel"] { --accent-soft: oklch(0.22 0.05 240); }
:root[data-mode="dark"][data-theme="amber"] { --accent-soft: oklch(0.22 0.07 65); }
:root[data-mode="dark"][data-theme="green"] { --accent-soft: oklch(0.22 0.06 150); }
:root[data-mode="dark"][data-theme="violet"] { --accent-soft: oklch(0.22 0.07 300); }

* { box-sizing: border-box; }
html, body, #root { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11","ss01","ss03";
}
code, .mono, .num { font-family: var(--font-mono); font-feature-settings: "tnum","zero"; letter-spacing: -0.01em; }
.num { font-variant-numeric: tabular-nums; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }

/* ----- App shell ----- */
.app {
  display: grid;
  grid-template-columns: 236px 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas: "sidebar topbar" "sidebar main";
  height: 100vh;
  background: var(--bg);
  transition: grid-template-columns 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
:root[data-sidebar="collapsed"] .app {
  grid-template-columns: 52px 1fr;
}
.sidebar {
  grid-area: sidebar;
  background: #0f1623;
  color: #dde4ef;
  border-right: 1px solid #060d18;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 236px;
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}
/* Collapsed: thin 52px rail */
:root[data-sidebar="collapsed"] .sidebar {
  width: 52px;
}
/* Hover on collapsed rail: expand as overlay over content */
:root[data-sidebar="collapsed"] .sidebar.hovering {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 236px;
  z-index: 250;
  box-shadow: 6px 0 32px rgba(0, 0, 0, 0.5);
}
/* Center the JJ mark in the 52px rail */
:root[data-sidebar="collapsed"] .sidebar:not(.hovering) .brand {
  justify-content: center;
  padding: 0;
  border-bottom-color: #1a2535;
}
:root[data-sidebar="collapsed"] .sidebar:not(.hovering) .brand .brand-text,
:root[data-sidebar="collapsed"] .sidebar:not(.hovering) .brand .sidebar-toggle {
  display: none;
}
.sidebar .brand {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid #1a2535;
}
.sidebar .brand .brand-home {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.sidebar .brand .mark {
  width: 28px; height: 28px;
  background: oklch(0.52 0.22 25);
  border-radius: 4px;
  display: grid; place-items: center;
  color: #ffffff;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.03em;
}
.sidebar .brand .name {
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 13px;
  text-transform: uppercase;
}
.sidebar .brand .sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #7a8fa8;
  letter-spacing: 0.04em;
}
.sidebar-toggle {
  margin-left: auto;
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  color: #7a8fa8;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.sidebar-toggle:hover { background: #1a2535; color: #c8d4e3; }
.sidebar nav {
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;        /* allow the flex child to shrink so it can scroll */
  overflow-y: auto;     /* vertical scroll when the menu is taller than the viewport */
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #2a3650 transparent;
}
.sidebar nav::-webkit-scrollbar { width: 8px; }
.sidebar nav::-webkit-scrollbar-thumb { background: #2a3650; border-radius: 4px; }
.sidebar nav::-webkit-scrollbar-thumb:hover { background: #364465; }
.sidebar nav::-webkit-scrollbar-track { background: transparent; }
.sidebar .section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #7a8fa8;
  padding: 14px 10px 6px;
  text-transform: uppercase;
}
/* Collapsible section header */
.sidebar .section-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: none;
  border: 0;
  cursor: pointer;
}
.sidebar .section-toggle:hover { color: #c8d4e3; }
.sidebar .section-toggle .nav-caret {
  width: 10px;
  height: 10px;
  color: #7a8fa8;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.sidebar .section-toggle .nav-caret.collapsed { transform: rotate(-90deg); }
.sidebar .nav-group { display: flex; flex-direction: column; gap: 2px; }
[x-cloak] { display: none !important; }

/* Autocomplete dropdown input (partials/autocomplete) — styled the same
   inside or outside a .field wrapper. */
.ac-input,
.field .ac-input {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 4px;
  padding: 8px 28px 8px 10px;
  font-size: 13px;
  outline: none;
  color: inherit;
}
.ac-input:focus,
.field .ac-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent);
}

/* Multi-select control + dropdown panel (reused by PO form & filters) */
.po-ms-control {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 4px;
  padding: 6px 8px;
  min-height: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  cursor: pointer;
}
.po-ms-panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(20, 18, 16, .15);
  max-height: 260px;
  overflow: auto;
  padding: 6px;
}
.po-ms-opt {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 5px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.po-ms-opt:hover { background: var(--surface-2); }

/* Transaction form layout helpers (shared by PO form + transaction engine) */
.po-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; }
.po-grid .span-all { grid-column: 1 / -1; }
@media (max-width: 760px) { .po-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .po-grid { grid-template-columns: 1fr; } }
.po-add {
  flex: 0 0 auto;
  width: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.po-add:hover { filter: brightness(1.06); }
.po-err { font-size: 11px; color: var(--err); margin-top: 3px; }
.req { color: var(--err); }

/* Role-permission toggle buttons */
.perm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 66px;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  transition: background 0.12s, color 0.12s, filter 0.12s;
}
.perm-btn.on { background: var(--accent); color: #fff; }
.perm-btn:hover { filter: brightness(1.08); }

/* Urgent order row highlight (light red) */
.tbl tbody tr.tr-urgent { background: rgba(239, 68, 68, 0.28); }
.tbl tbody tr.tr-urgent:hover { background: rgba(239, 68, 68, 0.38); }
.navitem {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 4px;
  color: #c8d4e3;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
}
.navitem:hover { background: #1a2535; color: #e8eef8; }
.navitem.active { background: #1a2535; color: #ffffff; }
.navitem.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 16px;
  background: var(--accent);
  border-radius: 2px;
}
.nav-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: #7a8fa8;
  transition: color 0.12s;
}
.navitem:hover .nav-icon,
.navitem.active .nav-icon { color: inherit; }
.nav-label { flex: 1; }
.navitem .count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #7a8fa8;
}
.navitem.active .count { color: var(--accent); }

/* Collapsed rail: icon only, centred */
:root[data-sidebar="collapsed"] .sidebar:not(.hovering) .navitem {
  justify-content: center;
  padding: 9px 0;
  gap: 0;
}
:root[data-sidebar="collapsed"] .sidebar:not(.hovering) .nav-label,
:root[data-sidebar="collapsed"] .sidebar:not(.hovering) .navitem .count,
:root[data-sidebar="collapsed"] .sidebar:not(.hovering) .section-label {
  display: none;
}
:root[data-sidebar="collapsed"] .sidebar:not(.hovering) .nav-icon {
  color: #8a9fc0;
}
:root[data-sidebar="collapsed"] .sidebar:not(.hovering) .navitem:hover .nav-icon,
:root[data-sidebar="collapsed"] .sidebar:not(.hovering) .navitem.active .nav-icon {
  color: #e8eef8;
}

.sidebar .foot {
  padding: 12px 14px;
  border-top: 1px solid #1a2535;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #7a8fa8;
  letter-spacing: 0.04em;
}

/* ----- Topbar ----- */
.topbar {
  grid-area: topbar;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 16px;
}
.topbar .crumbs {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.topbar .crumbs b { color: var(--ink); font-weight: 600; }
.topbar .grow { flex: 1; }
.topbar .search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 10px;
  width: 280px;
}
.topbar .search input {
  border: 0; background: transparent; outline: none;
  flex: 1; font-size: 13px;
}
.topbar .search kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--surface);
}
.topbar .tz {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  border-left: 1px solid var(--line);
  padding-left: 16px;
}
.topbar .whoami {
  display: flex; align-items: center; gap: 10px;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}
.avatar {
  width: 28px; height: 28px;
  background: var(--ink);
  color: #F5EFDF;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}

/* ----- Main ----- */
.main {
  grid-area: main;
  overflow: auto;
  padding: 22px 26px 60px;
}
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.page-head h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.page-head .sub {
  color: var(--muted);
  font-size: 13px;
}
.page-head .actions { display: flex; gap: 8px; }

/* ----- Buttons ----- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border 0.12s;
}
.btn:hover { background: var(--surface-2); border-color: var(--hairline); }
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.btn.primary:hover { filter: brightness(0.96); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
/* Tinted accent — for secondary actions that still need to be found quickly
   (e.g. "Add Row" under a line-items grid). Lighter weight than .primary, so
   it doesn't compete with the form's Save button. */
.btn.accent {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-2);
  font-weight: 600;
}
.btn.accent:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.danger { color: var(--err); }
.btn.sm { padding: 4px 8px; font-size: 12px; }
.btn.icon { padding: 6px 8px; }

/* ----- Cards ----- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.card .card-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card .card-head h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}
.card .card-body { padding: var(--card-pad); }
.card .card-body.flush { padding: 0; }

/* ----- KPI ----- */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}
.kpi::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--line-2);
}
.kpi.accent::before { background: var(--accent); }
.kpi .label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kpi .val {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 6px;
  color: var(--ink);
}
.kpi .val.sm { font-size: 22px; }
.kpi .delta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}
.kpi .delta.up { color: var(--ok); }
.kpi .delta.dn { color: var(--err); }

/* Interactive KPI cards — colour-invert + bouncy lift + shine on hover */
.kpi.kpi-hover {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .32s cubic-bezier(.34,1.56,.64,1),
              box-shadow .32s ease, background-color .32s ease, border-color .32s ease;
}
.kpi.kpi-hover::before { display: none; }          /* remove the left accent bar */
.kpi.kpi-hover .label,
.kpi.kpi-hover .val { position: relative; z-index: 1; transition: color .32s ease; }
/* diagonal shine that sweeps across on hover */
.kpi.kpi-hover::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -75%;
  width: 50%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg);
  opacity: 0;
  pointer-events: none;
}
.kpi.kpi-hover:hover {
  transform: translateY(-7px) scale(1.035);
  box-shadow: 0 18px 34px rgba(0,0,0,.24);
}
.kpi.kpi-hover:hover .label,
.kpi.kpi-hover:hover .val { color: #fff !important; }
.kpi.kpi-hover:hover::after { opacity: 1; animation: kpiShine .75s ease; }
@keyframes kpiShine {
  0%   { left: -75%; }
  100% { left: 125%; }
}
.kpi.kpi-warn:hover   { background: var(--warn);   border-color: var(--warn); }
.kpi.kpi-err:hover    { background: var(--err);    border-color: var(--err); }
.kpi.kpi-accent:hover { background: var(--accent); border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .kpi.kpi-hover { transition: background-color .2s ease, border-color .2s ease; }
  .kpi.kpi-hover:hover { transform: none; }
  .kpi.kpi-hover:hover::after { animation: none; opacity: 0; }
}

/* ----- Tables ----- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td {
  padding: var(--cell-pad-y) var(--cell-pad-x);
  text-align: left;
  border-bottom: 1px solid var(--line-2);
  font-size: 13px;
  vertical-align: middle;
}
.tbl th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 1;
}
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl tbody tr.selected { background: var(--accent-soft); }
.tbl td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.tbl th.num { text-align: right; }
/* Inline-edit inputs/selects inside tables — match the project's .field controls */
.tbl td input[type="text"], .tbl td input[type="number"], .tbl td input[type="date"], .tbl td select {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  transition: border 0.12s, box-shadow 0.12s;
}
.tbl td input[type="text"]:focus, .tbl td input[type="number"]:focus, .tbl td input[type="date"]:focus, .tbl td select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent);
}
.tbl td.id { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
.tbl td.dim { color: var(--muted); }

/* ----- Master listing: click-to-sort headers + per-column filter row ----- */
.tbl th.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.tbl th.th-sort:hover { color: var(--ink); }
.tbl th.th-sort .sort-ind { margin-left: 4px; font-family: var(--font-sans); font-size: 9px; }
.tbl th.th-sort .sort-ind.on { color: var(--accent); }
.tbl th.th-sort .sort-ind.off { color: var(--muted); opacity: 0.4; }

.tbl thead tr.col-filter-row th {
  position: static;               /* the heading row stays sticky, not this one */
  background: var(--surface-2);
  padding: 5px 8px;
  border-bottom: 1px solid var(--line);
}
.tbl thead tr.col-filter-row input.col-filter,
.tbl thead tr.col-filter-row select.col-filter {
  width: 100%;
  min-width: 70px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 4px;
  padding: 5px 8px;
  /* Reset the inherited mono/uppercase heading font. */
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  outline: none;
  transition: border 0.12s, box-shadow 0.12s;
}
.tbl thead tr.col-filter-row input.col-filter::placeholder {
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}
.tbl thead tr.col-filter-row input.col-filter:focus,
.tbl thead tr.col-filter-row select.col-filter:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent);
}

/* ----- Status pills ----- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.pill.ok      { color: var(--ok);    background: var(--ok-soft);    border-color: color-mix(in oklab, var(--ok) 25%, transparent); }
.pill.warn    { color: var(--warn-2, #8a5a00); background: var(--warn-soft);  border-color: color-mix(in oklab, var(--warn) 30%, transparent); }
.pill.err     { color: var(--err);   background: var(--err-soft);   border-color: color-mix(in oklab, var(--err) 25%, transparent); }
.pill.info    { color: var(--info);  background: var(--info-soft);  border-color: color-mix(in oklab, var(--info) 25%, transparent); }
.pill.slate   { color: var(--slate); background: var(--slate-soft); border-color: var(--line); }
.pill.accent  { color: var(--accent-2); background: var(--accent-soft); border-color: color-mix(in oklab, var(--accent) 40%, transparent); }
.pill.plain::before { display: none; }

/* ----- Two-column layouts ----- */
.two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ----- Forms ----- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.field input, .field select, .field textarea {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 13px;
  outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row.three { grid-template-columns: 1fr 1fr 1fr; }

/* Key-value grid used in detail pages */
.kv { display: grid; grid-template-columns: 130px 1fr; row-gap: 8px; column-gap: 16px; font-size: 13px; }
.kv .k {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  align-self: center;
}
.kv .v { color: var(--ink); }
.kv .v .mono { font-size: 12px; }

/* ----- Tabs ----- */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.tab {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.tab .count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  margin-left: 6px;
}

/* ----- Dispatch board ----- */
.board {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  height: calc(100vh - 220px);
}
.board .col { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; min-height: 0; }
.board .col-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-2);
  display: flex; justify-content: space-between; align-items: center;
}
.board .col-head h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}
.board .col-body { overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }

.driver-card, .load-card {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  cursor: grab;
}
.driver-card.selected, .load-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.driver-card .name { font-weight: 600; }
.driver-card .meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 4px; }

.assign-grid {
  display: grid;
  grid-template-columns: 1fr 32px 1fr;
  gap: 10px;
  align-items: center;
}
.assign-grid .arrow {
  text-align: center;
  color: var(--muted);
  font-family: var(--font-mono);
}
.assign-grid .assign-slot {
  min-height: 80px;
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.assign-grid .assign-slot.filled {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
}

/* ----- Activity feed ----- */
.feed { display: flex; flex-direction: column; }
.feed .row {
  display: grid;
  grid-template-columns: 72px 8px 1fr;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line-2);
  font-size: 13px;
}
.feed .row:last-child { border-bottom: none; }
.feed .when { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.feed .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; margin-top: 7px; }
.feed .row[data-kind="invoice"] .dot { background: var(--ok); }
.feed .row[data-kind="expense"] .dot { background: var(--warn); }
.feed .row[data-kind="truck"] .dot { background: var(--err); }
.feed .row[data-kind="settlement"] .dot { background: var(--info); }

/* ----- Route strip ----- */
.route {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
}
.route .node {
  display: flex; flex-direction: column; gap: 2px;
}
.route .node .where {
  font-weight: 600;
  font-size: 14px;
}
.route .node .when {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}
.route .node .addr {
  font-size: 12px; color: var(--muted-2);
}
.route .bar {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.route .bar .line {
  height: 2px;
  width: 120px;
  background: repeating-linear-gradient(90deg, var(--hairline) 0 6px, transparent 6px 10px);
}
.route .bar .miles {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

/* ----- Progress bar ----- */
.progress {
  height: 6px;
  background: var(--line-2);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.progress > span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}

/* ----- Drawer / Modal ----- */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(20, 18, 16, 0.35);
  z-index: 90;
  animation: fadein 0.15s ease-out;
}
.drawer {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: 520px;
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: -12px 0 32px rgba(20,18,16,0.08);
  z-index: 100;
  display: flex; flex-direction: column;
  animation: slidein 0.2s ease-out;
}
.drawer.wide { width: 640px; }
.drawer .head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
.drawer .head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
.drawer .body { padding: 18px 20px; overflow: auto; flex: 1; }
.drawer .foot {
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 8px;
}

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes slidein { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ----- Tweaks panel ----- */
.tweaks {
  /* Always-dark glass palette — these variables cascade to every child
     control, so the panel stays dark even in light mode. */
  --bg:         #0c1017;
  --surface:    #131920;
  --surface-1:  #131920;
  --surface-2:  #1b2433;
  --surface-3:  #1f2937;
  --ink:        #e6edf6;
  --ink-2:      #b8c8da;
  --muted:      #8a9bb1;
  --muted-2:    #56697e;
  --line:       #2c3c50;
  --line-2:     #202e3f;
  --hairline:   #354860;
  --slate:      #8a9bb1;
  --slate-soft: #1b2433;
  color-scheme: dark;

  position: fixed;
  bottom: 20px; right: 20px;
  width: 268px;
  background: linear-gradient(160deg, rgba(30,41,58,0.74), rgba(14,20,30,0.70));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.55),
    0 6px 18px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.09);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  z-index: 200;
  overflow: hidden;

  /* Animated open / close */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px) scale(0.96);
  transform-origin: bottom right;
  transition: opacity 0.26s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.28s linear;
}
.tweaks.on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Frosted backdrop behind the panel */
.tweaks-backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(8, 12, 20, 0.34);
  -webkit-backdrop-filter: blur(3px) saturate(105%);
  backdrop-filter: blur(3px) saturate(105%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s linear;
}
.tweaks-backdrop.on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Staggered fade-in of each row when the panel opens */
@keyframes tweakRowIn {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tweaks .body > .row,
.tweaks .body > .reset-btn { opacity: 0; }
.tweaks.on .body > .row,
.tweaks.on .body > .reset-btn {
  animation: tweakRowIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.tweaks.on .body > *:nth-child(1) { animation-delay: 0.05s; }
.tweaks.on .body > *:nth-child(2) { animation-delay: 0.09s; }
.tweaks.on .body > *:nth-child(3) { animation-delay: 0.13s; }
.tweaks.on .body > *:nth-child(4) { animation-delay: 0.17s; }
.tweaks.on .body > *:nth-child(5) { animation-delay: 0.21s; }
.tweaks.on .body > *:nth-child(6) { animation-delay: 0.25s; }
.tweaks.on .body > *:nth-child(7) { animation-delay: 0.29s; }
.tweaks.on .body > *:nth-child(8) { animation-delay: 0.33s; }
.tweaks .head {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.tweaks .body { padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.tweaks .row { display: flex; flex-direction: column; gap: 6px; }
.tweaks .row > .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.swatch {
  width: 100%; height: 28px; border-radius: 4px;
  border: 1px solid var(--line);
  cursor: pointer;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent-ink);
  transition: transform 0.1s, box-shadow 0.12s;
}
.swatch:not(.active):hover { transform: translateY(-1px); }
.swatch.active {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--surface);
  font-weight: 700;
}
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.seg.seg-3 { grid-template-columns: repeat(3, 1fr); }
.tweaks .reset-btn {
  width: 100%; justify-content: center;
  border: 1px solid var(--line); color: var(--muted);
}
.tweaks .reset-btn:hover { color: var(--err); border-color: color-mix(in oklab, var(--err) 40%, var(--line)); }
.seg button {
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  transition: background 0.12s, color 0.12s;
}
.seg button:not(.active):hover {
  color: var(--ink);
  background: color-mix(in oklab, var(--ink) 7%, transparent);
}
.seg button.active {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

/* ----- Misc ----- */
.empty {
  text-align: center;
  color: var(--muted);
  padding: 40px 20px;
  font-size: 13px;
}
.empty .big {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 8px;
}

.divider { height: 1px; background: var(--line-2); margin: 14px 0; }

.scrollbox { overflow: auto; max-height: 360px; }

.tag {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--muted);
}

.doc-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 13px;
}
.doc-chip .thumb {
  width: 36px; height: 44px;
  background: repeating-linear-gradient(45deg, var(--surface-2) 0 4px, var(--surface-3) 4px 8px);
  border: 1px solid var(--line);
  border-radius: 2px;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 9px; color: var(--muted);
}
.doc-chip .meta { flex: 1; }
.doc-chip .name { font-weight: 500; }
.doc-chip .when { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }

.placeholder-box {
  background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--surface-3) 6px 12px);
  border: 1px dashed var(--hairline);
  border-radius: 4px;
  padding: 24px;
  display: grid; place-items: center;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-align: center;
}

/* print-like section headings */
.section-heading {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 6px 0 10px;
  display: flex; align-items: center; gap: 10px;
}
.section-heading::after {
  content: ""; flex: 1; height: 1px; background: var(--line-2);
}

.mini-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px;
  border-right: 1px solid var(--line-2);
}
.mini-stat:last-child { border-right: none; }
.mini-stat .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.mini-stat .v { font-family: var(--font-mono); font-size: 16px; font-weight: 600; }

.stat-strip {
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

/* Simple bar chart */
.chart-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #0f1623;
  color: #e8eef8;
  font-size: 11px;
  font-family: var(--font-mono);
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
}
.chart-bars {
  display: flex; align-items: flex-end; gap: 6px;
  height: 140px;
  padding: 10px 2px;
}
.chart-bars .bar {
  flex: 1;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
  position: relative;
  min-width: 12px;
}
.chart-bars .bar.off { background: var(--line-2); }
.chart-bars .bar .lbl {
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
}
.chart-x {
  display: flex; gap: 6px; padding: 6px 2px 0;
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
}
.chart-x span { flex: 1; text-align: center; }

/* ----- Filter bar ----- */
.filter-bar {
  margin-bottom: 18px;
}
.filters-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  box-shadow: 0 1px 0 rgba(20, 18, 16, 0.02);
}
.filters-inner > svg:first-child {
  color: var(--muted);
  margin-right: 2px;
}
.filters-inner .filters-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 600;
  padding-right: 10px;
  margin-right: 4px;
  border-right: 1px solid var(--line-2);
  align-self: stretch;
  display: flex;
  align-items: center;
}
.filter-field {
  display: inline-flex;
  align-items: stretch;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  height: 30px;
}
.filter-field:hover {
  border-color: var(--line-strong, var(--muted-2));
}
.filter-field .lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 10px;
  display: flex;
  align-items: center;
  background: var(--surface-3, rgba(0, 0, 0, 0.025));
  border-right: 1px solid var(--line-2);
  white-space: nowrap;
}
.filter-field select,
.filter-field input {
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  padding: 0 26px 0 10px;
  outline: none;
  cursor: pointer;
  min-width: 110px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16' fill='none' stroke='%236B6358' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
  /* dark mode arrow applied below */
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.filter-field input[type="date"] {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  min-width: 130px;
  padding: 0 10px;
  background-image: none;
  cursor: text;
}
.filter-field input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
}
.filter-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent);
}
.filter-field:focus-within .lbl {
  color: var(--accent);
}
.filters-inner .btn {
  height: 30px;
  padding: 0 12px;
  margin-left: 2px;
}

/* ============ Auth screens ============ */
.auth-screen {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--bg);
  font-family: var(--font-sans);
}
.auth-left {
  position: relative;
  background:
    radial-gradient(circle at 30% 20%, color-mix(in oklch, var(--accent) 20%, transparent), transparent 55%),
    radial-gradient(circle at 70% 80%, color-mix(in oklch, var(--accent-2) 25%, transparent), transparent 55%),
    linear-gradient(180deg, #0d1829, #060e1b);
  color: #f5efe2;
  padding: 56px 64px;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.auth-left::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.auth-left > * { position: relative; z-index: 1; }

.auth-brand {
  display: flex; align-items: center; gap: 14px;
}
.auth-brand .mark {
  width: 44px; height: 44px; border-radius: 8px;
  background: oklch(0.52 0.22 25); color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; letter-spacing: 0.05em;
}
.auth-brand .name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.auth-brand .mc { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: rgba(245,239,226,0.55); margin-top: 2px; }

.auth-headline {
  font-size: 56px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05;
  margin: 0 0 12px; max-width: 540px;
}
.auth-sub {
  font-size: 18px; line-height: 1.5; color: rgba(245,239,226,0.72);
  max-width: 480px; margin-bottom: 36px;
}
.auth-facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  padding-top: 32px; border-top: 1px solid rgba(245,239,226,0.12);
  max-width: 600px;
}
.auth-facts .fact .lbl {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(245,239,226,0.5); margin-bottom: 6px;
}
.auth-facts .fact .val {
  font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: #f5efe2;
}

.auth-footline {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(245,239,226,0.4);
}
.auth-pwtips { margin-top: 32px; max-width: 440px; }
.auth-pwtips .lbl {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(245,239,226,0.55); margin-bottom: 8px;
}
.auth-pwtips ul {
  margin: 0; padding-left: 18px; color: rgba(245,239,226,0.82); line-height: 1.7; font-size: 14px;
}

.auth-right {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 48px;
  background: var(--bg);
  position: relative;
}
.auth-form {
  width: 100%; max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 32px;
  box-shadow: 0 2px 14px rgba(20,18,16,0.04);
}
.auth-title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; color: var(--ink); }
.auth-subtitle { font-size: 14px; color: var(--muted); margin-bottom: 24px; }

.auth-field {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px;
}
.auth-field > span {
  font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em;
}
.auth-field > span.row { display: flex; align-items: center; justify-content: space-between; }
.auth-field input {
  height: 40px; padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--font-sans); font-size: 14px; color: var(--ink);
  outline: none;
  transition: border 0.12s, box-shadow 0.12s;
}
.auth-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent);
}
.auth-field input::placeholder { color: var(--muted); }
/* Password field with show/hide toggle */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap input { width: 100%; padding-right: 44px; }
/* Hide the browser's native reveal/clear icons (Edge/IE) so only our toggle shows */
.pw-wrap input::-ms-reveal,
.pw-wrap input::-ms-clear { display: none; }
.pw-toggle {
  position: absolute; top: 0; right: 2px;
  height: 40px; width: 40px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; padding: 0;
  color: var(--muted); cursor: pointer;
  transition: color 0.12s;
}
.pw-toggle:hover, .pw-toggle:focus-visible { color: var(--accent); outline: none; }

/* Toggle switch — for boolean fields (e.g. Active). Wraps a visually-hidden
   checkbox; the .track + .knob render the switch. Themed via design tokens. */
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.switch > input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.switch .track {
  flex: 0 0 auto; width: 38px; height: 22px; border-radius: 999px;
  background: var(--surface-3); border: 1px solid var(--line);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.switch .knob {
  position: absolute; top: 50%; left: 3px; transform: translateY(-50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: left 0.18s ease;
}
.switch > input:checked ~ .track { background: var(--accent); border-color: var(--accent); }
.switch > input:checked ~ .knob { left: 19px; }
.switch > input:focus-visible ~ .track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch > input:disabled ~ .track { opacity: 0.5; }
.switch > input:disabled ~ .knob { opacity: 0.5; }

/* Drag-and-drop image upload (BaseMaster 'images' field) */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 22px 16px; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--hairline); border-radius: 8px;
  background: var(--surface-2); color: var(--muted);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.dropzone:hover { border-color: var(--accent); color: var(--ink-2); }
.dropzone.dragover {
  border-color: var(--accent); color: var(--accent);
  background: var(--accent-soft);
}
.dropzone .dz-input { display: none; }
.dropzone .dz-text { font-size: 12px; }
.dropzone .dz-link { color: var(--accent); font-weight: 600; }
.dropzone .dz-hint { font-size: 11px; color: var(--accent); font-family: var(--font-mono); }
.dz-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px; margin-top: 10px;
}
.dz-thumb {
  position: relative; aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface-3);
}
.dz-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dz-remove {
  position: absolute; top: 3px; right: 3px;
  width: 18px; height: 18px; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 11px; line-height: 1;
}
.dz-remove:hover { background: var(--err); }

/* Transaction forms — sticky action bar at the bottom (Cancel / Save+ / Save) */
.txn-actions {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  padding: 11px 14px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}

/* The transaction form fills the scroll area so the action bar sits flush at the
   bottom of the viewport even when the form is short (and still sticks while a
   long form scrolls). */
.main:has(.txn-form-page) { padding-bottom: 0; }
.txn-form-page { display: flex; flex-direction: column; min-height: 100%; }
.txn-form-page .txn-actions { margin-top: auto; }

/* Bill summary — the discount / tax / expenses panel under the line grid.
   Sits to the right, under the amount column it carries forward. Captions use
   the project's .field label treatment; boxes match the .tbl inline-edit
   controls, right-aligned with tabular figures like the grid's amount column. */
.bill-card { margin-top: 16px; }
.bill-summary { margin-left: auto; width: min(100%, 430px); display: flex; flex-direction: column; gap: 10px; }
.bs-row { display: grid; grid-template-columns: 1fr 92px 150px; gap: 12px; align-items: center; }
.bs-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: right;
}
.bs-row input {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  text-align: right;
  font-feature-settings: "tnum", "zero";
  transition: border 0.12s, box-shadow 0.12s;
}
.bs-row input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent);
}
.bs-row input[readonly] {
  font-family: var(--font-mono);
  font-weight: 700;
  background: var(--surface-2);
  cursor: default;
}
.bs-bill .bs-label { color: var(--ink-2); }
.bs-bill { padding-top: 12px; border-top: 1px solid var(--line); }
.bs-bill input[readonly] { border-color: var(--accent); background: var(--accent-soft); }
.bs-err { font-size: 11px; color: var(--err); text-align: right; margin-top: -6px; }
@media (max-width: 520px) { .bs-row { grid-template-columns: 1fr 74px 110px; gap: 8px; } }

/* Quick Add buttons (transaction forms) — themed 3D (accent gradient, presses on click) */
.qa-add {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  border: none;
  border-radius: 9px;
  color: var(--accent-ink);
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  box-shadow: 0 2px 5px color-mix(in oklab, var(--accent) 42%, transparent), inset 0 1px 0 color-mix(in oklab, #fff 35%, transparent);
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}
.qa-add:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 6px 14px color-mix(in oklab, var(--accent) 50%, transparent), inset 0 1px 0 color-mix(in oklab, #fff 45%, transparent);
}
.qa-add:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px color-mix(in oklab, var(--accent) 45%, transparent), inset 0 1px 0 color-mix(in oklab, #fff 22%, transparent);
}
/* Line-grid column-header variant — no adjacent input to stretch against
   (unlike the header-field quick-adds), so give the pill a proper height. */
.entry-lines th .qa-add { min-height: 28px; }

/* Browse Items — image grid of item cards */
.browse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.browse-card {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--surface-1);
}
.browse-thumb {
  aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: var(--surface-3);
  display: flex; align-items: center; justify-content: center;
}
.browse-thumb.clickable { cursor: pointer; }
.browse-thumb.clickable:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.browse-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s ease; }
.browse-thumb.clickable:hover img { transform: scale(1.04); }
.browse-noimg { color: var(--muted); }
.browse-name { font-size: 13px; font-weight: 600; text-align: center; line-height: 1.3; text-decoration: none; color: var(--ink); transition: color 0.12s ease; }
a.browse-name:hover { color: var(--accent); text-decoration: underline; }

/* Segmented toggle — multi-state filter control */
/* Report filter bar (renamed from .seg — that class belongs to the Appearance
   panel's segmented control and was being overridden by this block). */
.segbar { display: flex; width: 100%; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.seg-btn {
  flex: 1;
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  height: 36px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}
.seg-btn:first-child { border-left: 0; }
.seg-btn:hover:not(.on) { background: var(--surface-3); color: var(--ink); }
.seg-btn.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }

/* Stock Statement — item-group grouping rows */
.tbl tr.grp-head td {
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: 9px;
  padding-bottom: 9px;
}
.tbl tr.grp-sub td {
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 600;
  border-top: 1px solid var(--line);
}

/* ── Print: A4 report output (Stock Statement / Stock Ledger) ───────────── */
.print-only { display: none; }

@media print {
  @page { size: A4; margin: 12mm; }
  html, body, .app, .main { background: #fff !important; }
  .sidebar, .topbar, .sidebar-backdrop, .tweaks-backdrop, .cmdk-backdrop, .no-print { display: none !important; }
  .app { display: block !important; }
  .main { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: none !important; }
  .print-only { display: block !important; }
  .card { border: none !important; box-shadow: none !important; background: #fff !important; margin: 0 !important; }
  .card-body { padding: 0 !important; }

  .print-head { margin: 0 0 10px; }
  .print-head .ph-co { font-size: 15px; font-weight: 700; color: #000; }
  .print-head .ph-ti { font-size: 12px; font-weight: 700; color: #000; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.4px; }
  .print-head .ph-me { font-size: 10px; color: #333; margin-top: 3px; }

  .tbl { width: 100% !important; font-size: 9px !important; border-collapse: collapse !important; }
  .tbl th, .tbl td { color: #000 !important; background: #fff !important; border: 0.5px solid #999 !important; padding: 3px 5px !important; }
  .tbl thead th { background: #ededed !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tbl tfoot td { font-weight: 700 !important; background: #f5f5f5 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tbl tr { page-break-inside: avoid; }
  .tbl tr.grp-head td { background: #e6e6e6 !important; color: #000 !important; font-weight: 700 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tbl tr.grp-sub td { background: #f3f3f3 !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .act-btn { display: none !important; }
  /* Collapse the image-preview column (keep colspans aligned — don't display:none). */
  .col-img { width: 0 !important; max-width: 0 !important; padding: 0 !important; border-left: 0 !important; border-right: 0 !important; overflow: hidden; }

  /* Wide report tables: NO scroll container may survive into print — the whole
     table must flow onto the (landscape) page with no scrollbar. Neutralise the
     on-screen scroll box and every ancestor that can scroll, and let the headers
     wrap so all columns fit the page width. */
  .main, .card, .card-body, .card-body.flush, .print-wide { overflow: visible !important; }
  .print-wide .tbl th { white-space: normal !important; }
  .report-landscape { page: wide; }
}

/* Wide report tables scroll horizontally on screen, print full-width (landscape). */
.print-wide { overflow-x: auto; }
@page wide { size: A4 landscape; margin: 10mm; }

/* Data-entry save toast — prominent, centred near the top. A single 3s CSS
   animation slides it in, holds, then fades out and hides it (fill-mode
   forwards). pointer-events:none so it never blocks clicks beneath it. */
.txn-toast {
  position: fixed;
  top: 22px;
  left: 50%;
  z-index: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--ok, #16a34a);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  pointer-events: none;
  animation: txnToast 3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.txn-toast-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
@keyframes txnToast {
  0%   { opacity: 1; transform: translate(-50%, -14px); }
  5%   { opacity: 1; transform: translate(-50%, 0); }
  88%  { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -10px); visibility: hidden; }
}
:root[data-motion="reduced"] .txn-toast {
  transform: translateX(-50%);
  animation: txnToastReduced 3s steps(1) forwards;
}
@keyframes txnToastReduced {
  0%, 92% { opacity: 1; }
  100%    { opacity: 0; visibility: hidden; }
}

/* Master sort drawer — records as compact drag-drop chips flowing inline */
.sort-chips { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.sort-chip {
  padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px;
  cursor: grab; user-select: none; white-space: nowrap;
}
.sort-chip:hover { border-color: var(--accent); }
.sort-chip:active { cursor: grabbing; }
.chip-dragging { opacity: 0.4; background: var(--accent); color: #fff; }

/* Purchase Book — purchase-return rows in light red */
.tbl tr.pb-return td { background-color: color-mix(in oklab, var(--err) 14%, transparent); }

/* Stock Statement — reorder-level row highlights (below min = red, above max = green) */
.tbl tr.stock-below td { background-color: color-mix(in oklab, var(--err) 14%, transparent); }
.tbl tr.stock-above td { background-color: color-mix(in oklab, var(--ok) 16%, transparent); }

/* Transaction line-items grid (Purchases / Issue to Production) */
.line-items { display: flex; flex-direction: column; gap: 8px; }
.li-head, .li-row, .li-foot {
  display: grid;
  grid-template-columns: 34px minmax(0, 2.6fr) minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 8px; align-items: center;
}
/* With a Lot No column (Issue to Production): delete, item, color, lot, qty, rate, amount */
.line-items.with-lot .li-head, .line-items.with-lot .li-row, .line-items.with-lot .li-foot {
  grid-template-columns: 34px minmax(0, 2.2fr) minmax(0, 1.5fr) minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.1fr);
}
.li-head {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); padding: 0 2px;
}
.li-head .li-num { text-align: right; }
.li-row input {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 13px;
  outline: none;
}
.li-row input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent);
}
.li-num input { text-align: right; }
/* Drop the native number spinners so qty/rate match the plain text inputs */
.li-num input[type="number"] { -moz-appearance: textfield; }
.li-num input[type="number"]::-webkit-outer-spin-button,
.li-num input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.li-amt { font-family: var(--font-mono); text-align: right; padding-right: 4px; color: var(--ink); }
.li-foot {
  border-top: 1px solid var(--line); margin-top: 2px; padding-top: 10px;
  font-weight: 700;
}
@media (max-width: 640px) {
  .li-head { display: none; }
  .li-row, .li-foot,
  .line-items.with-lot .li-row, .line-items.with-lot .li-foot {
    grid-template-columns: 1fr 1fr; gap: 6px;
    border: 1px solid var(--line-2); border-radius: 8px; padding: 10px;
  }
}

/* Clickable image-count badge (Items listing) */
.img-badge { border: 0; cursor: pointer; }
.img-badge:hover { background: var(--accent); color: var(--accent-ink); }

/* Image gallery lightbox (big image + thumbnail strip, ecommerce style) */
.gallery { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 24px; }
.gallery-backdrop { position: absolute; inset: 0; background: rgba(8, 10, 14, 0.72); backdrop-filter: blur(2px); }
.gallery-panel {
  position: relative; z-index: 1; width: min(880px, 96vw); max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-1); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.gallery-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.gallery-title { font-weight: 600; color: var(--ink); font-size: 14px; }
.gallery-count { font-size: 12px; color: var(--muted); font-family: var(--font-mono); }
.gallery-x {
  margin-left: auto; border: 0; background: var(--surface-3); color: var(--ink-2);
  width: 28px; height: 28px; border-radius: 7px; cursor: pointer; font-size: 13px;
}
.gallery-x:hover { background: var(--err-soft); color: var(--err); }
.gallery-stage {
  position: relative; flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); padding: 16px;
}
.gallery-main { max-width: 100%; max-height: 58vh; object-fit: contain; border-radius: 6px; }
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface-1); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.gallery-nav:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.gallery-nav.prev { left: 12px; }
.gallery-nav.next { right: 12px; }
.gallery-thumbs { display: flex; gap: 8px; padding: 12px 14px; overflow-x: auto; border-top: 1px solid var(--line-2); }
.gallery-thumb {
  flex: 0 0 auto; width: 60px; height: 60px; padding: 0; cursor: pointer; overflow: hidden;
  border: 2px solid transparent; border-radius: 8px; background: var(--surface-3);
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb.active { border-color: var(--accent); }

.auth-link {
  font-size: 11px; color: var(--accent); text-decoration: none; font-weight: 600;
}
.auth-link:hover { text-decoration: underline; }
.auth-hint { font-size: 11px; color: var(--muted); font-family: var(--font-mono); letter-spacing: 0.03em; }
.auth-hint.ok { color: var(--ok); }
.auth-hint.bad { color: var(--err); }

.auth-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink); cursor: pointer;
  margin: 8px 0 18px;
}
.auth-check input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }

.auth-submit {
  width: 100%; height: 44px;
  background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: 6px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: filter 0.12s, transform 0.04s;
}
.auth-submit:hover:not(:disabled) { filter: brightness(0.96); }
.auth-submit:active:not(:disabled) { transform: translateY(1px); }
.auth-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-submit .arrow { font-size: 18px; }

.auth-ghost {
  width: 100%; height: 38px; margin-top: 8px;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: 6px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.auth-ghost:hover { background: var(--surface-2); color: var(--ink); }

.auth-err {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px; margin-bottom: 14px;
  background: color-mix(in oklch, var(--err) 8%, var(--surface-2));
  border: 1px solid color-mix(in oklch, var(--err) 30%, var(--line));
  border-radius: 6px;
  color: var(--err); font-size: 13px; font-weight: 500;
}

.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0 14px;
  font-size: 11px; color: var(--muted); font-family: var(--font-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.auth-divider::before,
.auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.auth-divider span { flex: 0 0 auto; }

.auth-demos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px;
}
.auth-demo {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 6px; padding: 10px 12px;
  text-align: left; cursor: pointer;
  font-family: var(--font-sans);
  transition: border-color 0.12s, background 0.12s;
}
.auth-demo:hover { border-color: var(--accent); background: var(--surface); }
.auth-demo .lbl { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.auth-demo .sub { font-size: 11px; color: var(--muted); font-family: var(--font-mono); letter-spacing: 0.02em; }
.auth-demo-note {
  font-size: 11px; color: var(--muted); text-align: center;
  font-family: var(--font-mono); letter-spacing: 0.02em; line-height: 1.5;
}
.auth-demo-note code {
  background: var(--surface-3); padding: 1px 5px; border-radius: 3px; color: var(--ink);
}

.auth-copyright {
  position: absolute; bottom: 24px;
  font-size: 11px; color: var(--muted); font-family: var(--font-mono); letter-spacing: 0.04em;
}

/* Password strength */
.pw-strength { margin-top: 4px; }
.pw-strength .bar { display: flex; gap: 3px; }
.pw-strength .seg { flex: 1; height: 4px; border-radius: 2px; transition: background 0.2s; }
.pw-strength .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; font-weight: 600; }

/* OTP input */
.auth-otp {
  display: flex; gap: 8px; justify-content: center; margin: 4px 0 10px;
}
.auth-otp input {
  width: 46px; height: 54px;
  text-align: center;
  font-family: var(--font-mono); font-size: 22px; font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  outline: none;
}
.auth-otp input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent);
}

/* Auth modal (forgot password / change password) */
.auth-modal-backdrop {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(20,18,16,0.5);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
.auth-modal {
  width: 92%; max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  overflow: hidden;
}
.auth-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.auth-modal-head .x {
  background: none; border: 0; cursor: pointer;
  font-size: 18px; color: var(--muted);
  padding: 4px 8px; border-radius: 4px;
}
.auth-modal-head .x:hover { background: var(--surface-2); color: var(--ink); }
.auth-modal-body { padding: 20px; }

/* Mobile brand header: hidden on desktop, shown on mobile when left panel disappears */
.auth-mobile-header { display: none; }

/* Responsive: stack on narrow screens */
@media (max-width: 960px) {
  .auth-screen { grid-template-columns: 1fr; }
  .auth-left { padding: 40px; min-height: auto; }
  .auth-headline { font-size: 36px; }
  .auth-right { padding: 32px 20px; }
}

/* ----- Global search dropdown ----- */
.gs-wrap {
  position: relative;
}
.gs-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 400px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(20,18,16,0.12), 0 2px 6px rgba(20,18,16,0.06);
  z-index: 500;
  overflow: hidden;
  animation: fadein 0.1s ease-out;
}
.gs-group {
  border-top: 1px solid var(--line-2);
}
.gs-group:first-child { border-top: 0; }
.gs-group-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 8px 12px 3px;
}
.gs-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  text-align: left;
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.08s;
}
.gs-item:hover { background: var(--surface-2); }
.gs-item-title {
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
}
.gs-item-sub {
  font-size: 12px;
  color: var(--muted);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gs-empty {
  padding: 18px 12px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

/* ----- Command palette (⌘K / Ctrl-K) — centered popup ----- */
.cmdk-backdrop {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(10, 14, 22, 0.55);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  animation: fadein 0.12s ease-out;
}
.cmdk {
  width: min(600px, 92vw);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 64vh;
}
.cmdk-input {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-2);
}
.cmdk-input svg { color: var(--muted); flex: 0 0 auto; }
.cmdk-input input {
  flex: 1; border: 0; outline: none; background: transparent;
  font-size: 15px; color: var(--ink); padding: 0;
}
.cmdk-input input:focus { box-shadow: none; }
.cmdk-input kbd {
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; background: var(--surface-2);
}
.cmdk-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.cmdk-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px; cursor: pointer;
  font-size: 13.5px; color: var(--ink);
}
.cmdk-item.active { background: var(--accent); color: var(--accent-ink); }
.cmdk-item.active .cmdk-group { color: var(--accent-ink); opacity: 0.85; }
.cmdk-group {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted-2);
  min-width: 56px; flex: 0 0 auto;
}
.cmdk-empty { padding: 22px 12px; text-align: center; color: var(--muted); font-size: 13px; }

/* ----- Print styles ----- */
@media print {
  /* Reset app shell to plain block flow */
  .app       { display: block; height: auto; background: #fff; }
  .main      { padding: 0; overflow: visible; }

  /* Hide everything except the report content */
  .sidebar,
  .topbar,
  .page-head,
  .tabs,
  .filter-bar { display: none !important; }

  /* Cards flush to page edge */
  .card         { border: none; box-shadow: none; border-radius: 0; }
  .card-body    { padding: 0; }

  @page { margin: 16mm 14mm; }
}

/* ===== Responsive / Mobile ===== */

/* Hamburger hidden on desktop; backdrop inert */
.topbar .menu-btn { display: none; }
.sidebar-backdrop { display: none; }

/* ----- Tablet (769px – 1100px) ----- */
@media (min-width: 769px) and (max-width: 1100px) {
  .app { grid-template-columns: 200px 1fr; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
  .three-col { grid-template-columns: repeat(2, 1fr); }
  .drawer.wide { width: 560px; }
  .topbar .search { width: 200px; }
}

/* ----- Mobile (≤ 768px) ----- */
@media (max-width: 768px) {
  /* Switch to document-scroll so .main never has an empty shell below content */
  html, body { height: auto; min-height: 100%; }

  /* App shell: single column, rows auto-size to content */
  .app {
    grid-template-columns: 1fr;
    grid-template-areas: "topbar" "main";
    grid-template-rows: 56px auto;
    height: auto;
    min-height: 100dvh;
  }

  /* Topbar: sticky instead of grid-fixed */
  .topbar { position: sticky; top: 0; z-index: 200; }

  /* Main: flow with document instead of scrolling in a fixed box */
  .main { overflow: visible; }

  /* Sidebar: off-canvas overlay */
  .sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 300;
    transform: translateX(-100%);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    width: 260px;
  }
  .sidebar.open { transform: translateX(0); }

  /* Backdrop */
  .sidebar-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: rgba(20, 18, 16, 0.5);
    z-index: 299;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s;
  }
  .sidebar-backdrop.open { opacity: 1; pointer-events: auto; }

  /* Show hamburger, hide desktop collapse btn */
  .topbar .menu-btn { display: flex; }
  .topbar .collapse-btn { display: none; }

  /* On mobile the collapsed state is completely ignored —
     sidebar is always a full-width fixed off-canvas panel */
  :root[data-sidebar="collapsed"] .app { grid-template-columns: 1fr; }
  :root[data-sidebar="collapsed"] .sidebar {
    position: fixed;
    width: 260px;
    box-shadow: none;
    transform: translateX(-100%);
  }
  :root[data-sidebar="collapsed"] .sidebar.open { transform: translateX(0); }

  /* Match desktop specificity (0,4,0) by using :not(.hovering) so these rules
     override the icon-only collapsed rules via source order */
  :root[data-sidebar="collapsed"] .sidebar:not(.hovering) .navitem { justify-content: flex-start; gap: 9px; padding: 8px 10px; }
  :root[data-sidebar="collapsed"] .sidebar:not(.hovering) .nav-label,
  :root[data-sidebar="collapsed"] .sidebar:not(.hovering) .navitem .count,
  :root[data-sidebar="collapsed"] .sidebar:not(.hovering) .section-label { display: block; }
  :root[data-sidebar="collapsed"] .sidebar:not(.hovering) .nav-icon { color: #7a8fa8; }
  :root[data-sidebar="collapsed"] .sidebar:not(.hovering) .navitem:hover .nav-icon,
  :root[data-sidebar="collapsed"] .sidebar:not(.hovering) .navitem.active .nav-icon { color: inherit; }
  /* Restore brand */
  :root[data-sidebar="collapsed"] .sidebar:not(.hovering) .brand { justify-content: flex-start; padding: 0 18px; }
  :root[data-sidebar="collapsed"] .sidebar:not(.hovering) .brand .brand-text { display: block; }
  :root[data-sidebar="collapsed"] .sidebar:not(.hovering) .brand .sidebar-toggle { display: flex; }
  /* Safety net: hovering must never change sidebar position on mobile */
  :root[data-sidebar="collapsed"] .sidebar.hovering {
    position: fixed !important;
    width: 260px !important;
    box-shadow: none !important;
    transform: translateX(-100%);
  }
  :root[data-sidebar="collapsed"] .sidebar.hovering.open { transform: translateX(0); }

  /* Topbar: tighten, hide desktop-only items */
  .topbar { padding: 0 10px; gap: 6px; }
  .topbar .crumbs { display: none; }
  .topbar .tz { display: none; }
  .topbar .search { flex: 1; width: auto; max-width: none; }

  /* Global search dropdown: don't let its 400px min-width overflow the screen */
  .gs-dropdown {
    position: fixed;
    top: 54px;
    left: 10px;
    right: 10px;
    min-width: 0;
    width: auto;
  }

  /* Main */
  .main { padding: 14px 12px 80px; }

  /* Page head */
  .page-head { flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
  .page-head h1 { font-size: 18px; }
  .page-head .actions { flex-wrap: wrap; gap: 6px; }

  /* KPI row: 2-up */
  .kpi-row { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
  .kpi .val { font-size: 20px; }

  /* Multi-column layouts → single column */
  .two-col, .three-col { grid-template-columns: 1fr; }

  /* Tables: allow horizontal scroll inside cards */
  .card-body.flush { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl { min-width: 560px; }

  /* Tabs: scroll horizontally */
  .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .tab { white-space: nowrap; flex-shrink: 0; }

  /* Filter bar: scroll horizontally */
  .filters-inner { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .filters-inner .filters-lbl { display: none; }

  /* Drawers: full-width bottom-anchored sheet */
  .drawer, .drawer.wide {
    width: 100%;
    border-left: 0;
    top: auto;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 32px rgba(20, 18, 16, 0.14);
    max-height: 92dvh;
  }
  @keyframes slidein { from { transform: translateY(100%); } to { transform: translateY(0); } }

  /* Dispatch board: stacked */
  .board { grid-template-columns: 1fr; height: auto; }

  /* Form field rows: single column */
  .field-row, .field-row.three { grid-template-columns: 1fr; }

  /* Tweaks panel */
  .tweaks { right: 10px; bottom: 10px; width: calc(100vw - 20px); }

  /* Auth: hide left panel, show compact brand above form */
  .auth-screen {
    grid-template-columns: 1fr;
    /* The screen is position:fixed, so anything taller than the viewport had
       no way to be reached — and with the on-screen keyboard up there is
       barely 300px of it, leaving Sign in below the fold and unscrollable. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .auth-left { display: none; }
  .auth-right {
    padding: 24px 16px 32px;
    /* Start at the top rather than centring: centred content that overflows is
       clipped at BOTH ends, taking the heading with it. */
    justify-content: flex-start;
    align-items: center;
    min-height: 100%;
  }

  /* iOS zooms the page in when a focused field is under 16px, and will not
     zoom back out — the usual reason a login feels broken on a phone. */
  .auth-field input,
  .auth-form input,
  .auth-form select,
  .auth-form textarea { font-size: 16px; }
  .auth-mobile-header {
    display: flex;
    width: 100%;
    max-width: 400px;
    margin-bottom: 20px;
  }
  .auth-form { padding: 24px 20px; }
  .auth-copyright { position: static; margin-top: 20px; text-align: center; }

  /* Route strip: stack nodes */
  .route { grid-template-columns: 1fr; gap: 6px; }
  .route .bar { flex-direction: row; justify-content: flex-start; }
  .route .bar .line { width: 40px; }

  /* KV grid: tighten */
  .kv { grid-template-columns: 100px 1fr; }

  /* Assign grid in board */
  .assign-grid { grid-template-columns: 1fr; }
  .assign-grid .arrow { display: none; }
}

/* ===== Dark mode overrides for hardcoded values ===== */
:root[data-mode="dark"] .filter-field select,
:root[data-mode="dark"] .filter-field input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16' fill='none' stroke='%236b7f96' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
}
:root[data-mode="dark"] .drawer-backdrop {
  background: rgba(0, 0, 0, 0.55);
}
/* --accent-2 is a *darker* accent, which disappears against the dark tinted
   --accent-soft background; use the normal ink colour instead. */
:root[data-mode="dark"] .btn.accent { color: var(--ink); }

/* ===== CRM responsive grids (stat cards, reports) ===== */
.stat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 18px; }
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kanban-ghost { opacity: 0.4; }
@media (min-width: 769px) and (max-width: 1100px) {
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .report-grid { grid-template-columns: 1fr; }
}
.donut-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
@media (max-width: 768px) { .donut-grid { grid-template-columns: 1fr; } }

/* ===== Communication action buttons — solid color + pulse ===== */
.comm-btn { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; flex-shrink:0; padding:7px; border-radius:9px;
  border:none; cursor:pointer; color:#fff; text-decoration:none; line-height:0;
  transition:filter .15s ease, transform .15s ease; }
.comm-btn svg { display:block; transition:transform .5s ease; }
.comm-btn:hover { filter:brightness(1.1); transform:translateY(-1px); }
.comm-btn:hover svg { transform:rotate(360deg); }
.copy-btn svg { transition:transform .5s ease; }
.copy-btn:hover svg { transform:rotate(360deg); }
.comm-call  { background:#2f6df6; animation:commPulseBlue 1.8s infinite; }
.comm-wa    { background:#25d366; animation:commPulseGreen 1.8s infinite; }
.comm-email { background:#ea4335; animation:commPulseRed 1.8s infinite; }
@keyframes commPulseBlue   { 0%{box-shadow:0 0 0 0 rgba(47,109,246,.5)}  70%{box-shadow:0 0 0 8px rgba(47,109,246,0)}  100%{box-shadow:0 0 0 0 rgba(47,109,246,0)} }
@keyframes commPulseGreen  { 0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}  70%{box-shadow:0 0 0 8px rgba(37,211,102,0)}  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)} }
@keyframes commPulseRed { 0%{box-shadow:0 0 0 0 rgba(234,67,53,.5)} 70%{box-shadow:0 0 0 8px rgba(234,67,53,0)} 100%{box-shadow:0 0 0 0 rgba(234,67,53,0)} }

/* Solid, icon-only action buttons (edit / delete / print / new) — rotate on hover,
   styled like the contact comm buttons. */
.act-btn { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; padding:7px; border-radius:9px;
  border:none; cursor:pointer; color:#fff; text-decoration:none; line-height:0; vertical-align:middle; }
.act-btn + .act-btn { margin-left:4px; }
.act-btn svg { display:block; transition:transform .5s ease; }
.act-btn { transition:filter .15s ease, transform .15s ease, box-shadow .15s ease; }
.act-btn:hover { filter:brightness(1.1); transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.16); }
.act-btn:hover svg { transform:rotate(360deg); }
.act-btn:disabled { opacity:.45; cursor:default; transform:none; box-shadow:none; filter:none; }
.act-edit  { background:#2f6df6; }
.act-print { background:#0ea5e9; }
.act-del   { background:#ef4444; }
.act-new   { background:#16a34a; }

/* Quotation line-item inputs — match the standard .field input look */
.qline td { vertical-align:middle; }
.qline input, .qline select {
  width:100%; border:1px solid var(--line); background:var(--surface);
  border-radius:4px; padding:7px 9px; font-size:13px; outline:none;
}
.qline input:focus, .qline select:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent);
}
.qline input.num { text-align:right; }

/* ===== Bare form controls inside drawers use the standard field styling ===== */
.drawer input:not([type="checkbox"]):not([type="radio"]),
.drawer select,
.drawer textarea {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 13px;
  outline: none;
}
.drawer input:not([type="checkbox"]):not([type="radio"]):focus,
.drawer select:focus,
.drawer textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent);
}

/* ===== Text size (UI scale on the content area) ===== */
:root[data-text="sm"] .main { zoom: 0.93; }
:root[data-text="lg"] .main { zoom: 1.08; }

/* ===== Boxed content width (centered on wide screens) ===== */
:root[data-width="boxed"] .main {
  max-width: 1180px;
  width: 100%;
  margin-inline: auto;
}

/* ===== Reduce motion (manual override of all animation/transition) ===== */
:root[data-motion="reduced"] *,
:root[data-motion="reduced"] *::before,
:root[data-motion="reduced"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* ===== Horizontal navigation (top menu bar) — desktop/tablet only =====
   Adapted to the CRM's flat sidebar: the sidebar becomes a single
   scrollable top strip of nav items. On mobile (≤768px) the off-canvas
   vertical drawer always wins. */
@media (min-width: 769px) {
  :root[data-nav="horizontal"] .app {
    grid-template-columns: 1fr;
    grid-template-rows: 48px 56px 1fr;
    grid-template-areas: "sidebar" "topbar" "main";
  }
  :root[data-nav="horizontal"] .sidebar {
    width: 100%;
    flex-direction: row;
    align-items: center;
    height: 48px;
    border-right: 0;
    border-bottom: 1px solid #060d18;
    overflow-x: auto;
    overflow-y: hidden;
  }
  :root[data-nav="horizontal"] .sidebar .brand {
    height: 48px;
    border-bottom: 0;
    border-right: 1px solid #1a2535;
    padding: 0 16px 0 14px;
    flex-shrink: 0;
  }
  :root[data-nav="horizontal"] .sidebar .brand .sub { display: none; }
  :root[data-nav="horizontal"] .sidebar .sidebar-toggle { display: none; }
  :root[data-nav="horizontal"] .sidebar .foot { display: none; }

  :root[data-nav="horizontal"] .sidebar nav {
    flex-direction: row;
    align-items: center;
    padding: 0 8px;
    gap: 2px;
    overflow: visible;
    min-height: 0;
  }
  :root[data-nav="horizontal"] .sidebar .navitem {
    width: auto;
    padding: 8px 10px;
    border-radius: 6px;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  :root[data-nav="horizontal"] .sidebar .navitem .nav-label { display: inline; }
  :root[data-nav="horizontal"] .sidebar .navitem .count { display: none; }

  /* Menu-based horizontal nav: each section is a top-level button that opens a
     dropdown panel containing its items. */
  /* Allow dropdowns to escape the 48px-tall strip (only a few menu buttons,
     so horizontal scrolling is no longer needed). */
  :root[data-nav="horizontal"] .sidebar { overflow: visible; }
  :root[data-nav="horizontal"] .sidebar .nav-section { position: relative; flex: 0 0 auto; }
  :root[data-nav="horizontal"] .sidebar nav .section-toggle {
    display: inline-flex;
    width: auto;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 6px;
    color: #c8d4e3;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
  }
  :root[data-nav="horizontal"] .sidebar nav .section-toggle:hover { background: #1a2535; color: #e8eef8; }
  :root[data-nav="horizontal"] .sidebar .section-toggle .nav-caret { width: 9px; height: 9px; }
  :root[data-nav="horizontal"] .sidebar .nav-group {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 210px;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: #0d1726;
    border: 1px solid #1a2535;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    z-index: 200;
  }
  /* Transparent bridge over the 4px gap so moving the mouse from the section
     label into the dropdown doesn't leave the .nav-section and close it. */
  :root[data-nav="horizontal"] .sidebar .nav-group::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    height: 6px;
  }

  /* In horizontal mode the collapsed rail never applies */
  :root[data-nav="horizontal"][data-sidebar="collapsed"] .app { grid-template-columns: 1fr; }
  :root[data-nav="horizontal"][data-sidebar="collapsed"] .sidebar { width: 100%; }
}

/* ── Company picker (sign-in screens) ───────────────────────────────────────
   The list of companies a user may open. Styled off the auth card, using the
   same brand mark as the sidebar so a company reads the same in both places. */
.company-list { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.company-pick {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}
.company-pick:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 14px color-mix(in oklab, var(--accent) 18%, transparent);
  transform: translateY(-1px);
}
.company-pick:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent);
}
.company-pick[disabled] { opacity: 0.6; cursor: progress; }
.company-pick .mark {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
}
.company-pick .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.company-pick .name {
  font-size: 14px; font-weight: 600; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.company-pick .meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.company-pick .go { margin-left: auto; color: var(--muted); flex: 0 0 auto; }
.company-pick.current { border-color: var(--accent); background: var(--accent-soft); }

/* Sidebar switcher — sits beside the brand when a user has more than one company */
.brand-switch {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-1);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.brand-switch:hover { color: var(--accent); border-color: var(--accent); }

/* ── Day Book ────────────────────────────────────────────────────────────────
   Rows are read, not clicked, so they keep the default cursor; each day's
   total sits on the surface tint so the page reads as a run of days. */
.daybook-tbl tbody tr { cursor: default; }
.daybook-tbl tbody tr.day-total,
.daybook-tbl tbody tr.day-total:hover { background: var(--surface-2); }
.daybook-tbl tbody tr.day-total td { border-top: 1px solid var(--line); }
@media print { .daybook-tbl tbody tr.day-total { background: transparent; } }

/* ── Primary action beside the title on small screens ────────────────────────
   The page header justifies its actions to the far right, which is fine on a
   desktop but puts the Add button at the end of a wide page on a phone — a
   sideways scroll to reach the one control you came for. Below desktop width
   the actions sit straight after the title instead. If the two do not fit,
   .page-head already wraps and the button lands on its own line at the left. */
@media (max-width: 1100px) {
  .page-head { justify-content: flex-start; align-items: center; column-gap: 12px; }
  .page-head > :first-child { min-width: 0; }
  .page-head .actions { flex: 0 0 auto; }
}

/* ── Line-item grid column widths ────────────────────────────────────────────
   Auto table layout sizes columns by content, which starved the Item picker:
   the one column with no declared width collapsed to ~100px while the numeric
   ones stretched to 209px each. Fixed layout makes the declared widths hold,
   and Item — the only column left to size itself — takes all the room over. */
/* min-width keeps the boxes usable when the window is narrow; the card
   scrolls sideways rather than crushing five inputs into nothing. */
.entry-lines { table-layout: fixed; min-width: 720px; }
/* The inputs were sizing themselves — a number box defaults to about 189px —
   so under auto layout the columns grew to fit them, and under fixed layout
   they spilled past their cell. Filling the cell is what makes the declared
   widths actually govern the grid. */
.entry-lines td input { width: 100%; }
/* No overflow clipping on the cells: the item picker opens its list inside one,
   and hidden overflow cut it off at the cell edge. Fixed layout alone holds the
   widths, and every cell here contains a full-width input, so nothing spills. */