/* TwinMark Logistics Software design system — asphalt ground · road-line amber */
:root {
  --bg:       #0C0E11;
  --bg-2:     #101318;
  --surface:  #161A21;
  --surface-2:#1D232C;
  --line:     #262D38;
  --line-2:   #364050;
  --text:     #EDEFF2;
  --muted:    #8B95A5;
  --faint:    #5A6474;
  --accent:   #EFB94C;
  --accent-hi:#F7CB6E;
  --accent-dim: rgba(239,185,76,0.12);
  --ok:       #3DD68C;
  --ok-rgb:   61,214,140;
  --danger:   #F0564A;
  --info:     #5B8DEF;
  --violet:   #A98AE8;
  --radius:   10px;
  --radius-s: 7px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 2px 10px rgba(0,0,0,.22);
  --shadow-3: 0 12px 48px rgba(0,0,0,.55);
  --t-fast: 120ms cubic-bezier(.2,.7,.3,1);
  --t:      160ms cubic-bezier(.2,.7,.3,1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { color-scheme: dark; }
html, body { height: 100%; }
body {
  font-family: var(--font); background: var(--bg); color: var(--text);
  font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: rgba(239,185,76,0.3); }
button { font-family: inherit; cursor: pointer; color: inherit; }
a { color: inherit; }
:is(a,button,input,select,textarea,[tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ── WORDMARK ── */
.wordmark { display: flex; align-items: center; gap: 8px; padding: 0 10px 4px; user-select: none; }
.wordmark-8 {
  min-width: 26px; height: 26px; padding: 0 6px; border-radius: 7px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), #C98F2B);
  color: #14100A; font-weight: 800; font-size: 13px; letter-spacing: -0.01em;
  display: flex; align-items: center; justify-content: center;
}
.wordmark-name { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.wordmark-name span { color: var(--faint); font-weight: 500; }
.wordmark-tag { padding: 2px 10px 0 44px; font-size: 10px; color: var(--faint); letter-spacing: 0.04em; }

/* ── SHELL ── */
.shell { display: none; height: 100vh; height: 100dvh; }
body.ready .shell { display: flex; }

/* ── EDIT OVERLAY (app.html?docedit=…) ──
   The app running in an iframe over an already-generated заявка, showing only
   the edit form. The whole shell goes — nav, topbar, tabbar, everything — and
   the page itself turns transparent, so the modal's own scrim dims the
   document underneath rather than a second opaque copy of the app. */
body.docedit { background: transparent; overflow: hidden; }
body.docedit .shell,
body.docedit .toast,
body.docedit .panel,
body.docedit .panel-scrim { display: none; }
.sidebar {
  width: 232px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--line); background: var(--bg);
  padding: 20px 12px 14px;
}
.nav { display: flex; flex-direction: column; gap: 1px; margin-top: 22px; }
.nav-label { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 12px 10px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: var(--radius-s);
  font-size: 13px; color: var(--muted); text-decoration: none;
  border: none; background: none; width: 100%; text-align: left; position: relative;
  transition: background var(--t-fast), color var(--t-fast);
}
.nav-item svg { flex-shrink: 0; opacity: .85; }
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--surface-2); color: var(--text); font-weight: 500; }
.nav-item.active::before { content: ''; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: var(--accent); }
.nav-item.active svg { color: var(--accent); opacity: 1; }
.nav-count { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--faint); }
.sidebar-spacer { flex: 1; }
.made-by { padding: 10px; font-size: 10px; color: var(--faint); }
.made-by b { color: var(--muted); font-weight: 600; }
.signout-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-s);
  font-size: 12.5px; color: var(--muted);
  background: none; border: none; width: 100%; text-align: left;
  transition: background var(--t-fast), color var(--t-fast);
}
.signout-row:hover { background: var(--surface-2); color: var(--text); }

.main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--bg-2); }
.topbar {
  position: sticky; top: 0; z-index: 30; height: 54px; flex-shrink: 0;
  display: flex; align-items: center; gap: 10px; padding: 0 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(12,14,17,0.85); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.view-title { font-size: 13px; font-weight: 500; }
.topbar-spacer { flex: 1; }
/* #view === .content: the one and only scrolling region below the topbar.
   flex:1/min-height:0 lets it fill the remaining height exactly (the .shell→.main
   chain is now a fixed 100vh), so the page itself never scrolls — only this
   element does. table-wrap (below) fills it via flex:1 for its own internal
   scroll + sticky header; views without a table-wrap (dashboard, etc.) just
   scroll this element directly if their content overflows. */
.content {
  width: 100%; max-width: 1200px; margin: 0 auto; padding: 28px 28px 56px;
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column;
}
/* …except where the content is a table, which the 1200px cap was never meant
   to govern. It is a reading measure — it keeps the dashboard, the forms and
   the profile from stretching into unreadable lines on a wide monitor, and for
   those it stays. A list does the opposite: Поръчки carries ten columns, needs
   1174px of them, and had 1142px to work with, so it scrolled sideways and cut
   off ИЗПЪЛНИТЕЛ — the carrier's name, on a screen with 400px of empty margin
   either side of the table. Milena asked for that space back («има място да се
   дръпне настрани и да се виждат и имената на изпълнителите»).
   Browsers without :has() simply keep the old capped layout. */
.content:has(.table-wrap) { max-width: none; }

.proposal-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 28px; border-bottom: 1px solid var(--line);
  background: var(--accent-dim); color: var(--text); font-size: 12.5px;
}
.proposal-banner .btn { margin-left: auto; }

