:root {
  --ink: #14203a;
  --ink-soft: #4a5878;
  --bg: #f5f7fb;
  --card: #ffffff;
  --border: #e3e8f2;
  --brand: #2455ff;
  --brand-dark: #1638b8;
  --brand-soft: #eaf0ff;
  --green: #17925a;
  --red: #d64545;
  --amber: #b5790a;
  --teal: #0f6e56;
  --coral: #993c1d;
  --radius: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.9rem; margin: 0 0 .25rem; }
h2 { font-size: 1.15rem; margin: 0 0 .9rem; }

.sub { color: var(--ink-soft); margin: 0 0 1rem; }
.hint { color: var(--ink-soft); font-size: .88rem; }

/* ---- top nav ---- */
.topnav {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.topnav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 2.5rem;
}
.brand { font-weight: 800; font-size: 1.25rem; color: var(--ink); letter-spacing: -.02em; display: flex; align-items: center; }
.brand:hover { text-decoration: none; }
.brand-logo { height: 22px; width: auto; display: block; }
.navlinks { display: flex; gap: .3rem; }
.navlink {
  color: var(--ink-soft); padding: .5rem .7rem; border-radius: 8px; font-weight: 600; font-size: .93rem;
}
.navlink:hover { background: var(--brand-soft); text-decoration: none; color: var(--brand-dark); }
.navlink.active { background: var(--brand-soft); color: var(--brand-dark); }
.navuser { display: flex; align-items: center; gap: .8rem; font-size: .9rem; color: var(--ink-soft); }

/* Standalone tabs row for logged-in users -- sits right below the identity
   bar (see .territory-switcher below) with nothing else sharing the row,
   now that the brand/workspace/operator identity all live up there. */
.navlinks-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; padding: .6rem 2.5rem; }

/* Tabs row wraps the (centered) tab list plus the global search box, which
   docks to the right edge via absolute positioning so it never disturbs
   the tab list's own centering or drag-to-reorder layout. */
.tabs-row { position: relative; }
.global-search { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); width: 160px; }
.global-search-input {
  width: 100%; height: 28px; padding: 0 .6rem; border: 1px solid var(--border); border-radius: 7px;
  font-size: .78rem; background: var(--bg); color: var(--ink);
}
.global-search-input:focus { outline: none; border-color: var(--brand); background: var(--card); }
.global-search-panel {
  position: absolute; top: calc(100% + 4px); right: 0; width: 260px; max-height: 320px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(20,32,58,.12);
  z-index: 20; padding: .4rem 0;
}
.global-search-cat {
  font-size: .7rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em;
  padding: .5rem .9rem .2rem;
}
.global-search-item { display: block; padding: .4rem .9rem; }
.global-search-item:hover { background: var(--brand-soft); text-decoration: none; }
.global-search-item-label { font-size: .85rem; color: var(--ink); }
.global-search-item-sub { font-size: .74rem; color: var(--ink-soft); }
.global-search-empty { padding: .7rem .9rem; font-size: .82rem; color: var(--ink-soft); }
@media (max-width: 900px) {
  .tabs-row { display: flex; flex-direction: column; }
  .global-search { position: relative; right: auto; top: auto; transform: none; width: 100%; padding: 0 2.5rem .6rem; box-sizing: border-box; }
  .global-search-panel { width: calc(100% - 3rem); left: 1.5rem; right: auto; }
}

/* Identity bar -- a persistent strip above the main nav (see
   views.layout()), shown on every logged-in page regardless of how many
   territories the org has. Combines the app brand, the workspace switcher
   (a "combined" pill for the whole company plus one pill per territory),
   and the operator's name + Log Out, so the tabs row below can be just
   tabs. Deliberately styled as a distinct, darker band so it reads as an
   "overarching account bar" sitting above the regular nav tabs, rather
   than just another row of links. */
