/* OCT · MCT Command Center - in the spirit of the WCS portal: a deep-blue side rail, warm light canvas, soft glass cards. */
:root {
  --bg: #f4f6fb; --panel: #ffffff; --ink: #0f1b2d; --muted: #5d6b82; --line: #e4e9f2; --soft: #eef3fb;
  --blue: #1d6fd8; --blue-deep: #0b3d91; --cyan: #22a3c7; --green: #1f9d6b; --amber: #e0962b; --red: #d64545; --violet: #7b61d9;
  --rail-1: #0b3d91; --rail-2: #1667c9; --rail-3: #4fa3e3;
  --shadow: 0 1px 2px rgba(15, 27, 45, .05), 0 8px 24px rgba(15, 27, 45, .07);
  --grid: #edf1f7; --axis: #cfd8e5;
  /* chart series, fixed order (validated: adjacent CVD and normal-vision separation, light and dark steps) */
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --cost: #a9bcd6;
  --radius: 18px; --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
h1 { font-size: 30px; line-height: 1.15; margin: 2px 0 4px; letter-spacing: -.02em; font-weight: 800; text-wrap: balance; }
h2 { font-size: 16px; margin: 0 0 2px; font-weight: 700; }
.muted { color: var(--muted); margin: 0; }
.eyebrow { margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); font-weight: 700; }
.error { color: var(--red); min-height: 1.5em; }
button { font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(29, 111, 216, .35); outline-offset: 2px; }
.link { background: none; border: 0; color: inherit; text-decoration: underline; padding: 0; }

