/* Transport Management — 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;
  /* Set by dragging the sidebar's border; 236px until it is. */
  grid-template-columns: var(--sbw, 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: var(--sbw, 236px);
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  position: relative;
}
/* 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: var(--sbw, 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; }

/* ── 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; }
  .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; }

/* 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); }

/* ── 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. */

/* Master forms: a duplicate name flagged while typing, before Save is pressed.
   Amber rather than red — nothing is wrong yet, but saving will be refused. */
.dup-warn {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; margin-top: 2px;
  color: oklch(0.55 0.14 70);
}

/* The row a report was left from, on coming back to it. Fades out on its own —
   long enough to find, short enough not to look like a selection. */
.row-returned > td {
  background: var(--accent-soft);
  transition: background 1.2s ease-out;
}

/* ----- Sidebar resize handle ----- */
/* The border itself is the grip: drag it to set the sidebar's width, double
   click to put it back. Only where there is a border to drag — the vertical
   nav, open, on a screen wide enough that the sidebar is not an overlay. */
.sidebar-resize {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 260;
  background: transparent;
  transition: background 0.15s;
}
.sidebar-resize:hover,
.sidebar-resize.dragging { background: var(--accent); }

:root[data-nav="horizontal"] .sidebar-resize,
:root[data-sidebar="collapsed"] .sidebar:not(.hovering) .sidebar-resize { display: none; }

/* Mid-drag the width follows the pointer, so the easing that makes the collapse
   look smooth would only make this feel like rubber. */
:root.sb-resizing .app,
:root.sb-resizing .sidebar { transition: none; }
:root.sb-resizing { cursor: col-resize; user-select: none; }

@media (max-width: 768px) {
  /* The sidebar slides in over the page here; there is no border to drag. */
  .sidebar-resize { display: none; }
}

/* ----- Shortcuts ----- */
/* Pinned modules on the dashboard: solid chips, a colour each so the row is
   read by shape and colour rather than by re-reading six names. The colours
   are their own — not the theme accent — so the row stays the same whatever
   theme is on, and they carry white type at any of them. */
.sc-tiles {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 16px;
}
.sc-tile {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  border: 0; border-radius: 9px;
  color: #fff; background: var(--sc-color, oklch(0.55 0.16 255));
  font-size: 13px; font-weight: 600; letter-spacing: 0.1px;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.18);
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.sc-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 24, 40, 0.22);
  filter: brightness(1.06);
}
.sc-tile:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.18); }

.sc-c1 { --sc-color: oklch(0.55 0.16 255); }  /* blue   */
.sc-c2 { --sc-color: oklch(0.53 0.14 152); }  /* green  */
.sc-c3 { --sc-color: oklch(0.60 0.15 62);  }  /* amber  */
.sc-c4 { --sc-color: oklch(0.55 0.18 25);  }  /* red    */
.sc-c5 { --sc-color: oklch(0.52 0.17 300); }  /* violet */
.sc-c6 { --sc-color: oklch(0.55 0.12 200); }  /* teal   */

/* The way back to the picker is not one of the shortcuts, so it does not
   dress as one. */
.sc-tile-edit {
  background: transparent; color: var(--muted);
  border: 1px dashed var(--line-2, var(--line));
  font-weight: 500; box-shadow: none;
}
.sc-tile-edit:hover {
  background: var(--surface-2); color: var(--ink);
  border-color: var(--accent); box-shadow: none; filter: none;
}

.sc-empty {
  margin-top: 16px; font-size: 12px; color: var(--muted);
}
/* The picker: every module the user may open, grouped as the sidebar groups them. */
.sc-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }
.sc-section-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.sc-list { display: flex; flex-direction: column; gap: 10px; }
.sc-pick { font-size: 13px; }

@media (max-width: 768px) {
  /* One per line on a phone, where a row of them would wrap to nothing legible. */
  .sc-tiles { flex-direction: column; }
  .sc-tile { justify-content: space-between; }
}