.territory-switcher {
  background: var(--ink); padding: .55rem 2.5rem; align-items: center;
  gap: .8rem;
  display: grid; grid-template-columns: 1fr auto 1fr;
}
.territory-switcher-brand { justify-self: start; }
.territory-switcher-center { display: flex; align-items: center; justify-content: center; gap: .4rem; flex-wrap: wrap; }
.brand-on-dark { color: #fff; }
.territory-switch-label { color: rgba(255,255,255,.55); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-right: .3rem; }
.territory-switch-company { color: rgba(255,255,255,.85); font-size: .85rem; font-weight: 700; }
.territory-switch-btn { color: rgba(255,255,255,.8); padding: .4rem .95rem; border-radius: 999px; font-weight: 700; font-size: .85rem; }
.territory-switch-btn:hover { background: rgba(255,255,255,.14); text-decoration: none; color: #fff; }
.territory-switch-btn.active { background: var(--brand); color: #fff; }
.identity-brand { display: flex; flex-direction: column; gap: .05rem; line-height: 1.15; }
.identity-brand-name { font-size: .92rem; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.identity-brand-powered { font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.identity-user {
  justify-self: end; display: flex; align-items: center; gap: .8rem;
  font-size: .88rem; color: rgba(255,255,255,.8); white-space: nowrap;
}
.identity-logout { color: rgba(255,255,255,.8); }
.identity-logout:hover { color: #fff; }

.linkbtn {
  background: none; border: none; color: var(--brand); cursor: pointer;
  font: inherit; padding: 0; text-decoration: underline;
}
.linkbtn.danger { color: var(--red); }

/* ---- layout ---- */
.main { max-width: 1120px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.footer { border-top: 1px solid var(--border); margin-top: 3rem; }
.footer-inner { max-width: 1120px; margin: 0 auto; padding: 1.4rem 1.5rem; color: var(--ink-soft); font-size: .85rem; }

/* ---- hero / landing ---- */
.hero { background: linear-gradient(180deg, var(--brand-soft), var(--bg)); padding: 4.5rem 1.5rem 3.5rem; }
.hero-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.hero-brand { display: flex; flex-direction: column; align-items: center; gap: .3rem; margin-bottom: 2rem; }
.hero-logo { height: 150px; width: auto; margin-top: .1rem; }
.hero h1 { font-size: 2.6rem; letter-spacing: -.02em; }
.hero-sub { font-size: 1.1rem; color: var(--ink-soft); margin: 1.1rem 0 1.8rem; }
.hero-actions { display: flex; gap: .8rem; justify-content: center; }
.hero-note { margin-top: 1.2rem; font-size: .88rem; color: var(--ink-soft); }

.features { padding: 3.5rem 1.5rem; }
.features-inner { max-width: 1000px; margin: 0 auto; }
.features .features-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.feature h3 { margin: 0 0 .4rem; }
.feature p { color: var(--ink-soft); margin: 0; }

.metrics-preview { padding: 0 1.5rem 4rem; }
.metrics-preview h2 { text-align: center; margin-bottom: 1.2rem; }
.metric-grid { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.metric-chip { background: var(--card); border: 1px solid var(--border); padding: .5rem 1rem; border-radius: 999px; font-size: .9rem; font-weight: 600; }
.metric-chip-more { background: transparent; border-style: dashed; color: var(--ink-soft); font-weight: 600; }

/* ---- buttons ---- */
.btn {
  display: inline-block; background: var(--brand); color: #fff; border: none;
  padding: .65rem 1.2rem; border-radius: 9px; font-weight: 700; cursor: pointer; font-size: .95rem;
}
.btn:hover { background: var(--brand-dark); text-decoration: none; }
.btn-lg { padding: .85rem 1.6rem; font-size: 1rem; }
.btn-sm { padding: .45rem .9rem; font-size: .85rem; }
.btn-full { width: 100%; margin-top: .3rem; }
.btn-ghost { background: transparent; color: var(--brand); border: 1.5px solid var(--brand); }
.btn-ghost:hover { background: var(--brand-soft); }
.btn-secondary { background: transparent; color: var(--ink); border: 1.5px solid var(--border); }
.btn-secondary:hover { background: var(--bg); text-decoration: none; }

/* ---- auth ---- */
.auth-wrap { display: flex; justify-content: center; padding: 2rem 0; }
.auth-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 2rem; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: .9rem;
}
.auth-sub { color: var(--ink-soft); margin: -.5rem 0 .3rem; font-size: .9rem; }
.auth-alt { text-align: center; font-size: .9rem; color: var(--ink-soft); margin: .2rem 0 0; }
.auth-alt.small { font-size: .78rem; }

/* ---- forms ---- */
label { display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; font-weight: 600; color: var(--ink-soft); }
input, select, textarea {
  font: inherit; padding: .6rem .7rem; border: 1px solid var(--border); border-radius: 8px;
  color: var(--ink); background: #fff; line-height: 1.3;
}
/* Browsers give <select> its own native chrome (height, vertical centering,
   built-in arrow) that doesn't fully respect the padding/border above the
   way a plain text <input> does -- left alone, a dropdown like Category or
   Territory renders visibly shorter/thinner than the Date or Amount ($)
   fields sitting right next to it in the same form row, even though both
   have identical CSS. Stripping the native appearance and drawing our own
   arrow makes every field in a form row the same height, so titles line up
   edge to edge. */
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 2.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234a5878' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 8 10 13 15 8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .65rem center; background-size: .9rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
input:disabled { background: var(--bg); color: var(--ink-soft); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .8rem; }
.form-card { display: flex; flex-direction: column; gap: .9rem; }
.field-group-label {
  margin: .2rem 0 -.3rem; font-size: .82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--brand-dark);
}
.custom-fields-block {
  border: 1.5px solid var(--border); border-top: 3px solid var(--brand);
  border-radius: var(--radius); background: var(--bg);
  padding: 1.15rem 1.3rem 1.35rem; margin-top: 1.1rem;
  display: flex; flex-direction: column; gap: .7rem;
  scroll-margin-top: 7.5rem;
}
.custom-fields-block h3 {
  margin: 0 0 .1rem; font-size: 1.02rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; color: var(--brand-dark);
}
/* ---- long onboarding forms: sticky section jump-nav ---- */
/* Pairs with a long .form-card made of stacked .custom-fields-block
   sections (e.g. the Roster employee profile) -- a sticky sidebar of
   anchor links to each section, so a long form doesn't require scrolling
   blind to find the right part. */
.form-layout { display: flex; align-items: flex-start; gap: 1.5rem; }
.form-layout > .form-card { flex: 1 1 auto; min-width: 0; }
.form-jump-nav {
  position: sticky; top: 7rem; flex-shrink: 0; width: 208px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .15rem;
  max-height: calc(100vh - 8.5rem); overflow-y: auto;
}
.form-jump-nav-label {
  margin: 0 0 .3rem; font-size: .76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-soft);
}
.form-jump-nav a {
  color: var(--ink-soft); font-size: .86rem; font-weight: 600; padding: .38rem .55rem;
  border-radius: 7px; line-height: 1.3;
}
.form-jump-nav a:hover { background: var(--brand-soft); color: var(--brand-dark); text-decoration: none; }
.form-layout h2[id] { scroll-margin-top: 7.5rem; }
/* Sections that render outside .form-layout (History, License photo,
   Documents -- each its own multipart form, since they can't nest inside
   the main employee-form) still get jumped to via anchor links, so they
   need the same sticky-header offset the rule above gives sections inside
   .form-layout. */
section.card[id] { scroll-margin-top: 7.5rem; }
@media (max-width: 960px) {
  .form-layout { flex-direction: column; }
  .form-jump-nav {
    position: static; width: 100%; max-height: none;
    flex-direction: row; flex-wrap: wrap; gap: .3rem;
  }
  .form-jump-nav-label { width: 100%; }
}

.checkbox-label { flex-direction: row; align-items: center; gap: .5rem; }
.checkbox-row { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.schedule-day-checkbox { font-weight: 600; }

/* ---- schedule grid (Roster > Schedule) ---- */
.schedule-grid th { white-space: nowrap; }
.schedule-day-date { font-weight: 400; color: var(--ink-soft); font-size: .78rem; }
.schedule-driver-cell { font-weight: 700; white-space: nowrap; }
.schedule-cell { min-width: 108px; text-align: center; }
.schedule-cell a { display: inline-block; }
.schedule-cell-empty { color: var(--ink-soft); text-decoration: none; }
.schedule-cell-empty:hover { text-decoration: underline; }
.schedule-cell-sub { font-size: .72rem; color: var(--ink-soft); margin-top: .15rem; }
.checkbox-label input { width: auto; }
.terms-text { max-height: 55vh; overflow-y: auto; padding-right: .5rem; }
.terms-text p { margin: 0 0 1rem; line-height: 1.55; }
.terms-text p:first-child { font-weight: 700; }
.inline-form { display: flex; gap: .4rem; align-items: center; }
.inline-form input { width: 5.5rem; padding: .35rem .5rem; }
.actions-cell { display: flex; gap: .6rem; align-items: center; white-space: nowrap; }

/* ---- license photo (Roster employee profile) ---- */
.license-photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.license-photo-card {
  display: flex; flex-direction: column; gap: .5rem;
  border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem;
  background: var(--bg);
}
.license-photo-card h4 { margin: 0; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); }
.license-photo-preview {
  display: block; width: 100%; max-height: 180px; object-fit: contain;
  border-radius: 8px; border: 1px solid var(--border); background: var(--card);
}
.license-photo-placeholder {
  display: flex; align-items: center; justify-content: center;
  height: 100px; border: 1px dashed var(--border); border-radius: 8px;
  color: var(--ink-soft); font-size: .85rem; background: var(--card);
}

/* ---- collapsible cards (details/summary, no JS needed) ---- */
.collapse-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 1.5rem; overflow: hidden;
}
.collapse-card summary {
  cursor: pointer; padding: 1rem 1.4rem; font-weight: 700; color: var(--brand-dark);
  list-style: none; display: flex; align-items: center; gap: .5rem;
}
.collapse-card summary::-webkit-details-marker { display: none; }
.collapse-card summary::before { content: "+"; font-size: 1.1rem; font-weight: 800; }
.collapse-card[open] summary::before { content: "–"; }
.collapse-card[open] summary { border-bottom: 1px solid var(--border); }
.collapse-card summary:hover { background: var(--brand-soft); }
.form-card-inner { padding: 1.4rem; display: flex; flex-direction: column; gap: .9rem; }
.full-width { width: 100%; }

/* ---- compare page ---- */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.compare-panel { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; display: flex; flex-direction: column; gap: .7rem; }
.compare-panel h3 { margin: 0; font-size: 1rem; }
.compare-panel select[multiple] { min-height: 5.5rem; }
@media (max-width: 860px) {
  .compare-grid { grid-template-columns: 1fr; }
}

/* ---- cards / grid ---- */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.4rem; margin-bottom: 1.5rem;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
.page-head { margin-bottom: 1.2rem; }

/* ---- stat cards ---- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.stat-label { font-size: .82rem; color: var(--ink-soft); font-weight: 600; margin-bottom: .35rem; }
.stat-value { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.change { font-size: .82rem; font-weight: 700; }
.change.up { color: var(--green); }
.change.down { color: var(--red); }
.change.flat { color: var(--ink-soft); }
.empty-card { grid-column: 1 / -1; color: var(--ink-soft); background: var(--card); border: 1px dashed var(--border); padding: 2rem; text-align: center; border-radius: var(--radius); }

/* ---- profitability trends: scorecard + unit drill-down charts ---- */
.scorecard-table th, .scorecard-table td { text-align: center; white-space: nowrap; }
.scorecard-table th:first-child, .scorecard-table td:first-child { text-align: left; white-space: normal; }
.trend-change { display: block; font-size: .74rem; margin-top: .15rem; }
.trend-chart-legend { display: flex; align-items: center; gap: .3rem; margin-bottom: .4rem; }
.trend-legend-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: .6rem; }
.trend-legend-swatch:first-child { margin-left: 0; }
.trend-chart { display: block; margin-bottom: 1.4rem; }

/* ---- dashboard redesign: color-coded hero category cards ---- */
.dash-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.dash-card {
  background: var(--card); border: 1px solid var(--border); border-top: 3px solid var(--brand);
  border-radius: var(--radius); padding: 1.1rem 1.2rem;
}
.dash-cat-deliveries { border-top-color: var(--brand); }
.dash-cat-efficiency { border-top-color: var(--teal); }
.dash-cat-financial { border-top-color: var(--coral); }
.dash-card-head { margin-bottom: .6rem; }
.dash-cat-deliveries .dash-cat-label { color: var(--brand); }
.dash-cat-efficiency .dash-cat-label { color: var(--teal); }
.dash-cat-financial .dash-cat-label { color: var(--coral); }
.dash-cat-label { font-size: .82rem; font-weight: 700; }
.dash-hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; margin-bottom: .1rem; }
.dash-hero-value { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }
.sparkline { flex-shrink: 0; }
.dash-hero-sub { display: flex; align-items: center; gap: .5rem; margin-bottom: .8rem; }
.dash-substat-list { border-top: 1px solid var(--border); padding-top: .5rem; display: flex; flex-direction: column; gap: .3rem; }
.dash-substat-row { display: flex; justify-content: space-between; font-size: .86rem; }
.dash-substat-row span:first-child { color: var(--ink-soft); }
.dash-substat-row span:last-child { font-weight: 700; }
.dash-customize { margin-top: .8rem; }
.dash-customize summary { font-size: .82rem; padding: .5rem .7rem; }
.dash-picker-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .35rem 0; border-bottom: 1px solid var(--border);
}
.dash-picker-row:last-of-type { border-bottom: none; }
.radio-label { flex-direction: row; align-items: center; gap: .5rem; }
.radio-label input { width: auto; }

/* ---- tabs ---- */
.tabs { display: flex; gap: .4rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.tab { padding: .6rem .9rem; font-weight: 700; color: var(--ink-soft); border-bottom: 2px solid transparent; }
.tab.active { color: var(--brand-dark); border-bottom-color: var(--brand); }
.tab:hover { text-decoration: none; color: var(--brand-dark); }

/* Red count badge on a tab -- e.g. Compliance's per-tab expired/due-soon
   count, so you can see what needs attention without opening every tab. */
.tab-badge {
  display: inline-block; min-width: 1.15rem; padding: 0 .35rem; margin-left: .3rem;
  border-radius: 999px; background: var(--red); color: #fff; font-size: .7rem;
  font-weight: 700; line-height: 1.3rem; text-align: center; vertical-align: middle;
}

/* ---- drag-to-reorder (pilot: Compliance's tab bar, Reports' column
   picker) -- see the initDragList doc comment in app.js for the
   data-order-input / data-save-url convention. A draggable="true" tab or
   list item gets a grab cursor and lifts/fades slightly while it's the one
   being dragged, so the reorder reads as physical rather than just a
   sudden jump when it's dropped. */
.drag-list [draggable="true"] { cursor: grab; }
.drag-list [draggable="true"]:active { cursor: grabbing; }
.drag-list [draggable="true"].dragging { opacity: .4; }

.tabs.drag-list .tab { user-select: none; }
.navlinks-row.drag-list .navlink { user-select: none; }

ul.drag-list {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem;
}
.drag-list .drag-item {
  display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card);
}
.drag-list .drag-item .checkbox-label { margin: 0; }
.drag-handle {
  color: var(--ink-soft); font-weight: 700; line-height: 1; padding: 0 .15rem;
}

/* ---- column drag-to-reorder (rollout of the tab drag-list above to whole
   table columns) -- see the wireColDragTable doc comment in app.js for the
   col-drag-table / data-col convention. Each draggable header cell gets the
   same grab cursor and drag-lift treatment as the tab bars, so both kinds
   of reordering feel like the same gesture site-wide. */
.col-drag-table th[draggable="true"] { cursor: grab; user-select: none; }
.col-drag-table th[draggable="true"]:active { cursor: grabbing; }
.col-drag-table th[draggable="true"].dragging { opacity: .4; }

/* Finance sub-nav (Payroll / Profitability) -- a step up from the period
   tabs below it, so the two tab bars read as distinct levels. */
.finance-tabs { border-bottom: none; margin-bottom: 1.4rem; gap: .6rem; }
.finance-tabs .tab {
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  padding: .5rem 1.1rem; border-bottom: 1px solid var(--border);
}
.finance-tabs .tab.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---- profitability ---- */
.stat-big { font-size: 2.6rem; font-weight: 800; letter-spacing: -.02em; margin: .3rem 0; }
.stat-big .change { font-size: inherit; font-weight: inherit; }
.attention-list { margin: 0; padding-left: 1.2rem; }
.attention-list li { margin-bottom: .5rem; line-height: 1.4; }

/* ---- dashboard compliance alert + reliability panel ---- */
.compliance-alert { background: var(--card); border: 3px solid var(--red); border-radius: var(--radius); padding: .6rem .85rem; margin-bottom: 1.2rem; max-width: 26rem; }
.compliance-alert-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; }
.compliance-alert-head strong { font-size: .82rem; color: var(--red); }
.compliance-alert-count { color: var(--red); font-weight: 700; }
.compliance-alert-head a { font-size: .8rem; }
.compliance-alert .attention-list { font-size: .78rem; }
.compliance-alert .attention-list li { margin-bottom: .3rem; }
.watch-section { border-top: 1px solid var(--border); padding-top: .8rem; margin-top: .2rem; }
.watch-row { display: flex; justify-content: space-between; font-size: .88rem; padding: .2rem 0; }
.watch-all-clear { color: var(--green); font-size: .88rem; margin: 0; }