/* sign-in */
.login { min-height: 100%; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(1200px 600px at 10% -10%, #cfe2fb 0, transparent 60%), radial-gradient(900px 500px at 110% 110%, #d8f0f7 0, transparent 55%), var(--bg); }
.login-card { width: min(420px, 100%); background: var(--panel); border-radius: 24px; box-shadow: var(--shadow); padding: 32px; display: grid; gap: 12px; }
.login-card.wide { width: min(560px, 100%); }
.login-form { display: grid; gap: 12px; }
.login-form label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.login-form .btn { padding: 11px 14px; }
.small { font-size: 12px; }
.steps { margin: 0; padding-left: 20px; display: grid; gap: 12px; }
.steps li { padding-left: 4px; }
.secret { font: 600 15px/1.5 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .08em; background: var(--soft); border-radius: 10px; padding: 10px 12px; margin: 8px 0; overflow-wrap: anywhere; user-select: all; }
.secret.small { font-size: 12px; letter-spacing: 0; padding: 4px 8px; display: inline-block; margin: 4px 0; }
.qr { width: min(220px, 70vw); aspect-ratio: 1; max-width: 100%; margin: 10px 0; background: #fff; border-radius: 12px; padding: 6px; box-shadow: var(--shadow); }
.qr svg { width: 100%; height: 100%; display: block; }
details summary { cursor: pointer; margin: 4px 0; }
.codes { font: 600 15px/1.8 ui-monospace, 'Cascadia Mono', Consolas, monospace; background: var(--soft); border-radius: 12px; padding: 12px 16px; margin: 0; columns: 2; }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row-btns a.btn { text-decoration: none; }
.pill.ok { background: rgba(31, 157, 107, .14); color: var(--green); }
.pill.warn { background: rgba(224, 150, 43, .16); color: #9a5f0a; }
.toast { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: min(420px, calc(100% - 32px)); background: var(--ink); color: var(--panel); padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow); z-index: 20; }

/* shell */
.shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100%; }
/* the side rail: dark slate in both themes, icons, folding sections (one open at a time) */
.side { --rail-bg: #1b2a3e; --rail-ink: #e6edf7; --rail-dim: #a3b3c9; --rail-panel: #33465f; --rail-hover: rgba(255, 255, 255, .07);
  background: var(--rail-bg); color: var(--rail-ink); padding: 22px 12px 16px; display: flex; flex-direction: column; gap: 22px; position: sticky; top: 0; height: 100vh; }
.side .brand b { color: #fff; } .side .brand small { color: var(--rail-dim); }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.brand b { display: block; font-size: 17px; letter-spacing: -.01em; color: var(--blue-deep); }
.brand small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
.brand.big b { font-size: 20px; }
.mark { width: 38px; height: 38px; border-radius: 11px; background: url('favicon.svg') center/cover; flex: none; box-shadow: 0 6px 16px rgba(11, 61, 145, .25); }
nav { display: grid; gap: 4px; align-content: start; min-height: 0; overflow-y: auto; }
.nav-top, .nav-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 11px 14px; border: 0; border-radius: 12px; background: none; color: var(--rail-ink);
  font: 600 15px/1.2 var(--font); text-decoration: none; text-align: left; cursor: pointer; }
.nav-top:hover, .nav-head:hover { background: var(--rail-hover); }
.ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chev { width: 18px; height: 18px; margin-left: auto; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.nav-top.on { background: #fff; color: var(--ink); }
.nav-sub { display: none; }
.nav-group.open { background: var(--rail-panel); border-radius: 12px; overflow: hidden; }
.nav-group.open .nav-head { background: #eef3fb; color: #12233a; border-radius: 12px 12px 0 0; }
.nav-group.open .chev { transform: rotate(180deg); }
.nav-group.open .nav-sub { display: grid; padding: 6px 0 8px; }
.nav-sub a { display: block; padding: 9px 14px 9px 50px; color: #d3dceb; text-decoration: none; font-weight: 600; font-size: 14px; }
.nav-sub a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.nav-sub a.on { color: #fff; font-weight: 800; background: rgba(255, 255, 255, .1); box-shadow: inset 3px 0 0 #6fb1ff; }
.side :focus-visible { outline: 3px solid rgba(111, 177, 255, .6); outline-offset: -3px; }
.menu-btn { display: none; }
.who { margin-top: auto; display: grid; gap: 4px; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 12px; }
.who-id { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 14px 4px; font-weight: 700; font-size: 13px; overflow-wrap: anywhere; }
.who .pill { background: rgba(255, 255, 255, .14); color: var(--rail-ink); }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgba(255, 255, 255, .22); }

main { padding: 28px 32px 48px; min-width: 0; }
.top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.controls { display: flex; gap: 10px; flex-wrap: wrap; }
.chips { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 4px; box-shadow: var(--shadow); }
.chips button { border: 0; background: none; padding: 7px 14px; border-radius: 999px; font-weight: 700; color: var(--muted); font-size: 13px; }
.chips button.on { background: var(--ink); color: #fff; }

/* cards and grids */
.grid { display: grid; gap: 16px; }
.kpis { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
@media (max-width: 1180px) { .kpis { grid-template-columns: repeat(var(--nm, 3), minmax(0, 1fr)); } }
@media (max-width: 640px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.two { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.half { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.card { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; min-width: 0; }
.card.glass { background: linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(244, 248, 255, .92)); border: 1px solid rgba(29, 111, 216, .08); }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.card-head h2 { white-space: nowrap; }
.card-head .muted { text-align: right; }
.card-head .muted { font-size: 12px; }
.kpi .label { font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: .02em; }
.kpi .value { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; }
.kpi .sub { font-size: 12px; color: var(--muted); }
.up { color: var(--green); font-weight: 700; } .down { color: var(--red); font-weight: 700; }
section + section, .grid + .grid, .grid + .card, .card + .grid, #view > * + * { margin-top: 16px; }

/* agents */
.agents { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.agent { display: grid; gap: 8px; position: relative; }
.agent .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.agent .name { font-weight: 800; font-size: 16px; }
.agent .role { font-size: 12px; color: var(--muted); }
.agent .big { font-size: 28px; font-weight: 800; }
.agent .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.agent .facts b { color: var(--ink); font-variant-numeric: tabular-nums; }
.state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.state.running { color: var(--green); background: #e6f6ee; } .state.paused { color: var(--red); background: #fdeaea; } .state.partial, .state.unknown { color: var(--amber); background: #fdf3e2; }
.co { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--blue); background: var(--soft); padding: 2px 8px; border-radius: 6px; }

/* tables */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; color: var(--muted); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid var(--line); }
/* a click on a column header sorts the table (web/sort.js): the arrow shows on hover, and stays on the sorted column */
.table th.sortable { cursor: pointer; user-select: none; }
.table th.sortable:hover, .table th.sortable[aria-sort] { color: var(--ink); }
.table th.sortable:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 4px; }
.table th.sortable::after { content: '\00a0▼'; font-size: 9px; opacity: 0; transition: opacity .12s; } /* glued to the last word (no-break space): never wraps alone */
.table th.sortable:hover::after { opacity: .35; }
.table th.sortable[aria-sort]::after { opacity: 1; color: var(--blue); }
.table th.sortable[aria-sort="ascending"]::after { content: '\00a0▲'; }
.table td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.barcell { position: relative; }
.grid.pay { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
.stack { display: grid; gap: 16px; align-content: start; }
@media (max-width: 1000px) { .grid.pay { grid-template-columns: 1fr; } }
.barcell > span:first-child { position: absolute; left: 8px; bottom: 5px; height: 3px; max-width: calc(100% - 16px); border-radius: 2px; background: var(--blue); opacity: .35; }
.scroll { overflow-x: auto; }

/* buttons and forms */
.btn { border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 8px 14px; font-weight: 700; color: var(--ink); }
.btn.primary { background: linear-gradient(135deg, var(--blue), var(--blue-deep)); color: #fff; border: 0; box-shadow: 0 8px 18px rgba(29, 111, 216, .3); }
.btn.danger { background: var(--red); color: #fff; border: 0; box-shadow: 0 8px 18px rgba(214, 69, 69, .28); }
.btn.ghost-danger { color: var(--red); border-color: #f3c9c9; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.form { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr auto; gap: 10px; align-items: end; }
.form label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
input, select { font: inherit; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); min-width: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 9px 0; }
input[type=checkbox] { padding: 0; width: 15px; height: 15px; accent-color: var(--blue); }
.checks label { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.table.team td { vertical-align: middle; }
.table.team .checks { padding: 0; font-size: 12px; }
.table.team .access { display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 14px; }
.table.team select { padding: 6px 8px; }
.note { background: var(--soft); border-radius: 12px; padding: 10px 12px; font-size: 13px; color: #2b3a52; }
.stopall { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(135deg, #fff5f5, #fff); border: 1px solid #f6d2d2; }

/* charts */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { font: 600 11px var(--font); fill: var(--muted); font-variant-numeric: tabular-nums; }
.chart .grid-line { stroke: var(--grid); stroke-width: 1; }
.chart .axis-line { stroke: var(--axis); stroke-width: 1; }
.chart .crosshair { stroke: var(--axis); stroke-width: 1; }
.tip i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.tip b { font-weight: 800; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); font-weight: 600; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.tip { position: fixed; pointer-events: none; background: var(--ink); color: #fff; padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; z-index: 10; white-space: nowrap; box-shadow: var(--shadow); }
.empty { color: var(--muted); padding: 24px 0; text-align: center; }
dialog { border: 0; border-radius: 20px; box-shadow: var(--shadow); padding: 24px; width: min(440px, calc(100% - 32px)); }
dialog::backdrop { background: rgba(15, 27, 45, .35); }
dialog form { display: grid; gap: 12px; margin: 0; }
dialog .actions { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 960px) {
  .shell { grid-template-columns: 1fr; }
  /* a phone or a narrow window: a top bar - the brand and a button with the page you are on; the grouped menu opens under it */
  .side { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between;
    padding: 10px 16px; gap: 10px; }
  .menu-btn { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 700; }
  .menu-icon { width: 14px; height: 10px; background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat; }
  nav, .who { display: none; }
  body.menu-open nav { display: grid; flex-basis: 100%; max-height: calc(100vh - 190px); overflow-y: auto; padding: 4px 0; }
  body.menu-open .who { display: grid; flex-basis: 100%; margin: 0; }
  main { padding: 20px 16px 40px; }
  .two { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  h1 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* drill-down rows and the wide dialog */
.drill { cursor: pointer; }
.drill:hover td, .drill:focus td { background: var(--soft); }
dialog.wide { width: min(1100px, calc(100% - 32px)); }

/* dark theme: the same rail and cards, night canvas */
@media (prefers-color-scheme: dark) {
  :root { --bg: #0d1420; --panel: #141d2b; --ink: #e8eef8; --muted: #93a2b8; --line: #243248; --soft: #1b2738; --grid: #1c2738; --axis: #33445e; --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --cost: #3a4d6a;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .35); color-scheme: dark; }
  .side { --rail-bg: #111a28; --rail-panel: #26364d; border-right: 1px solid var(--line); }
  .nav-top.on { background: #e8eef8; color: #0d1420; }
  .brand b { color: #9cc3ff; }
  .card.glass { background: linear-gradient(160deg, #162133, #131c2a); border-color: #22314a; }
  .chips, .btn, input, select { background: var(--panel); color: var(--ink); border-color: var(--line); }
  .chips button.on { background: #e8eef8; color: #0d1420; }
  .login { background: radial-gradient(1200px 600px at 10% -10%, #15305c 0, transparent 60%), var(--bg); }
  .state.running { background: #10301f; } .state.paused { background: #3a1616; } .state.partial, .state.unknown { background: #3a2a10; }
  .stopall { background: linear-gradient(135deg, #2a1414, var(--panel)); border-color: #5a2626; }
  .note { color: var(--ink); }
  .pill.warn { color: #f0b45a; }
}

/* pages that do not use the company / period switches */
body[data-page="calc"] .controls, body[data-page="team"] .controls { display: none; }
/* the calculator page */
.calc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 18px; margin-bottom: 14px; }
.calc-card { display: grid; gap: 14px; align-content: start; }
.calc-co { display: flex; align-items: center; gap: 12px; }
.calc-badge { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 13px; letter-spacing: .04em; color: #fff; background: linear-gradient(135deg, var(--rail-2), var(--rail-1)); }
.calc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-actions .btn { padding: 11px 18px; }
.calc-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.calc-list b { color: var(--ink); }
.calc-card a { color: var(--blue); }
/* the quote screens: the move on the left, the quote on the right; one column on a narrow screen */
body[data-page="quote"] .controls, body[data-page="quotes"] .controls { display: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.q-grid { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1100px) { .q-grid { grid-template-columns: 1fr; } }
.q-form { position: sticky; top: 16px; }
@media (max-width: 1100px) { .q-form { position: static; } .q-grid.has-quote .q-form { order: 2; } }
.q-form form { display: grid; gap: 14px; }
.q-field { display: grid; gap: 5px; min-width: 0; }
.q-field input, .q-field select, .q-field textarea { width: 100%; }
.q-lab { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.q-field small { font-size: 12px; }
.q-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.q-field { align-content: start; }
/* cargo ticks: hazmat, reefer, transload */
.q-cargo { display: flex; flex-wrap: wrap; gap: 8px; }
.q-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; font-weight: 700; font-size: 13px; cursor: pointer; background: var(--panel); }
.q-chip:has(input:checked) { border-color: var(--blue); background: rgba(29, 111, 216, .08); color: var(--blue); }
.q-quickrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; }
.q-quick { padding: 5px 10px; font-size: 12px; }
/* address suggestions */
.q-ac { position: relative; display: block; }
.q-ac-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.q-ac-list li[data-i] { padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.q-ac-list li[data-i]:hover, .q-ac-list li.on { background: var(--soft); }
.q-ac-by { font-size: 10px; color: var(--muted); text-align: right; padding: 2px 8px 0; }
.seg { display: flex; background: var(--soft); border-radius: 12px; padding: 3px; gap: 3px; }
.seg button { flex: 1; border: 0; background: none; padding: 8px 6px; border-radius: 9px; font-weight: 700; color: var(--muted); font-size: 13px; }
.seg button.on { background: var(--blue); color: #fff; box-shadow: 0 2px 6px rgba(29, 111, 216, .35); }
.q-more summary, .q-addbox summary { cursor: pointer; font-weight: 700; color: var(--blue); font-size: 13px; }
.q-more { display: grid; gap: 10px; } .q-more[open] summary { margin-bottom: 8px; }
.q-check { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 10px; }
.q-go { padding: 13px 16px; font-size: 15px; }
textarea { font: inherit; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); resize: vertical; }
.q-out { display: grid; gap: 16px; min-width: 0; }
.q-empty ol { margin: 8px 0 12px; padding-left: 20px; display: grid; gap: 8px; }
.q-sum-top { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.q-sum-main { min-width: 0; flex: 1 1 320px; }
.q-route { font-size: 20px; margin: 4px 0; text-wrap: balance; overflow-wrap: anywhere; }
.q-big { display: grid; justify-items: end; align-content: start; text-align: right; }
.q-big > span:first-child { font-size: 12px; font-weight: 700; color: var(--muted); }
.q-big b { font-size: 34px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .q-big { justify-items: start; text-align: left; } }
.q-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.q-actions a.btn { text-decoration: none; }
.q-msg { font-size: 13px; font-weight: 700; color: var(--green); } .q-msg.warn { color: #9a5f0a; }
.q-lines input.q-num { width: 120px; text-align: right; font-variant-numeric: tabular-nums; }
input.bad { border-color: var(--red); background: rgba(214, 69, 69, .06); }
.q-info { display: grid; gap: 6px; margin: 10px 0 0; font-size: 13px; } .q-info div { display: flex; gap: 8px; } .q-info dt { font-weight: 700; } .q-info dd { margin: 0; color: var(--muted); }
.q-h3 { font-size: 14px; margin: 18px 0 6px; }
.q-charges { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.q-charges li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.q-charges .q-c-label { font-weight: 700; flex: 1 1 160px; }
.q-charges input.q-num { width: 84px; text-align: right; padding: 6px 8px; }
.q-c-sum { min-width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
.q-x { border: 0; background: none; color: var(--red); font-weight: 700; font-size: 12px; padding: 4px 6px; }
.q-addbox { margin-top: 10px; }
.q-add { display: grid; grid-template-columns: 1.4fr 1.4fr .6fr .8fr .8fr auto; gap: 8px; align-items: end; margin-top: 8px; }
@media (max-width: 760px) { .q-add { grid-template-columns: 1fr 1fr; } }
/* the price, top to bottom like a receipt; every line is also in the customer's email */
.q-sumbox { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 10px; max-width: 520px; margin-left: auto; }
.q-receipt { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.q-receipt li { display: flex; justify-content: space-between; gap: 12px; } .q-receipt b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.q-receipt .q-disc { color: var(--green); font-weight: 700; }
.q-final { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 10px; border-top: 2px solid var(--ink); }
.q-final > span:first-child { font-weight: 800; font-size: 15px; }
.q-final input { font-size: 20px; font-weight: 800; width: 170px; text-align: right; font-variant-numeric: tabular-nums; border: 2px solid var(--blue); padding-left: 26px; }
.q-dollar { position: relative; display: block; } .q-dollar::before { content: '$'; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-weight: 800; color: var(--muted); }
.q-msg2 { text-align: right; min-height: 1.2em; margin: 0; }
/* warnings on the quote: the move changed, the quote expired */
.q-banner { border-radius: 12px; padding: 10px 14px; font-size: 13px; line-height: 1.5; margin: 0 0 12px; }
.q-banner.warn { background: #fff4e0; color: #7a4a00; border: 1px solid #f3d29a; }
.q-banner.bad { background: #fdeaea; color: #8a1f1f; border: 1px solid #f3c2c2; }
.q-banner .btn { padding: 4px 10px; font-size: 12px; margin-left: 6px; }
.q-out.stale .q-price, .q-out.stale .q-prevbox, .q-out.stale .q-text { opacity: .5; }
.q-num-line { margin: 0; font-size: 14px; }
.q-expired, .q-tag-old { color: var(--red); font-weight: 700; }
.q-tag-old { background: #fdeaea; border-radius: 999px; padding: 1px 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.q-tomove { display: none; }
@media (max-width: 1100px) { .q-tomove { display: inline-block; } }
.q-addbox summary.btn { display: inline-block; list-style: none; margin-top: 4px; } .q-addbox summary.btn::-webkit-details-marker { display: none; }
.q-lines-ro dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 14px; margin: 6px 0 0; font-size: 13px; }
.q-lines-ro dt { color: var(--muted); font-size: 12px; font-weight: 700; } .q-lines-ro dd { margin: 0; }
.q-prevbox summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.q-prevbox summary::after { content: '▾'; color: var(--muted); } .q-prevbox[open] summary::after { content: '▴'; }
.q-prevbox[open] summary { margin-bottom: 12px; }
.q-preview.clip { max-height: var(--clip, 620px); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 24px), transparent); }
.q-preview.stale { opacity: .45; }
.q-full { margin-top: 10px; }
.q-list-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.q-text summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.q-text summary::after { content: '▾'; color: var(--muted); } .q-text[open] summary::after { content: '▴'; }
.q-text-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 12px; }
.q-wide { grid-column: 1 / -1; }
/* the customer's email exactly as it goes out: always on white */
.q-preview { background: #fff; color: #222; border-radius: 12px; padding: 16px; overflow-x: auto; border: 1px solid var(--line); }
.q-list-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.q-list-top a.btn { text-decoration: none; }
.q-search { flex: 1 1 280px; max-width: 420px; } .q-search input { width: 100%; }
.q-table tr[hidden] { display: none; }
.q-empty-list { text-align: center; padding: 30px 10px; display: grid; gap: 6px; justify-items: center; } .q-empty-list a.btn { text-decoration: none; margin-top: 8px; }

/* the AR board */
.ar-card { padding-top: 14px; }
.ar-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.ar-tools .chips { box-shadow: none; flex-wrap: wrap; }
.ar-find { flex: 1 1 220px; max-width: 320px; } .ar-find input { width: 100%; }
/* Driver pay: the tools above the drivers table (find, show, truck cost per mile, CSV) */
.dr-tools { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 10px; }
.dr-tools .chips { box-shadow: none; flex-wrap: wrap; }
.dr-truck { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 13px; font-weight: 700; max-width: 360px; }
.dr-truck .small { font-weight: 400; flex-basis: 100%; }
.dr-usd { position: relative; display: inline-block; }
.dr-usd > span { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 400; }
.dr-usd input { width: 96px; padding-left: 22px; }
.dr-tools #pay-csv { margin-left: auto; }
.dr-table td { white-space: nowrap; }
.dr-table th, .dr-table td, .dr-loads th, .dr-loads td { padding-left: 6px; padding-right: 6px; }
.dr-table td:first-child { white-space: normal; min-width: 200px; }
.dr-loads td:nth-child(4) { min-width: 170px; }
.ar-table td { vertical-align: top; }
.ar-row { cursor: pointer; } .ar-row:hover td, .ar-row.open td { background: var(--soft); }
.ar-name { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--ink); text-align: left; cursor: pointer; }
.ar-row.open .ar-name { color: var(--blue); }
.ar-co { font-size: 11px; font-weight: 700; color: var(--muted); }
.ar-due { color: var(--red); font-weight: 700; }
.ar-fee { font-size: 11px; color: #9a5f0a; font-weight: 700; }
.ar-agent { font-size: 12px; color: var(--muted); max-width: 280px; }
.ar-step { display: inline-block; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 8px; background: var(--soft); white-space: nowrap; }
.ar-step.latefee { background: #fff4e0; color: #7a4a00; } .ar-step.legal { background: #fdeaea; color: #8a1f1f; } .ar-step.writeoff { background: #efe9fb; color: #5a3fb0; }
.ar-detail > td { background: var(--soft); padding: 0; }
.ar-panel { padding: 14px; }
.ar-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; }
@media (max-width: 1100px) { .ar-grid { grid-template-columns: 1fr; } }
.ar-st, .ar-fb { background: var(--panel); border-radius: 14px; padding: 14px; box-shadow: var(--shadow); min-width: 0; }
.ar-st-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; } .ar-st-head .btn { margin-left: auto; }
.ar-st-body { background: #fff; color: #1d2433; border-radius: 10px; padding: 12px; overflow-x: auto; border: 1px solid var(--line); }
/* the statement keeps its own email look inside the board's table */
.ar-st-body th, .ar-st-body td { text-transform: none; letter-spacing: 0; color: #1d2433; vertical-align: top; white-space: nowrap; }
.ar-st-body th { font-weight: 700; }
body[data-page="ar"] #period-chips, body[data-page="ar"] #custom-range { display: none !important; }
.ar-notes { margin-top: 10px; } .ar-notes p { margin: 4px 0; }
.ar-form { display: grid; gap: 6px; margin: 10px 0; }
.ar-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 13px; }
.ar-opt:hover { background: var(--soft); } .ar-opt.off { opacity: .45; cursor: not-allowed; } .ar-opt .muted { margin-left: auto; }
.ar-in { display: grid; gap: 4px; } .ar-in input, .ar-in textarea { width: 100%; }
.ar-drafts { display: grid; gap: 8px; margin: 10px 0; }
.ar-draft { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 8px 10px; border: 1px solid #f3d29a; background: #fff8eb; border-radius: 10px; }
.ar-draft b { flex: 1 1 100%; } .ar-draft .btn { padding: 5px 10px; font-size: 12px; }
.ar-hist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; border-top: 1px solid var(--line); padding-top: 8px; }

/* the Team page: people list and the person card */
.t-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.t-list td { vertical-align: middle; }
.t-person { display: flex; align-items: center; gap: 10px; } .t-person > span:last-child { display: grid; }
.t-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #fff; background: linear-gradient(135deg, var(--rail-2), var(--rail-1)); flex: none; }
.t-av.big { width: 46px; height: 46px; font-size: 15px; }
.t-role { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--soft); }
.t-role.owner { background: #1b2a3e; color: #fff; } .t-role.manager { background: rgba(29, 111, 216, .12); color: var(--blue); } .t-role.sales { background: rgba(31, 157, 107, .14); color: var(--green); }
.t-co { display: inline-block; padding: 1px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 11px; font-weight: 800; }
.t-cando { max-width: 360px; } .t-tag { display: inline-block; margin: 2px 4px 2px 0; padding: 1px 8px; border-radius: 999px; background: var(--soft); font-size: 12px; font-weight: 700; }
.t-open { color: var(--blue); font-weight: 700; font-size: 13px; white-space: nowrap; }
.pill.bad { background: #fdeaea; color: var(--red); }
dialog.person { width: min(720px, calc(100% - 24px)); max-height: calc(100vh - 40px); padding: 0; display: none; }
dialog.person[open] { display: flex; flex-direction: column; }
.t-card-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 10px; } .t-card-head h2 { font-size: 18px; margin: 0; }
.t-x { margin-left: auto; border: 0; background: none; font-size: 26px; line-height: 1; color: var(--muted); padding: 4px 8px; }
.t-tabs { display: flex; gap: 4px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.t-tabs button { border: 0; background: none; padding: 10px 14px; font-weight: 700; color: var(--muted); border-bottom: 3px solid transparent; }
.t-tabs button.on { color: var(--blue); border-bottom-color: var(--blue); }
.t-body { padding: 16px 20px; overflow-y: auto; display: grid; gap: 14px; align-content: start; flex: 1 1 auto; }
.t-field { display: grid; gap: 6px; } .t-field input[type=email] { width: 100%; }
.t-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } @media (max-width: 560px) { .t-roles { grid-template-columns: 1fr; } }
.t-rolecard { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.t-rolecard input { position: absolute; opacity: 0; pointer-events: none; } .t-rolecard.on { border-color: var(--blue); background: rgba(29, 111, 216, .07); }
.t-signin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .t-signin .btn { margin-left: auto; }
.t-danger { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.t-based { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .t-all { margin-left: auto; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.t-sec { border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px 10px; margin: 0; display: grid; gap: 6px; }
.t-sec legend { padding: 0 6px; } .t-sec-head { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.t-item { display: flex; align-items: flex-start; gap: 10px; padding: 4px 2px; cursor: pointer; } .t-item > span { display: grid; } .t-item input { margin-top: 3px; }
.t-links { display: grid; gap: 8px; margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--line); }
.t-link { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--muted); }
@media (max-width: 560px) { .t-link { grid-template-columns: 1fr; } }
.t-foot { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); } .t-foot .q-msg { margin-right: auto; color: var(--red); }

/* the Team page's activity log */
.act-top { margin-bottom: 8px; } .act-top .chips { box-shadow: none; flex-wrap: wrap; }
.table.act td { padding: 7px 8px; }
.act-more { display: flex; align-items: center; gap: 12px; margin-top: 10px; }

/* the Team page: each person's calculator account */
.calc-link { display: grid; justify-items: start; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); margin: 8px 0 0; }
.calc-link select { font-size: 12px; padding: 4px 6px; max-width: 230px; }
.team td.row-actions { min-width: 140px; }
.team td.row-actions .btn { display: block; width: 100%; margin: 0 0 6px; white-space: nowrap; }

/* print: the page itself, no rail or controls */
/* sales report */
.report-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.report-controls .chips { box-shadow: none; }
.report-actions { display: flex; gap: 8px; margin-left: auto; }
.rep-range { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.rep-range label { display: inline-flex; align-items: center; gap: 6px; }
body[data-page="report"] #period-chips, body[data-page="report"] #custom-range { display: none !important; }
body[data-page="agents"] #wcs-chips, body[data-page="sales"] #wcs-chips, body[data-page="switch"] #wcs-chips, body[data-page="team"] #wcs-chips { display: none; }
.report { padding: 28px 32px; display: grid; gap: 26px; }
.report-head h2 { font-size: 26px; margin: 6px 0 4px; text-wrap: balance; }
.report-head p { margin: 0; font-size: 13px; }
.report h3 { font-size: 15px; letter-spacing: .02em; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.report h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 14px 0 6px; }
.report h4:first-child { margin-top: 0; }
.report ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; line-height: 1.45; }
.report .kpi small { font-size: 12px; font-weight: 600; color: var(--muted); }

.rep-line { margin: 0 0 12px; font-size: 13px; line-height: 1.6; }
.rep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px 28px; align-items: start; }
.hub { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-top: 16px; }
.hub label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
@media (max-width: 700px) { .report { padding: 18px 16px; } .report-actions { margin-left: 0; } }

@media print {
  .table th.sortable::after { display: none; }
  .side, .controls, .btn, #sales-pick, .report-controls, .hub, body[data-page="report"] header.top { display: none !important; }
  .report { padding: 0; border: 0 !important; } .rep-csr { break-inside: avoid; }
  .shell { grid-template-columns: 1fr; } main { padding: 0; }
  .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  body { background: #fff; }
}

/* custom date range */
.range { display: inline-flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 14px; box-shadow: var(--shadow); flex-wrap: wrap; }
.range label { font-size: 12px; font-weight: 700; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.range input { padding: 5px 8px; border-radius: 8px; font-size: 13px; }
.range .btn { padding: 6px 14px; border-radius: 999px; }

/* the agents: three per row (OCT, then MCT), the team assistant as one wide strip - no empty cells; the facts sit at the bottom of each card */
.agents { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.agent { display: flex; flex-direction: column; gap: 8px; }
.agent .facts { margin-top: 4px; }
.agent.wide { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 12px 28px; }
.agent.wide > .row { flex: 1 1 260px; }
.agent.wide .facts { margin-top: 0; flex: 1 1 320px; grid-template-columns: repeat(3, auto 1fr); }
@media (max-width: 1100px) { .agents { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .agents { grid-template-columns: 1fr; } .agent.wide { flex-direction: column; align-items: stretch; } }

/* agents page: the agent's numbers in one strip above its chart */
.agent-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.agent-strip .stat { display: grid; gap: 1px; }
.agent-strip .stat span { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.agent-strip .stat b { font-size: 18px; font-weight: 800; }
body[data-page="monthly"] #period-chips, body[data-page="monthly"] #custom-range { display: none !important; }
.nowrap { white-space: nowrap; }
.card-note { margin: 10px 0 0; font-size: 12px; color: var(--muted); max-width: 90ch; }

/* phones: a lone last KPI tile spans the row; a card's note goes under its title; chips never break a label */
.chips button { white-space: nowrap; }
@media (max-width: 640px) {
  .kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .card-head { flex-wrap: wrap; } .card-head .muted { text-align: left; flex-basis: 100%; }
}