/* ── PRIMITIVES ── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: var(--radius-s);
  font-size: 12.5px; font-weight: 500; text-decoration: none;
  border: 1px solid transparent; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.btn:active { transform: translateY(1px); }
.btn-ghost { color: var(--muted); border-color: var(--line); background: transparent; }
.btn-ghost:hover { color: var(--text); border-color: var(--line-2); }
.btn-primary { color: #14100A; background: var(--accent); font-weight: 600; }
.btn-primary:hover { background: var(--accent-hi); }
.btn-danger { color: var(--danger); border-color: rgba(240,86,74,0.3); background: rgba(240,86,74,0.06); }
.btn-danger:hover { background: rgba(240,86,74,0.12); }
.btn-danger-solid { color: #fff; border-color: var(--danger); background: var(--danger); }
.btn-danger-solid:hover { background: #d94538; }
.btn-sm { padding: 4px 10px; font-size: 11.5px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 20px; box-shadow: var(--shadow-1); }
.card-title { font-size: 13.5px; font-weight: 600; }
.card-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.card-hd .spacer { flex: 1; }

.kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 14px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px 15px; box-shadow: var(--shadow-1); }
.kpi-label { font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.kpi-val { font-family: var(--mono); font-size: 25px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1; }
.kpi-val.bad { color: var(--danger); }
.kpi-val.good { color: var(--ok); }
.kpi-sub { font-size: 11px; color: var(--faint); margin-top: 7px; }
.kpi.clickable { cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.kpi.clickable:hover { border-color: var(--line-2); }

/* inline cross-link: any entity name that opens its own panel */
.jump { cursor: pointer; border-bottom: 1px dotted transparent; transition: color var(--t-fast), border-bottom-color var(--t-fast); }
.jump:hover { color: var(--accent-hi); border-bottom-color: var(--accent); }

/* active-filter chip shown in a view's toolbar (set by KPI clicks) */
.flt-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 12px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent-dim); color: var(--text); font-size: 12px; }
.flt-chip button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 12px; padding: 0 2px; line-height: 1; }
.flt-chip button:hover { color: var(--text); }

/* ── command palette (⌘K global search) ── */
.palette-scrim {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(0,0,0,0.5);
  display: none; align-items: flex-start; justify-content: center;
  padding: 14vh 16px 16px;
}
.palette-scrim.open { display: flex; }
.palette {
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px;
  width: 100%; max-width: 560px; overflow: hidden;
  box-shadow: var(--shadow-3);
  animation: modalIn var(--t) forwards;
}
.palette-input {
  width: 100%; background: none; border: none; color: var(--text);
  font-family: var(--font); font-size: 15px; padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.palette-input:focus { outline: none; }
.palette-results { max-height: 320px; overflow-y: auto; padding: 6px; }
.palette-group {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint); padding: 8px 12px 4px;
}
.palette-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--radius-s);
  font-size: 13px; cursor: pointer; width: 100%;
  background: none; border: none; text-align: left; color: var(--text);
}
.palette-item .sub { color: var(--faint); font-size: 11.5px; margin-left: auto; flex-shrink: 0; }
.palette-item.sel, .palette-item:hover { background: var(--surface-2); }
.palette-item.sel { box-shadow: inset 2px 0 0 var(--accent); }
.palette-empty { padding: 22px; text-align: center; color: var(--faint); font-size: 12.5px; }
.kbd { font-family: var(--mono); font-size: 9.5px; color: var(--faint); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }

/* fills whatever space .content has left below any toolbar — replaces a
   fixed calc(100vh - Npx) that broke the moment a view added/removed a
   toolbar row (that mismatch was the source of the double-scrollbar bug:
   the page scrolled AND this card scrolled internally at the same time) */