/* ----- Dashboard charts ----- */
/* Two charts side by side, each in a card of its own; one above the other on
   a narrow screen. The box gives the canvas a height, which Chart.js will not
   take from its own content. */
.chart-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 16px;
}
.chart-box { position: relative; height: 260px; }
.chart-wide { grid-column: 1 / -1; }

@media (max-width: 1100px) {
  .chart-row { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TRANSPORT MANAGEMENT
   The control tower, the trip screen, the tracking board and the pieces the
   transport modules add on top of the shared shell.
   ══════════════════════════════════════════════════════════════════════════ */

/* A card heading is a heading whichever level it is written at. */
.card .card-head h2 {
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; margin: 0;
}

/* A number that links somewhere: quiet until you look at it. */
.doc-link { color: var(--accent); text-decoration: none; font-weight: 600; }
.doc-link:hover { text-decoration: underline; }

/* Open: the third action button, beside edit and delete. */
.act-view { background: #0ea5e9; }

/* A field that wants half the header grid rather than a quarter. */
.po-grid .span-half { grid-column: span 2; }
@media (max-width: 520px) { .po-grid .span-half { grid-column: 1 / -1; } }

/* The awarded quote, marked so the eye lands on it in a table of near-misses. */
.tbl tr.row-awarded > td { background: var(--ok-soft); }

/* An exception count in the sidebar reads as a warning, not as a tally. */
.navitem .count.warn { color: var(--err); font-weight: 700; }

/* ----- KPI strip -------------------------------------------------------- */
/* Auto-fitting rather than a fixed four across: the control tower has eight
   figures on one row and four on the next, and neither should be told how
   many columns to use. */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.kpi-grid .kpi { padding: 13px 15px; }
.kpi-grid .kpi::before { display: none; }
.kpi .k {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.kpi .v {
  font-family: var(--font-mono); font-size: 24px; font-weight: 700;
  color: var(--ink); line-height: 1.25; margin-top: 4px;
  font-feature-settings: "tnum", "zero";
}
.kpi .s { font-size: 11px; color: var(--muted); margin-top: 2px; }
.kpi.link { text-decoration: none; display: block; transition: border-color .15s ease, transform .12s ease; }
.kpi.link:hover { border-color: var(--accent); transform: translateY(-1px); }

.tone-ok { color: var(--ok) !important; }
.tone-warn { color: var(--warn-2, #8a5a00) !important; }
.tone-err { color: var(--err) !important; }

/* ----- Control tower layout --------------------------------------------- */
.ct-section {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
  margin: 22px 0 10px;
}
.ct-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px;
}
@media (max-width: 1100px) { .ct-split { grid-template-columns: 1fr; } }

/* ----- Sparkline -------------------------------------------------------- */
/* Bars rather than a line: the question is "how many went out that day",
   which is a count, and a count reads as a column. */
.spark {
  display: flex; align-items: flex-end; gap: 2px;
  height: 130px; padding: 4px 0;
}
.spark .bar {
  flex: 1 1 0; min-width: 2px; border-radius: 2px 2px 0 0;
  background: var(--accent);
  opacity: 0.82;
  transition: opacity .12s ease;
}
.spark .bar:hover { opacity: 1; }
.spark-axis {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--muted); margin-top: 8px;
  font-family: var(--font-mono);
}

/* ----- Meter ------------------------------------------------------------ */
/* A percentage as a bar. Colour alone never carries it — the figure is always
   written beside it — but the bar is what makes a column of them comparable
   at a glance. */
.meter {
  height: 7px; border-radius: 4px; background: var(--surface-2, var(--line));
  overflow: hidden; min-width: 90px;
}
.meter span { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.meter span.ok { background: var(--ok); }
.meter span.warn { background: var(--warn); }
.meter span.bad { background: var(--err); }

/* ----- Tabs ------------------------------------------------------------- */
.tab.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.tab-count {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 8px; background: var(--accent); color: #fff;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
}

/* ----- Stage bar -------------------------------------------------------- */
/* The journey as a row of stamps. Stages already passed are filled; the rest
   are hollow, so how far along a trip is reads without counting. */
.stage-bar {
  display: flex; gap: 0; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 10px;
}
.stage {
  flex: 1 1 110px; position: relative; text-align: center;
  padding: 0 6px;
}
.stage::after {
  content: ""; position: absolute; top: 6px; left: 50%; right: -50%;
  height: 2px; background: var(--line);
}
.stage:last-child::after { display: none; }
.stage.done::after { background: var(--ok); }
.stage .dot {
  position: relative; z-index: 1;
  display: block; width: 13px; height: 13px; margin: 0 auto 8px;
  border-radius: 50%; border: 2px solid var(--line); background: var(--surface);
}
.stage.done .dot { border-color: var(--ok); background: var(--ok); }
.stage .lbl { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.stage.done .lbl { color: var(--ink); }
.stage .when {
  display: block; font-family: var(--font-mono); font-size: 10.5px;
  color: var(--muted); margin-top: 2px;
}

.stage-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* What is standing in the way. Deliberately plain and listed: a person has to
   be able to read off exactly what to go and fix. */
.blocker-list {
  margin-top: 14px; padding: 12px 14px;
  border: 1px solid color-mix(in oklab, var(--err) 30%, transparent);
  border-radius: 8px; background: var(--err-soft);
}
.blocker-head { font-size: 12px; font-weight: 700; color: var(--err); margin-bottom: 6px; }
.blocker-list ul { margin: 0; padding-left: 18px; }
.blocker-list li { font-size: 12.5px; color: var(--ink); line-height: 1.7; }

/* ----- Timeline --------------------------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0 0 0 4px; }
.timeline li {
  position: relative; display: grid; grid-template-columns: 128px 1fr;
  gap: 14px; padding: 0 0 16px 20px;
  border-left: 2px solid var(--line);
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -6px; top: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--slate); border: 2px solid var(--surface);
}
.timeline li.tone-ok::before { background: var(--ok); }
.timeline li.tone-warn::before { background: var(--warn); }
.timeline li.tone-err::before { background: var(--err); }
.timeline li.tone-info::before { background: var(--info); }
.tl-when {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--muted);
  white-space: nowrap; padding-top: 1px;
}
.tl-type { font-size: 13px; font-weight: 600; color: var(--ink); }
.tl-desc { font-size: 12.5px; color: var(--ink-2, var(--ink)); margin-top: 2px; line-height: 1.55; }
.tl-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }

@media (max-width: 620px) {
  .timeline li { grid-template-columns: 1fr; gap: 2px; }
}

/* ----- Live tracking ---------------------------------------------------- */
/* Filters and the list on the left, the plot in the middle, the selected
   trip on the right — the way a control room reads. */
.track-layout {
  display: grid; grid-template-columns: 290px minmax(0, 1fr) 320px; gap: 14px;
  align-items: start;
}
@media (max-width: 1400px) {
  .track-layout { grid-template-columns: 260px minmax(0, 1fr); }
  .track-detail { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .track-layout { grid-template-columns: 1fr; }
}

.track-list,
.track-map,
.track-detail {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.track-filters {
  padding: 12px; display: flex; flex-direction: column; gap: 9px;
  border-bottom: 1px solid var(--line);
}
.track-rows { max-height: 560px; overflow-y: auto; }
.track-row {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line-2, var(--line));
  background: none; color: var(--ink);
  transition: background .12s ease;
}
.track-row:hover { background: var(--surface-2, var(--accent-soft)); }
.track-row.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.tr-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tr-top b { font-size: 13px; }
.tr-mid { font-size: 12px; color: var(--ink-2, var(--ink)); margin-top: 3px; }
.tr-bot { font-size: 11px; color: var(--muted); margin-top: 2px; font-family: var(--font-mono); }

.track-map { padding: 12px; }
.track-detail { padding: 14px; }
.td-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 12px;
}
.td-sub {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.td-facts { display: grid; grid-template-columns: 108px 1fr; gap: 7px 12px; margin: 0; }
.td-facts dt { font-size: 11.5px; color: var(--muted); }
.td-facts dd { font-size: 12.5px; color: var(--ink); margin: 0; word-break: break-word; }
.td-exceptions { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.td-exc { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 10px; }
.td-exc b { font-size: 12.5px; }

/* ----- Track plot ------------------------------------------------------- */
/* Drawn from the coordinates themselves rather than over map tiles: the app
   talks to nothing outside this server, and what the control room needs off
   this panel — has it moved, is it going the right way, how far along is it —
   is in the shape of the track and its two endpoints. */
.track-plot { width: 100%; height: 300px; display: block; }
.track-plot.tall { height: 460px; }
.tp-bg { fill: var(--surface-2, color-mix(in oklab, var(--line) 25%, transparent)); }
.tp-corridor { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 5; opacity: 0.55; }
.tp-track { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.tp-dot { fill: var(--accent); opacity: 0.65; }
.tp-now { fill: var(--accent); stroke: var(--surface); stroke-width: 2.5; }
.tp-origin { fill: var(--ok); }
.tp-dest { fill: var(--err); }
.tp-label {
  fill: var(--ink); font-size: 11px; font-weight: 600;
  font-family: var(--font-sans); paint-order: stroke;
  stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round;
}
.tp-marker { cursor: pointer; }
.tp-marker circle { stroke: var(--surface); stroke-width: 2; }
.tp-marker.sel circle { stroke-width: 3; }
.tp-health-ok { fill: var(--ok); }
.tp-health-warn { fill: var(--warn); }
.tp-health-bad { fill: var(--err); }

.tp-legend {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px;
  font-size: 11px; color: var(--muted);
}
.tp-legend span { display: inline-flex; align-items: center; gap: 5px; }
.tp-legend .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.tp-sw-ok { background: var(--ok); }
.tp-sw-warn { background: var(--warn); }
.tp-sw-bad { background: var(--err); }
.tp-sw-origin { background: var(--ok); }
.tp-sw-dest { background: var(--err); }
.tp-sw-track { background: var(--accent); }
.tp-sw-corridor { background: var(--muted); opacity: 0.55; }

/* ----- Notification centre ---------------------------------------------- */
.notif-list { display: flex; flex-direction: column; }
.notif {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border-bottom: 1px solid var(--line-2, var(--line));
}
.notif:last-child { border-bottom: 0; }
.notif.unread { background: var(--accent-soft); }
.notif .n-body { flex: 1 1 auto; min-width: 0; }
.n-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.n-text { font-size: 12.5px; color: var(--ink-2, var(--ink)); margin-top: 2px; line-height: 1.55; }
.n-meta { font-size: 11px; color: var(--muted); margin-top: 4px; font-family: var(--font-mono); }

/* ----- Bill / settlement summary ---------------------------------------- */
/* The sum as a sum: one line per step, the running figure on the right, so
   the row somebody is arguing about is obvious. */
.bill-summary .row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; font-size: 13px; color: var(--ink);
}
.bill-summary .row b { font-feature-settings: "tnum", "zero"; }
.bill-summary .row.sub {
  padding-top: 10px; border-top: 1px solid var(--line); font-weight: 600;
}
.bill-summary .row.total {
  padding-top: 12px; margin-top: 4px;
  border-top: 2px solid var(--ink); font-size: 15px; font-weight: 700;
}

/* ----- Defaults --------------------------------------------------------- */
.setting-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.setting-row label { flex: 0 0 210px; font-size: 13px; color: var(--ink); }
.setting-row .suffix { font-size: 12px; color: var(--muted); flex: 1 1 auto; }
@media (max-width: 620px) {
  .setting-row label { flex-basis: 100%; }
}

/* ----- ePOD ------------------------------------------------------------- */
.epod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 860px) { .epod-grid { grid-template-columns: 1fr; } }

.sig-pad {
  width: 100%; height: 170px; display: block;
  border: 1px dashed var(--line); border-radius: 8px;
  background: #fff;                 /* a signature is drawn in ink on white */
  touch-action: none;               /* so a finger draws rather than scrolls */
  cursor: crosshair;
}
.sig-saved img {
  width: 100%; max-width: 340px; height: 170px; object-fit: contain;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  display: block; margin-bottom: 8px;
}
.dz-file {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--muted); background: var(--surface-2, var(--line));
  text-decoration: none;
}

/* A disabled button has to look disabled. It matters most on the trip screen,
   where eight of the nine stage buttons are unavailable at any moment and the
   one that is left is the whole point of the panel. */
.btn:disabled,
.btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.5);
  box-shadow: none;
  transform: none;
}
.btn:disabled:hover,
.btn[disabled]:hover { transform: none; filter: grayscale(0.5); box-shadow: none; }

/* ═══════════════════════════════════════════════════════════════════════
   THE USER MANUAL  (/help)
   The manual is a document, not a screen of records, so it wants document
   typography — headings, definition lists, tables of terms — rather than the
   grids and cards the rest of the app is built from. Everything below is
   scoped to `.help-page` so it stays inside the manual and never leaks onto a
   form. The palette, the type scale and dark mode come from the variables at
   the top of this file, unchanged.
   ═══════════════════════════════════════════════════════════════════════ */

/* The language switch, in the page head beside Print. */
.help-lang { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.help-lang button {
  border: 0; background: var(--surface); color: var(--muted);
  font: inherit; font-size: 12px; padding: 6px 12px; cursor: pointer;
}
.help-lang button + button { border-left: 1px solid var(--line); }
.help-lang button:hover { color: var(--accent); }
.help-lang button.on { background: var(--accent); color: var(--accent-ink); }

/* Contents down the left, the manual beside it. */
.help-wrap { display: flex; align-items: flex-start; gap: 30px; max-width: 1240px; }
.help-toc { position: sticky; top: 0; flex: 0 0 236px; max-height: calc(100vh - 130px); overflow-y: auto; padding-bottom: 12px; }
.help-toc input {
  width: 100%; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: var(--radius); padding: 7px 10px; font: inherit; font-size: 13px;
  outline: none; margin-bottom: 10px;
}
.help-toc input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent); }
.help-toc .grp { font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted-2, var(--muted)); margin: 14px 0 5px; }
.help-toc a { display: block; padding: 3px 9px; border-left: 2px solid transparent; color: var(--ink-2, var(--ink)); font-size: 13px; text-decoration: none; }
.help-toc a:hover { color: var(--accent); }
.help-toc a.on { border-left-color: var(--accent); color: var(--accent); background: var(--accent-soft); border-radius: 0 4px 4px 0; }
.help-toc .none { font-size: 12px; color: var(--muted); padding: 6px 9px; }

.help-main { flex: 1 1 auto; min-width: 0; max-width: 880px; font-size: 14px; line-height: 1.65; }
.help-main section { margin-bottom: 38px; scroll-margin-top: 20px; }
.help-main h2 { font-size: 20px; font-weight: 700; margin: 0 0 4px; padding-bottom: 8px; border-bottom: 2px solid var(--line); }
.help-main h3 { font-size: 15px; font-weight: 700; margin: 24px 0 3px; scroll-margin-top: 20px; }
.help-main h4 { font-size: 13px; font-weight: 700; margin: 16px 0 3px; color: var(--ink-2, var(--ink)); }
.help-main p { margin: 6px 0; }
.help-main .lead { color: var(--muted); margin: 0 0 14px; }
.help-main ul, .help-main ol { margin: 6px 0; padding-left: 20px; }
.help-main li { margin: 2px 0; }
.help-main code, .help-main .mono { font-family: var(--font-mono); font-size: 12px; }
.help-main kbd {
  font-family: var(--font-mono); font-size: 11px; background: var(--surface-3, var(--surface-2));
  border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px;
  padding: 1px 5px; color: var(--ink-2, var(--ink)); white-space: nowrap;
}
.help-main a { color: var(--accent); text-decoration: none; }
.help-main a:hover { text-decoration: underline; }

/* Cards and callouts. */
.help-main .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 12px 0; box-shadow: none; }
.help-main .note { border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--radius) var(--radius) 0; padding: 11px 14px; margin: 12px 0; }
.help-main .warn { border-left: 3px solid var(--warn); background: var(--warn-soft); border-radius: 0 var(--radius) var(--radius) 0; padding: 11px 14px; margin: 12px 0; }
.help-main .eg { border-left: 3px solid var(--ok); background: var(--ok-soft); border-radius: 0 var(--radius) var(--radius) 0; padding: 9px 13px; margin: 10px 0; font-size: 13px; }
.help-main .eg b { font-weight: 600; }