/* ---- bulk-select checkboxes + action bar ---- */
.bulk-col { width: 2rem; text-align: center; }
.bulk-form { margin: 0; }

/* ---- table ---- */
/* The scroll-shadow gradients below are the classic CSS-only "carousel
   shadow" trick: two gradients scroll WITH the table content (background-
   attachment: local) and mask the two gradients that stay fixed to the
   container edges (background-attachment: scroll). The fixed shadow only
   peeks out from under the scrolling mask when there's more table to the
   left/right to scroll to, so it appears and disappears on its own as you
   scroll -- no JS needed. Requires an explicit background-color to match
   whatever sits behind it (the white card background here). */
.table-wrap {
  overflow-x: auto;
  background-color: var(--card);
  background-image:
    linear-gradient(to right, var(--card) 50%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, var(--card) 50%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(20, 32, 58, .16), rgba(20, 32, 58, 0)),
    linear-gradient(to left, rgba(20, 32, 58, .16), rgba(20, 32, 58, 0));
  background-position: left, right, left, right;
  background-repeat: no-repeat;
  background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
.scroll-hint { display: flex; align-items: center; gap: .35rem; color: var(--ink-soft); font-size: .82rem; margin: 0 0 .5rem; }
/* border-collapse: separate (not collapse) is required here -- with collapsed
   borders, "position: sticky" on a <th> silently fails to stick in every
   major browser once you scroll a table's own body, which is exactly the
   "sticky" bug behavior we want to avoid. Since every th/td only sets a
   border-bottom (never border-top), border-spacing: 0 gives the identical
   collapsed look with none of the double-border risk that "separate" can
   otherwise introduce. */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--ink-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
tbody tr:hover td { background: var(--bg); }
.total-row td { font-weight: 700; border-top: 2px solid var(--border); }
/* Now that the table uses border-collapse: separate (see above), the row
   right before a .total-row would otherwise show its own 1px border-bottom
   immediately next to the total row's 2px border-top, reading as a faint
   double line where collapsed borders used to just merge into one. Drop
   that one border so the total row's divider is the only line. */
tr:has(+ .total-row) td, tr:has(+ .total-row) th { border-bottom: none; }

/* Sortable column headers (Daily Log's "Recent entries", Reports' main
   table) -- click a th[data-sort] to re-sort the rows by that column,
   handled entirely client-side in app.js. The arrow only appears on the
   currently-sorted column, pointing the direction it's sorted. */
table.sortable thead th[data-sort] {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 1.15rem;
}
table.sortable thead th[data-sort]:hover { color: var(--ink); background: var(--bg); }
table.sortable thead th[data-sort]::after {
  content: "\21C5"; /* small up/down arrows -- neutral "sortable, not sorted" hint */
  position: absolute;
  right: .4rem;
  opacity: .35;
  font-size: .85em;
}
table.sortable thead th[data-sort].sorted-asc::after { content: "\2191"; opacity: 1; color: var(--brand); }
table.sortable thead th[data-sort].sorted-desc::after { content: "\2193"; opacity: 1; color: var(--brand); }

/* Toolbar row that sits directly above a .table-wrap.table-scroll, holding
   the horizontal-scroll hint (where present) and the full-screen button. */
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 0 .5rem; }
.table-toolbar .scroll-hint { margin: 0; }
.table-expand-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  background: transparent; color: var(--brand); border: 1.5px solid var(--border);
  padding: .35rem .75rem; border-radius: 8px; font-size: .82rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.table-expand-btn:hover { background: var(--brand-soft); border-color: var(--brand); }