.table-wrap { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); }
table.data { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.data th {
  text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
  position: sticky; top: 0; z-index: 2; background: var(--surface);
  box-shadow: 0 1px 0 var(--line); /* collapse borders vanish while stuck */
}
table.data td { padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
/* Lifting the 1200px cap gave the lists the whole window, and on a 1600px
   screen that was enough. It is not enough on a laptop: Поръчки needs 1208px
   for its ten columns, and a 1440px window leaves it 1190px — so it still
   scrolled sideways and still cut off ИЗПЪЛНИТЕЛ. By eighteen pixels, which
   looks no different from being cut off by three hundred.

   So the table takes a density step of its own below 1600px, the same trade
   the заявка makes when it runs long: tighter gutters, and the two text
   columns (клиент, релация) held shorter so the fixed-width ones are not
   squeezed off the end. That fits from 1152px up.

   Nothing changes on a wide screen. A cell's max-width only binds when the
   table is short of room — with width:100% the columns stretch past it
   whenever there is space, to 200px and beyond, cap or no cap.

   This has to sit AFTER the rule it narrows: a media query adds no
   specificity, so the same selector later in the file would win regardless of
   viewport. Putting it up beside .content:has(.table-wrap) is exactly the
   mistake that made the first attempt at this a no-op. */
@media (max-width: 1600px) {
  table.data th, table.data td { padding-left: 10px; padding-right: 10px; }
  table.data td { max-width: 130px; }
}

table.data tbody tr { cursor: pointer; transition: background var(--t-fast); }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tbody tr:last-child td { border-bottom: none; }
.td-muted { color: var(--muted); }
.td-mono { font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.td-money { font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; text-align: right; }
th.num, td.num { text-align: right; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; border-radius: 999px; padding: 2px 9px;
  background: var(--chip-bg, var(--surface-2)); color: var(--chip-fg, var(--muted));
  border: 1px solid var(--chip-bd, var(--line)); white-space: nowrap;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.doc-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 10px; border-radius: 5px; padding: 1px 7px;
  border: 1px solid var(--line); color: var(--faint); margin-right: 4px;
}
.doc-chip.have { color: var(--ok); border-color: rgba(var(--ok-rgb), .35); }

.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; flex-shrink: 0; }
.toolbar-spacer { flex: 1; }
.input {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s);
  color: var(--text); font-family: var(--font); font-size: 13px; padding: 8px 11px; width: 100%;
  transition: border-color var(--t-fast);
}
.input:hover { border-color: var(--line-2); }
.input:focus { outline: none; border-color: var(--accent); }
.input::placeholder { color: var(--faint); }
textarea.input { resize: vertical; min-height: 60px; }
select.input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg,transparent 50%,var(--muted) 50%), linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.pw-field { position: relative; }
.pw-field .input { padding-right: 52px; }
.toggle-pw {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--muted);
  font-family: var(--font); font-size: 10px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; padding: 6px; transition: color var(--t-fast);
}
.toggle-pw:hover { color: var(--text); }
.search { width: 240px; }
.result-count { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }

/* ── Sortable column headers ──
   The whole cell is the target — a button stretched to fill it, so the click
   area matches what the eye reads as "the column heading" rather than the few
   pixels of the label. The arrow holds its width in all three states so a
   header never shifts sideways as you cycle it. */
table.data th.sortable { padding: 0; }
table.data th.sortable > button {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 10px 14px; background: none; border: none;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: inherit; text-align: inherit;
  transition: color var(--t-fast), background var(--t-fast);
}
table.data th.sortable.num > button { justify-content: flex-end; }
table.data th.sortable > button:hover { color: var(--text); background: var(--surface-2); }
table.data th.sortable > button:focus-visible { outline-offset: -2px; }
.sort-ar {
  font-size: 11px; line-height: 1; width: 9px; flex-shrink: 0;
  text-align: center; color: var(--faint); opacity: 0;
  transition: opacity var(--t-fast), color var(--t-fast);
}
/* the neutral ↕ is a hint, not a state: it appears on hover or keyboard focus
   so the header row stays quiet until you go looking for the affordance */
th.sortable:hover .sort-ar, th.sortable:focus-within .sort-ar { opacity: 1; }
th.sortable.sorted { color: var(--accent); }
th.sortable.sorted .sort-ar { opacity: 1; color: var(--accent); }

/* ── Filter button + popover ── */
.flt-wrap { position: relative; display: inline-flex; }
.flt-btn { display: inline-flex; align-items: center; gap: 6px; }
.flt-btn.on { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.flt-n {
  font-family: var(--mono); font-size: 10px; font-weight: 600; line-height: 1;
  min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #14100A;
}
.flt-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  width: 300px; max-width: calc(100vw - 24px);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-3);
  animation: fltPop var(--t-fast) both;
}
@keyframes fltPop { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .flt-pop { animation: none; } }
.flt-pop-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
/* a filter set can outgrow the popover — scroll the fields, keep the header
   and its Изчисти всички reachable */