/* Tables of terms, statuses and refusals. */
.help-main table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
.help-main th, .help-main td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line-2, var(--line)); vertical-align: top; }
.help-main th { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.help-main td.k { width: 186px; font-weight: 600; }
.help-main tbody tr:last-child td { border-bottom: 0; }
.help-main .tw { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; margin: 12px 0; }
.help-main .tw table { margin: 0; }

/* The per-screen block: what it is for, and what each field wants. */
.help-main .doc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 17px; margin: 14px 0; }
.help-main .doc > h3 { margin-top: 0; }
.help-main .doc dl { display: grid; grid-template-columns: 124px 1fr; gap: 4px 14px; margin: 10px 0 0; font-size: 13px; }
.help-main .doc dt { font-weight: 600; color: var(--muted); }
.help-main .doc dd { margin: 0; }
.help-main .doc dd ul { margin: 0; padding-left: 17px; }
.help-main .req { color: var(--err); font-weight: 700; }
.help-main .pill { display: inline-block; font-size: 10px; padding: 1px 7px; border-radius: 20px; background: var(--surface-3, var(--surface-2)); color: var(--ink-2, var(--ink)); border: 0; letter-spacing: .03em; }
.help-main .pill.ok { background: var(--ok-soft); color: var(--ok); }
.help-main .pill.err { background: var(--err-soft); color: var(--err); }
.help-main .pill.warn { background: var(--warn-soft); color: var(--warn); }
.help-main mark { background: color-mix(in oklab, var(--warn) 45%, transparent); color: inherit; border-radius: 2px; }