/* Bounded "hovering window" tables: the page itself doesn't need to scroll
   to see all the rows -- the table scrolls inside its own fixed-height box
   instead, and the header row stays put (position: sticky) the whole time
   so column titles are always visible. Added on top of .table-wrap, which
   already handles the horizontal scroll shadows -- since .table-wrap sets
   overflow-x, the box is already a scroll container on both axes, so both
   scrollbars stay visible as you scroll around inside it. */
.table-scroll { max-height: 65vh; overflow-y: auto; }
.table-scroll thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--card);
  box-shadow: inset 0 -1px 0 var(--border);
}
/* table.sortable thead th[data-sort] (above) sets position: relative with
   higher specificity than the rule just above, so on every sortable table
   -- nearly all of them -- that "relative" was silently winning over this
   "sticky" and the header would scroll away with the body. Restate it here
   with matching specificity so sticky wins instead. */
.table-scroll table.sortable thead th[data-sort] {
  position: sticky; top: 0; z-index: 2;
  background: var(--card);
  box-shadow: inset 0 -1px 0 var(--border);
}

/* Full-screen mode (triggered by the "Full screen" button, via the native
   Fullscreen API in app.js): the 65vh height cap no longer makes sense
   once the table is the only thing on screen, so let it fill the whole
   monitor instead, with a little padding since there's no surrounding
   card to give it breathing room anymore. */