.flt-pop-body { padding: 12px 14px; max-height: min(58vh, 420px); overflow-y: auto; }
.flt-field + .flt-field { margin-top: 14px; }
.flt-lbl { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.flt-checks { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.flt-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.flt-chk input { accent-color: var(--accent); width: 14px; height: 14px; cursor: pointer; flex-shrink: 0; }
.flt-chk-solo { padding-top: 2px; }
.flt-pair { display: flex; align-items: center; gap: 8px; }
.flt-pair .input { min-width: 0; }
.flt-dash { color: var(--faint); flex-shrink: 0; }
.flt-clear-all {
  background: none; border: none; padding: 0; flex-shrink: 0;
  font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--muted); transition: color var(--t-fast);
}
.flt-clear-all:hover { color: var(--accent); }

/* ── Active-filter chips ──
   Anything narrowing the table has to say so here, or an empty list reads as
   a broken one. The sort chip is the quiet exception: it hides nothing, and
   only earns a place because on a table wide enough to scroll sideways its
   own header arrow can be off-screen. */
.flt-chips { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.flt-chip.sort-chip { border-color: var(--line-2); background: var(--surface-2); color: var(--muted); }

.grid2 { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 12px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* rows inside cards */
.mini-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 12.5px; cursor: pointer; }
.mini-row:last-child { border-bottom: none; }
.mini-row:hover .mr-title { color: var(--accent-hi); }
.mr-title { font-weight: 500; }
.mr-sub { font-size: 11px; color: var(--muted); }
.mr-right { margin-left: auto; text-align: right; flex-shrink: 0; }
.mr-money { font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* aging bars */
.age-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.age-label { width: 84px; font-size: 11px; color: var(--muted); flex-shrink: 0; }
.age-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.age-fill { height: 100%; border-radius: 4px; }
.age-val { width: 84px; text-align: right; font-family: var(--mono); font-size: 11px; flex-shrink: 0; }

/* ── DETAIL DIALOG (the "dispatch docket") ──
   Every entity detail (order / trip / customer / truck / carrier) opens in
   this centered dialog. The body lays its .panel-sec sections out in two
   newspaper columns on wide screens — one generous readable card instead of
   the old cramped 480px side drawer. */
.panel-scrim {
  position: fixed; inset: 0; z-index: 90; background: rgba(5,7,10,.62);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity var(--t); pointer-events: none;
}
.panel-scrim.open { opacity: 1; pointer-events: auto; }
.panel {
  position: fixed; top: 50%; left: 50%; z-index: 95;
  width: min(960px, calc(100vw - 40px));
  max-height: min(86vh, 880px); max-height: min(86dvh, 880px);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,.65), 0 4px 18px rgba(0,0,0,.4);
  transform: translate(-50%, -50%) scale(.975); opacity: 0; pointer-events: none;
  transition: transform var(--t), opacity var(--t);
  display: flex; flex-direction: column; overflow: hidden;
}
.panel.open { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; }
.panel:focus, .panel:focus-visible { outline: none; }
.panel-hd {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  padding: 20px 24px 16px; flex-shrink: 0;
}
/* road center-line under the header — dashed amber, the system's signature */
.panel-hd::after {
  content: ''; position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 16px, transparent 16px 30px);
  opacity: .4; border-radius: 1px;
}
.panel-hd-text { flex: 1; min-width: 0; }
.panel-eyebrow {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 3px;
}
.panel-title { font-size: 17px; font-weight: 650; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-x { background: none; border: none; color: var(--faint); font-size: 16px; width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.panel-x:hover { background: var(--surface-2); color: var(--text); }
.panel-body {
  flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 22px 24px 30px;
  columns: 2; column-gap: 36px; column-rule: 1px solid var(--line);
}
.panel-sec { margin-bottom: 24px; }
/* rows never split across a column break; section titles keep their content */
.prop-row, .mini-row, .doc-row, .tl-item, .tl-composer, .margin-box, .st-actions { break-inside: avoid; }
/* the delete section spans both columns as a quiet footer row */
.panel-sec:has(#panelDelete) {
  column-span: all; margin: 4px 0 0; padding-top: 16px;
  border-top: 1px solid var(--line);
}
.panel-sec-title {
  break-inside: avoid; break-after: avoid-column;
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
  /* the documents header carries four upload buttons — in a narrow panel column
     they wrap onto a second line rather than running off the edge */
  flex-wrap: wrap;
}
/* once wrapped, the spacer must not claim a whole row of its own */
.panel-sec-title .spacer { min-width: 0; }
.panel-sec-title::before { content: ''; width: 12px; height: 2px; border-radius: 1px; background: var(--accent); opacity: .65; flex-shrink: 0; }
.panel-sec-title .spacer { flex: 1; }
.prop-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 13px; }
.prop-label { width: 124px; flex-shrink: 0; color: var(--muted); font-size: 12px; }
.prop-val { flex: 1; min-width: 0; }
@media (max-width: 900px) {
  .panel-body { columns: 1; }
}
@media (max-width: 760px) {
  /* bottom sheet on phones */
  .panel {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%;
    max-height: 92vh; max-height: 92dvh; border-radius: 16px 16px 0 0; border-left: none; border-right: none; border-bottom: none;
    transform: translateY(10%);
  }
  .panel.open { transform: none; }
  .panel-hd { padding: 16px 18px 14px; }
  .panel-hd::after { left: 18px; right: 18px; }
  .panel-body { padding: 18px 18px calc(30px + env(safe-area-inset-bottom, 0px)); }
}
/* inline-editable inputs inside panels: invisible until hover/focus */
.prop-val .input { padding: 5px 9px; font-size: 13px; background: transparent; border-color: transparent; }
.prop-val .input:hover { background: var(--surface-2); border-color: var(--line); }
.prop-val .input:focus { background: var(--surface-2); border-color: var(--accent); }
.margin-box { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.margin-cell { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 9px 11px; }
.margin-cell .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin-bottom: 4px; }
.margin-cell .val { font-family: var(--mono); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* status action row (advance trip / order status) */
.st-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* documents */
.doc-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12px; }
.doc-row:last-child { border-bottom: none; }
.doc-kind { font-family: var(--mono); font-size: 10px; color: var(--accent); width: 38px; flex-shrink: 0; }
.doc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.doc-actions { display: flex; gap: 6px; flex-shrink: 0; }
/* documents belonging to one order of a групаж trip, kept under its own heading
   so a CMR is never orphaned from the shipment it covers */
.doc-group { margin-top: 10px; padding-left: 10px; border-left: 2px solid var(--line); }
.doc-group-hd { font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 2px; font-family: var(--mono); }
/* trailing action cell in a data table: "mark paid" + delete, pinned right */
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex-shrink: 0; padding: 0;
  border: none; background: none; border-radius: var(--radius-s);
  color: var(--faint); transition: color var(--t-fast), background var(--t-fast);
}
.icon-btn:hover { color: var(--text); background: var(--surface-2); }
.icon-btn.danger:hover { color: var(--danger); background: rgba(240,86,74,0.1); }

/* timeline */
.tl-item { display: flex; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.tl-item:last-child { border-bottom: none; }
.tl-dot { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; background: var(--surface-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 11px; }
.tl-text { font-size: 12.5px; word-break: break-word; }
.tl-time { font-family: var(--mono); font-size: 10px; color: var(--faint); margin-top: 1px; }
.tl-composer { display: flex; gap: 8px; margin-bottom: 10px; }

/* ── MODAL / CONFIRM ── */
.modal-scrim { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.55); display: none; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.modal-scrim.open { display: flex; }
.modal {
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px;
  width: 100%; max-width: 480px; max-height: 78vh; max-height: 78dvh; overflow-y: auto; overscroll-behavior: contain; padding: 20px 22px 22px;
  box-shadow: var(--shadow-3); animation: modalIn var(--t) forwards;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.modal-title { font-size: 15px; font-weight: 600; margin-bottom: 16px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid .span2 { grid-column: span 2; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 11px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.confirm-text { font-size: 13px; color: var(--text); margin-bottom: 4px; white-space: pre-wrap; }

/* toast */
.toast {
  position: fixed; z-index: 200; padding: 12px 18px; max-width: 340px;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  right: calc(28px + env(safe-area-inset-right, 0px));
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--radius-s);
  font-size: 13px; box-shadow: var(--shadow-1);
  opacity: 0; transform: translateY(6px); transition: opacity var(--t), transform var(--t); pointer-events: none;
}
.toast.show { opacity: 1; transform: none; }
.toast.err { border-color: rgba(240,86,74,0.4); }

/* tabs (payments in/out, and the Активни/Приключени switch on every
   lifecycle list) */
.tabs { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; }
.tabs button { padding: 6px 16px; font-size: 12px; background: none; border: none; color: var(--muted); border-right: 1px solid var(--line); transition: background var(--t-fast), color var(--t-fast); }
.tabs button:last-child { border-right: none; }
.tabs button.active { background: var(--surface-2); color: var(--text); font-weight: 500; }
/* how many records sit behind each tab — the number is the reason to click,
   so it rides along instead of making you switch to find out */
.tabs .tab-n { margin-left: 7px; font-family: var(--mono); font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.tabs button.active .tab-n { color: var(--muted); }
.arch-year { width: auto; min-width: 120px; }

/* totals above a completed table: what the filtered slice of history adds
   up to. Scrolls sideways rather than squeezing the numbers on a phone. */
.arch-sum {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(120px, 1fr);
  gap: 8px; margin-bottom: 12px; flex-shrink: 0; overflow-x: auto;
}
.arch-sum-cell { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 9px 12px; }
.arch-sum-cell .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin-bottom: 4px; }
.arch-sum-cell .val { font-family: var(--mono); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

.empty { text-align: center; color: var(--faint); padding: 32px 20px; font-size: 12.5px; }
.empty-big { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12vh 20px 48px; text-align: center; }
.empty-big .ic { font-size: 26px; opacity: .5; }
.empty-big .ttl { font-size: 14px; font-weight: 600; color: var(--text); }
.empty-big .sub { font-size: 12px; color: var(--muted); max-width: 340px; }

/* ── MAP (route planner) ── */
.map-form { margin-bottom: 12px; }
.map-inputs { display: flex; gap: 12px; flex-wrap: wrap; }
.map-inputs .field { flex: 1 1 220px; min-width: 180px; }
.map-stop-inputrow { display: flex; gap: 6px; align-items: center; }
.map-stop-inputrow .input { flex: 1 1 auto; }
.map-stop-remove { color: var(--faint); }
.map-form-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.map-form-actions .btn-primary { margin-left: auto; }
.map-swap {
  width: 38px; height: 38px; flex-shrink: 0; font-size: 15px;
  border: 1px solid var(--line); background: var(--surface-2);
}
.map-swap:hover { border-color: var(--line-2); color: var(--accent); }
.geo-wrap { position: relative; }
.geo-list {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; z-index: 20;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-s);
  box-shadow: var(--shadow-3); max-height: 220px; overflow-y: auto;
}
.geo-item { display: block; width: 100%; text-align: left; background: none; border: none; padding: 8px 11px; font-size: 12.5px; color: var(--text); }
.geo-item:hover, .geo-item:focus-visible { background: var(--surface); }
.geo-empty { padding: 8px 11px; font-size: 12px; color: var(--faint); }
.map-card { position: relative; z-index: 0; padding: 0; overflow: hidden; }
#mapCanvas { width: 100%; height: 440px; background: var(--surface-2); }
.map-attrib { font-size: 10.5px; color: var(--faint); margin-top: 8px; text-align: center; }
.map-stat-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.map-stat-row:last-of-type { border-bottom: none; }
.map-stat-row .input { width: 90px; text-align: right; }
.map-stat-row select.input.map-trip-select { width: auto; min-width: 150px; text-align: left; }
.map-stat-label { font-size: 12px; color: var(--muted); }
.map-stat-val { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.map-stat-total .map-stat-val { color: var(--accent); font-weight: 600; font-size: 15px; }

/* ── ORDER IMPORT ── */
.imp-wait { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 34px 10px 26px; text-align: center; font-size: 13px; }
.imp-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: var(--accent); animation: impSpin .8s linear infinite; }
@keyframes impSpin { to { transform: rotate(360deg); } }
.imp-sub { font-size: 11.5px; color: var(--faint); max-width: 300px; }
.imp-hint { font-size: 12px; color: var(--muted); }

.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 44px 20px; border: 1.5px dashed var(--line-2); border-radius: var(--radius);
  background: var(--surface-2); cursor: pointer; text-align: center; user-select: none;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.dropzone:hover { border-color: var(--accent); }
.dropzone.drag-over { border-color: var(--accent); background: var(--accent-dim); }
.dropzone-ic { font-size: 28px; opacity: .7; }
.dropzone-title { font-size: 13.5px; font-weight: 600; }
.dropzone-sub { font-size: 11.5px; color: var(--faint); }

/* ── LOGIN ── */
.login-wrap { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; }
.login-wrap::before {
  content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(239,185,76,0.5), transparent);
}
.login-card {
  width: 100%; max-width: 360px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 34px 30px 30px; box-shadow: var(--shadow-3);
}
.login-card .wordmark { justify-content: center; padding: 0 0 6px; }
.login-sub { text-align: center; font-size: 12px; color: var(--muted); margin-bottom: 26px; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-err {
  font-size: 12px; color: var(--danger);
  background: rgba(240,86,74,0.07); border: 1px solid rgba(240,86,74,0.25);
  border-radius: var(--radius-s); padding: 8px 12px; display: none;
}
.login-err.show { display: block; }

/* ── RESPONSIVE ── */
@media (max-width: 1000px) { .kpis { grid-template-columns: 1fr 1fr; } .grid2 { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .sidebar { width: 58px; padding: 20px 8px 14px; }
  .wordmark { justify-content: center; padding: 0; }
  .wordmark-name, .wordmark-tag, .nav-item span, .nav-label, .nav-count, .made-by, .signout-row span { display: none; }
  .nav-item, .signout-row { justify-content: center; padding: 9px 0; }
  .content { padding: 20px 14px 48px; }
  .kpis { grid-template-columns: 1fr; }
  .topbar { padding: 0 14px; gap: 8px; }
  #searchBtn span { display: none; }
  .map-inputs { flex-direction: column; align-items: stretch; }
  .map-inputs .btn { width: 100%; }
  .map-swap { align-self: center; }
  #mapCanvas { height: 280px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ── MOBILE / TOUCH (2026-07-14 mobile audit) ──
   #view is the app's one intentional scroll region (see the .content comment
   above) inside a fixed dvh shell, so there's no "page scrolls behind an open
   modal" class of bug here the way a normal-flow body would have — but a
   fixed-height shell can still rubber-band bounce on iOS Safari when the
   toolbar animates, so overscroll is disabled at the html/body level too. */
html, body { overscroll-behavior-y: none; }

a, button, input, select, textarea,
table.data tbody tr, .mini-row, .palette-item, .dropzone { touch-action: manipulation; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }

@media (pointer: coarse) {
  /* iOS Safari auto-zooms the page on focusing any input under 16px */
  .input, .palette-input, .prop-val .input { font-size: 16px; }

  /* comfortable tap sizes via invisible hit-area extension — no visual change */
  .btn-sm, .tabs button { padding: 8px 12px; font-size: 12px; }
  .icon-btn, .panel-x, .toggle-pw { position: relative; }
  .icon-btn::after, .toggle-pw::after { content: ''; position: absolute; inset: -8px; }
  .panel-x::after { content: ''; position: absolute; inset: -6px; }
  .doc-actions { gap: 8px; }
}

@media (max-width: 620px) {
  /* orders: keep ref/customer/route/price/status, hide the rest — full
     record is one tap away in the detail dialog */
  .t-orders th:nth-child(4), .t-orders td:nth-child(4),
  .t-orders th:nth-child(5), .t-orders td:nth-child(5),
  .t-orders th:nth-child(6), .t-orders td:nth-child(6),
  .t-orders th:nth-child(9), .t-orders td:nth-child(9),
  .t-orders th:nth-child(10), .t-orders td:nth-child(10),
  /* loads: keep ref/route/margin/status */
  .t-loads th:nth-child(3), .t-loads td:nth-child(3),
  .t-loads th:nth-child(4), .t-loads td:nth-child(4),
  .t-loads th:nth-child(5), .t-loads td:nth-child(5),
  .t-loads th:nth-child(6), .t-loads td:nth-child(6),
  .t-loads th:nth-child(8), .t-loads td:nth-child(8),
  /* customers: keep name/phone/owes-us */
  .t-customers th:nth-child(2), .t-customers td:nth-child(2),
  .t-customers th:nth-child(3), .t-customers td:nth-child(3),
  .t-customers th:nth-child(5), .t-customers td:nth-child(5),
  .t-customers th:nth-child(6), .t-customers td:nth-child(6),
  /* fleet: keep plate/driver/status/current trip */
  .t-fleet th:nth-child(2), .t-fleet td:nth-child(2),
  .t-fleet th:nth-child(4), .t-fleet td:nth-child(4),
  /* carriers: keep name/contact person/we-owe */
  .t-carriers th:nth-child(2), .t-carriers td:nth-child(2),
  .t-carriers th:nth-child(3), .t-carriers td:nth-child(3),
  .t-carriers th:nth-child(4), .t-carriers td:nth-child(4),
  .t-carriers th:nth-child(6), .t-carriers td:nth-child(6),
  /* quotes: keep company/route/status */
  .t-quotes th:nth-child(3), .t-quotes td:nth-child(3),
  .t-quotes th:nth-child(4), .t-quotes td:nth-child(4),
  .t-quotes th:nth-child(6), .t-quotes td:nth-child(6),
  /* enquiries: keep sender/about/status — which form it came from is already
     obvious from what "about" says, and the age is one tap away */
  .t-inq th:nth-child(2), .t-inq td:nth-child(2),
  .t-inq th:nth-child(5), .t-inq td:nth-child(5),
  /* payments — receivables: keep customer/amount/due/actions.
     The status chip is dropped too: it's derivable from what's left, since
     "Платена ✓" only renders on unpaid rows and overdue shows as red text on
     the due date. Keeping it pushed the action buttons off-screen entirely. */
  .t-pay-in th:nth-child(1), .t-pay-in td:nth-child(1),
  .t-pay-in th:nth-child(3), .t-pay-in td:nth-child(3),
  .t-pay-in th:nth-child(5), .t-pay-in td:nth-child(5),
  .t-pay-in th:nth-child(7), .t-pay-in td:nth-child(7),
  /* payments — payables: keep carrier/amount/due/actions */
  .t-pay-out th:nth-child(1), .t-pay-out td:nth-child(1),
  .t-pay-out th:nth-child(5), .t-pay-out td:nth-child(5),
  /* ── the completed (archive) tables ──
     Same principle as above, except the column that always survives is the
     completion date: on a phone, "when did this close" is the whole reason
     you opened the archive.
     completed orders: keep ref/customer/price/paid-on */
  .t-arch-orders th:nth-child(3), .t-arch-orders td:nth-child(3),
  .t-arch-orders th:nth-child(4), .t-arch-orders td:nth-child(4),
  .t-arch-orders th:nth-child(6), .t-arch-orders td:nth-child(6),
  .t-arch-orders th:nth-child(8), .t-arch-orders td:nth-child(8),
  .t-arch-orders th:nth-child(9), .t-arch-orders td:nth-child(9),
  /* completed trips: keep ref/route/closed-on/margin */
  .t-arch-loads th:nth-child(3), .t-arch-loads td:nth-child(3),
  .t-arch-loads th:nth-child(5), .t-arch-loads td:nth-child(5),
  .t-arch-loads th:nth-child(6), .t-arch-loads td:nth-child(6),
  .t-arch-loads th:nth-child(8), .t-arch-loads td:nth-child(8),
  /* paid invoices: keep customer/amount/paid-on/actions */
  .t-arch-pay-in th:nth-child(1), .t-arch-pay-in td:nth-child(1),
  .t-arch-pay-in th:nth-child(3), .t-arch-pay-in td:nth-child(3),
  .t-arch-pay-in th:nth-child(5), .t-arch-pay-in td:nth-child(5),
  /* settled payables: keep carrier/amount/paid-on/actions */
  .t-arch-pay-out th:nth-child(1), .t-arch-pay-out td:nth-child(1)
  { display: none; }

  table.data td { max-width: 40vw; }

  /* the company name is the one elastic column — cap it harder here so the
     amount/due/action columns all survive on a 390px screen */
  .t-pay-in td:nth-child(2), .t-pay-out td:nth-child(2),
  .t-arch-pay-in td:nth-child(2), .t-arch-pay-out td:nth-child(2) { max-width: 26vw; }
  .t-pay-in th, .t-pay-in td,
  .t-pay-out th, .t-pay-out td,
  .t-arch-pay-in th, .t-arch-pay-in td,
  .t-arch-pay-out th, .t-arch-pay-out td { padding-left: 10px; padding-right: 10px; }
  .row-actions { gap: 2px; }
  .row-actions .btn-sm { padding-left: 8px; padding-right: 8px; }

  /* a long company name or an overdue "(+17 дни)" marker can still push the
     row a little past the edge, so pin the action cell (mark paid / delete)
     to the right and let the rest scroll under it — the buttons are never
     more than a tap away, no sideways scrolling first */
  .t-pay-in th:last-child, .t-pay-out th:last-child,
  .t-pay-in td:last-child, .t-pay-out td:last-child,
  .t-arch-pay-in th:last-child, .t-arch-pay-out th:last-child,
  .t-arch-pay-in td:last-child, .t-arch-pay-out td:last-child {
    position: sticky; right: 0;
    box-shadow: -10px 0 8px -8px rgba(0, 0, 0, .55);
  }
  .t-pay-in td:last-child, .t-pay-out td:last-child,
  .t-arch-pay-in td:last-child, .t-arch-pay-out td:last-child {
    z-index: 1; background: var(--surface);
  }
  .t-pay-in th:last-child, .t-pay-out th:last-child,
  .t-arch-pay-in th:last-child, .t-arch-pay-out th:last-child { z-index: 3; }
  .t-pay-in tbody tr:hover td:last-child,
  .t-pay-out tbody tr:hover td:last-child,
  .t-arch-pay-in tbody tr:hover td:last-child,
  .t-arch-pay-out tbody tr:hover td:last-child { background: var(--surface-2); }

  /* phone layout: sidebar goes away — the bottom tab bar takes over.
     Tablet width (621–760px) keeps the collapsed 58px icon rail as before. */
  .sidebar { display: none; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi { padding: 12px 13px 11px; }
  .kpi-label { font-size: 10px; margin-bottom: 6px; }
  .kpi-val { font-size: 19px; }
  .kpi-sub { font-size: 10.5px; margin-top: 4px; }
  .card { padding: 14px 14px 15px; }
  .content { padding: 14px 12px calc(92px + env(safe-area-inset-bottom, 0px)); }
  .search { width: 100%; }
  .toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } /* clears the tab bar */
}

/* ── BOTTOM TAB BAR (phones only; the collapsed icon rail serves 621–760px) ── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; gap: 2px;
  padding: 6px 6px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(12,14,17,0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
@media (max-width: 620px) { .tabbar { display: flex; } }
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; padding: 5px 0 3px; text-decoration: none;
  color: var(--muted); font-family: var(--font); font-size: 9.5px; font-weight: 500;
  border-radius: 8px; transition: color var(--t-fast);
}
.tab svg { opacity: 0.9; }
.tab.active { color: var(--accent); }

/* ── "More" list view (#/more) — Map/Customers/Fleet/Carriers plus account
   actions that only live in the sidebar, which is gone on phones ── */
.more-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--faint); padding: 14px 4px 7px;
}
.more-label:first-child { padding-top: 2px; }
.more-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 14px; margin-bottom: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 13px; font-weight: 500; color: var(--text); text-decoration: none;
}
.more-row svg { color: var(--accent); flex-shrink: 0; opacity: 0.9; }
.more-row .cnt { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--faint); }