/* The journey, as a strip of stages. */
.help-main .flow { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.help-main .flow span {
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  padding: 4px 12px; font-size: 12px; white-space: nowrap;
}
.help-main .flow span.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }

/* What the search hides. */
.help-page .hide { display: none !important; }

/* Devanagari sits better with a little more line height, and wants a font
   stack of its own. Nothing is fetched — these are faces already on the
   machine. */
:root[lang="hi"] .help-page {
  font-family: "Noto Sans Devanagari", "Nirmala UI", "Mangal", "Kohinoor Devanagari", var(--font-sans);
  line-height: 1.8;
}
:root[lang="hi"] .help-main .doc dl { grid-template-columns: 150px 1fr; }
:root[lang="hi"] .help-main td.k { width: 210px; }

/* Print: the manual on A4, without the contents list or the shell. */
@media print {
  .help-page .help-toc, .help-page .page-head { display: none !important; }
  .help-wrap { display: block; max-width: none; }
  .help-main { max-width: none; font-size: 10.5pt; }
  .help-main section { page-break-inside: auto; }
  .help-main h2 { page-break-after: avoid; page-break-before: always; }
  .help-main section:first-of-type h2 { page-break-before: avoid; }
  .help-main h3, .help-main h4 { page-break-after: avoid; }
  .help-main .doc, .help-main .card, .help-main .note, .help-main .warn,
  .help-main .eg, .help-main .tw, .help-main table { page-break-inside: avoid; border-radius: 0; }
  .help-main a { color: #000; text-decoration: none; }
}

@media (max-width: 900px) {
  .help-wrap { flex-direction: column; gap: 14px; }
  .help-toc { position: static; flex: 1 1 auto; width: 100%; max-height: none; }
  .help-main .doc dl { grid-template-columns: 1fr; }
  .help-main .doc dt { margin-top: 8px; }
}