.table-scroll:fullscreen,
.table-scroll:-webkit-full-screen {
  max-height: 100vh;
  height: 100vh;
  padding: 1rem;
  background: var(--card);
}

/* Force always-visible scrollbars on these table windows instead of the
   thin, auto-hiding overlay bars macOS/mobile browsers show by default --
   so it's obvious at a glance that a table scrolls, even before you touch
   it. Styling ::-webkit-scrollbar switches Chrome/Safari/Edge out of the
   fading "overlay" style entirely; scrollbar-width/-color do the same
   for Firefox. */
.table-scroll {
  scrollbar-width: auto;
  scrollbar-color: rgba(20, 32, 58, .38) var(--bg);
}
.table-scroll::-webkit-scrollbar {
  width: 13px;
  height: 13px;
}
.table-scroll::-webkit-scrollbar-track {
  background: var(--bg);
}
.table-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(20, 32, 58, .38);
  border-radius: 8px;
  border: 3px solid var(--bg);
}
.table-scroll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(20, 32, 58, .58);
}
.table-scroll::-webkit-scrollbar-corner {
  background: var(--bg);
}

.save-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--card);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(20, 32, 58, .12);
}
.save-bar-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: .85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.save-bar-label {
  color: var(--ink-soft);
  font-size: .85rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.save-bar .btn {
  flex-shrink: 0;
  padding: .55rem 1.6rem;
}
.save-bar-spacer { height: 72px; }
@media (max-width: 640px) {
  .save-bar-label { display: none; }
  .save-bar-inner { justify-content: center; }
}

.empty { text-align: center; color: var(--ink-soft); padding: 1.5rem !important; }

/* Alternating background per calendar day on the Reports table, so a run
   of entries for the same day reads as one visual group and the eye can
   spot where one day ends and the next begins. */
.day-band { background: var(--bg); }

/* ---- pills / alerts ---- */
.pill { padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.pill-on { background: #e6f7ee; color: var(--green); }
.pill-off { background: #f1f1f4; color: var(--ink-soft); }
.pill-warn { background: #fdf3e0; color: var(--amber); }
.pill-danger { background: #fdeaea; color: var(--red); }
.alert { background: #fdeaea; color: var(--red); border: 1px solid #f3c6c6; padding: .7rem 1rem; border-radius: 9px; margin-bottom: 1rem; font-size: .9rem; }
.alert-success { background: #e6f7ee; color: var(--green); border-color: #bfe9d3; }
.alert-info { background: var(--brand-soft); color: var(--brand-dark); border-color: #c9d9ff; }

@media (max-width: 860px) {
  .grid-2, .form-row, .form-row-3, .features .features-inner { grid-template-columns: 1fr; }
  .topnav-inner { flex-wrap: wrap; gap: .6rem; }
  .navlinks { order: 3; width: 100%; overflow-x: auto; }
  .territory-switcher { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
  .territory-switcher-brand, .identity-user { justify-self: auto; }
  .territory-switcher-center { justify-content: flex-start; }
  .navlinks-row { overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; }
}

/* ---- vehicles page: subtle add-vehicle link + per-truck accordion cards ---- */
.page-head-split { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.subtle-link { color: var(--ink-soft); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.subtle-link:hover { color: var(--brand-dark); }

.vehicle-card-list { display: flex; flex-direction: column; gap: 1rem; }
.vehicle-card { margin-bottom: 0; }
.vehicle-card summary {
  justify-content: space-between; flex-wrap: wrap; gap: .5rem .8rem;
}
.vehicle-card-title { font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: .5rem; }
.vehicle-card-meta { color: var(--ink-soft); font-weight: 600; font-size: .88rem; }
.vehicle-card-body { padding: 0 1.4rem 1.4rem; }
.vehicle-card-panel { display: flex; flex-direction: column; gap: .6rem; }
.vehicle-card-panel h3 {
  margin: 0; font-size: .95rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .03em; color: var(--brand-dark);
}
.vehicle-card-panel h4 { margin: .4rem 0 0; font-size: .88rem; font-weight: 700; color: var(--ink-soft); }
.vehicle-card-panel .form-card { gap: .7rem; }

.detail-list { display: flex; flex-direction: column; gap: .5rem; margin: 0; }
.detail-list > div { display: grid; grid-template-columns: 130px 1fr; gap: .6rem; align-items: baseline; }
.detail-list dt { margin: 0; font-size: .82rem; color: var(--ink-soft); font-weight: 600; }
.detail-list dd { margin: 0; font-size: .92rem; }

.log-toggle { margin-bottom: 0; }
.log-toggle summary { padding: .5rem 0; font-weight: 600; color: var(--brand); font-size: .9rem; }
.log-toggle summary:hover { background: none; text-decoration: underline; }
.log-toggle[open] summary { border-bottom: none; }

/* ---- consistent "+ Add X" pattern: a small button in a section's header
   row (next to its "Current ___" heading) that expands the add/edit form
   in place, above the table -- same visual weight as the standalone
   Roster/Vehicles "+ Add employee"/"+ Add vehicle" links, but inline since
   these forms are short. The [open] rule makes the <details> break onto
   its own full-width line below the heading via the flex order/basis
   trick, so the expanded form isn't squeezed into the header row's width. */
.section-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; margin-bottom: .9rem; }
.section-head-row h2 { margin: 0; }
.add-toggle { margin: 0; }
.add-toggle > summary { list-style: none; }
.add-toggle > summary::-webkit-details-marker { display: none; }
.add-toggle[open] { flex-basis: 100%; order: 3; }
.add-toggle[open] > summary { margin-bottom: 1rem; }
.add-toggle-body { padding-top: .2rem; }

@media (max-width: 860px) {
  .page-head-split { flex-direction: column; }
  .detail-list > div { grid-template-columns: 1fr; gap: .1rem; }
  .section-head-row { flex-direction: column; align-items: stretch; }
}

/* ---- export / print actions ---- */
.page-actions { display: flex; gap: .6rem; align-items: center; margin: 1rem 0; flex-wrap: wrap; }
.centered-actions {
  display: flex; justify-content: center; align-items: center;
  gap: 2.5rem; margin-top: .5rem; flex-wrap: wrap;
}
.centered-hint { text-align: center; margin: 1.25rem 0 0; }

/* ---- print ---- */
@media print {
  .topnav, .footer, .no-print, .collapse-card summary, .tabs, .actions-cell { display: none !important; }
  .collapse-card { border: none; margin: 0; }
  .main { max-width: 100%; padding: 0; }
  body { background: #fff; }
  .card, .stat-card, .dash-card { border: 1px solid #ccc; box-shadow: none; break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
  table { font-size: .8rem; }
  .btn, .btn-ghost, .linkbtn { display: none !important; }
  /* .table-scroll's fixed-height scroll box (see the "hovering window"
     comment above) is a screen-only convenience -- on paper there's no
     scrollbar to reveal the rest, so whatever rows happened to be visible
     at print time would silently be all that printed. Releasing the cap
     here means every row in the table prints, full stop, regardless of
     where the window was scrolled. */
  .table-scroll { max-height: none !important; overflow: visible !important; }
  .table-scroll thead th { position: static; box-shadow: none; }

  /* Reports' column count varies with how many optional metrics are
     checked in "Customize columns" -- 16 fixed columns is what fits at
     the normal print size above, so past that we shrink font/padding in
     a few steps to keep everything on one printed landscape page without
     making anyone narrow down their columns just to print. See
     views._print_density_class() for which tier gets picked. */
  .table-wrap.print-snug table { font-size: .68rem; }
  .table-wrap.print-snug th, .table-wrap.print-snug td { padding: .35rem .4rem; }
  .table-wrap.print-tight table { font-size: .56rem; }
  .table-wrap.print-tight th, .table-wrap.print-tight td { padding: .25rem .3rem; }
  .table-wrap.print-dense table { font-size: .46rem; }
  .table-wrap.print-dense th, .table-wrap.print-dense td { padding: .18rem .22rem; }
}

/* AI document intake */
.ai-intake { border: 1px dashed var(--brand, #2f6fed); background: var(--brand-soft); margin-bottom: 1rem; }
.ai-summary { background: #f7f9fc; border: 1px solid #dfe5ee; border-radius: 9px; padding: .7rem 1rem; margin-bottom: 1rem; }
.ai-summary h3 { margin: 0 0 .3rem; }

/* AI assistant + insights */
.ai-subtabs { display: flex; gap: .4rem; }
.chat-log { max-height: 55vh; overflow-y: auto; border: 1px solid #dfe5ee; border-radius: 9px; padding: .8rem; margin: .8rem 0; background: #fbfcfe; }
.chat-msg { margin-bottom: .8rem; }
.chat-who { font-size: .78rem; color: var(--ink-soft); margin-bottom: .15rem; }
.chat-user .chat-body { background: var(--brand-soft); border-radius: 9px; padding: .5rem .75rem; display: inline-block; }
.chat-assistant .chat-body { background: #fff; border: 1px solid #e3e8f0; border-radius: 9px; padding: .55rem .8rem; line-height: 1.5; }
.chat-form { display: flex; gap: .5rem; margin-bottom: .4rem; }
.chat-form input { flex: 1; }
.chip-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.chip-q { border: 1px solid #c9d9ff; background: var(--brand-soft); border-radius: 999px; padding: .3rem .75rem; cursor: pointer; font-size: .85rem; }
.finding { border-left: 4px solid #c9d0dc; padding: .2rem .8rem; margin: .6rem 0; }
.finding-high { border-left-color: var(--red, #c0392b); }
.finding-medium { border-left-color: #e6a23c; }
.finding h3 { margin: .2rem 0; font-size: 1rem; }
.finding p { margin: .2rem 0; }
.proposal { border: 1px solid #dfe5ee; border-radius: 9px; padding: .6rem .9rem; margin: .6rem 0; }
.proposal-done { opacity: .8; background: #f7f9fc; }
.card-inner { background: #f7f9fc; border: 1px solid #dfe5ee; border-radius: 9px; padding: .7rem 1rem; margin: .8rem 0; }

/* Printable driver training record */
.tr-form { max-width: 780px; margin: 0 auto; }
.tr-head { text-align: center; margin-bottom: .6rem; }
.tr-org { font-weight: 700; font-size: 1.05rem; }
.tr-table { width: 100%; border-collapse: collapse; margin-bottom: .6rem; }
.tr-table td, .tr-matrix th, .tr-matrix td { border: 1px solid #bbb; padding: .35rem .6rem; }
.tr-status { white-space: nowrap; width: 11rem; }
.tr-done { font-weight: 600; }
.tr-matrix { border-collapse: collapse; width: 100%; font-size: .85rem; }
.tr-matrix th { background: #f1f3f7; font-size: .75rem; }
.tr-cell { text-align: center; }
.tr-sign { display: flex; gap: 2rem; margin-top: 2.2rem; }
.tr-sign > div { flex: 1; font-size: .8rem; }
.tr-line { display: block; border-bottom: 1px solid #000; height: 1.8rem; margin-bottom: .2rem; }
.tr-form h3 { margin: .8rem 0 .3rem; }
.tr-foot { margin-top: 1.2rem; }
@media print { .tr-form h3 { break-after: avoid; } .tr-table, .tr-sign { break-inside: avoid; } .tr-matrix { font-size: .65rem; } }

/* Signed paperwork */
.signed-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 0; border-top: 1px solid #e3e8f0; flex-wrap: wrap; }
.signed-label { flex: 1 1 18rem; }
.signed-form { display: flex; gap: .5rem; align-items: center; }

.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { margin: .15rem 0; }

.next-step { background: #f2f7f2; border-left: 3px solid #3a8f4a; padding: .5rem .75rem; margin: .5rem 0 1rem; border-radius: 4px; }
.getting-started { background: #f2f7f2; border: 1px solid #cfe3d2; border-radius: 8px; padding: .8rem 1rem; margin: 0 0 1rem; }
.getting-started ul { list-style: none; margin: .4rem 0 0; padding: 0; }
.getting-started li { margin: .25rem 0; }
.getting-started .gs-done { color: #5b7a60; text-decoration: line-through; }

.inline-form { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: .25rem 0; }
.inline-form input[type=text] { min-width: 9rem; }
.alert-warn { background: #fff4e0; border-left: 4px solid #e69500; padding: .6rem .9rem; margin: .5rem 0; border-radius: 4px; }