/* Daily Build — all styles (extracted from single-file build) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@500;600;700&family=Nunito:wght@700;800&family=Roboto:wght@400;500;600&family=Work+Sans:wght@300;400;500;600&family=Roboto+Mono:wght@400;500&display=swap');

/*  THEME VARIABLES  */
:root {
  /* Dark mode (default) */
  --bg:       #0b0b0c;
  --surface:  #141416;
  --surface2: #1c1c1f;
  --surface3: #232327;
  --border:   #2b2b30;
  --border2:  #3a3a41;
  --accent:   #ece6d9;   /* cream — selected states + primary actions */
  --accent-ink:#17171a;  /* text that sits on --accent */
  --accent-dim:rgba(236,230,217,.10);
  --green:    #63c98a;
  --yellow:   #e0b455;
  --red:      #ef6b62;
  --orange:   #e39a52;
  --purple:   #b79bf0;
  --text:     #f3f1ed;
  --text2:    #a5a49f;
  --muted:    #78777c;
  --row-alt:  rgba(28,28,31,0.55);
  --row-hover:rgba(43,43,48,0.55);
  --shadow:   0 1px 2px rgba(0,0,0,0.5);
  --shadow-lg:0 18px 48px rgba(0,0,0,.55);
  --r-card:   16px;
  --r-ctl:    10px;
  --mono: 'Roboto Mono', monospace;
  --sans: 'Inter', system-ui, sans-serif;
  --header: 'Inter', system-ui, sans-serif;
  --subheader: 'Inter', system-ui, sans-serif;
}

[data-theme="light"] {
  --bg:       #eceae5;
  --surface:  #ffffff;
  --surface2: #f4f2ee;
  --surface3: #e9e6e0;
  --border:   #ddd9d2;
  --border2:  #c7c2b9;
  --accent:   #1c1c1f;
  --accent-ink:#fdfcfa;
  --accent-dim:rgba(28,28,31,.07);
  --green:    #2f8f57;
  --yellow:   #9a6b12;
  --red:      #c53a31;
  --orange:   #a35a17;
  --purple:   #6c4bc4;
  --text:     #1a1a1c;
  --text2:    #5c5b58;
  --muted:    #86847f;
  --row-alt:  rgba(244,242,238,0.7);
  --row-hover:rgba(221,217,210,0.45);
  --shadow:   0 1px 2px rgba(0,0,0,0.06);
  --shadow-lg:0 18px 44px rgba(0,0,0,.16);
  --r-card:   16px;
  --r-ctl:    10px;
  --mono: 'Roboto Mono', monospace;
  --sans: 'Inter', system-ui, sans-serif;
  --header: 'Inter', system-ui, sans-serif;
  --subheader: 'Inter', system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}

body {
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.5;
  min-height:100vh;
  display:block;
  -webkit-font-smoothing:antialiased;
}

/* ══════════ APP BAR (top nav with dropdowns) ══════════ */
.appbar {
  position:sticky; top:0; z-index:60;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:10px 20px;
  display:flex; align-items:center; gap:18px;
}
.appbar-brand { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo-mark {
  font-family:var(--header) !important;
  font-size:18px; font-weight:700;
  color:var(--text);
  letter-spacing:-.4px; text-transform:none;
  white-space:nowrap;
}
.brand-dot { width:9px; height:9px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.logo-sub, #company-subtitle {
  font-size:10px; color:var(--muted);
  text-transform:uppercase; letter-spacing:1.1px;
  font-family:var(--sans); font-weight:600;
}

/* primary nav */
.mainnav { display:flex; align-items:center; gap:2px; flex:1; min-width:0; }
.navbtn {
  display:inline-flex; align-items:center; gap:5px;
  background:transparent; border:1px solid transparent;
  border-radius:99px; padding:7px 14px;
  font-family:var(--sans); font-size:13.5px; font-weight:500;
  color:var(--text2); cursor:pointer; white-space:nowrap;
  transition:background .15s, color .15s;
}
.navbtn:hover { color:var(--text); background:var(--surface2); }
.navbtn.active { color:var(--text); font-weight:600; background:var(--surface3); }
.navbtn .caret { font-size:9px; opacity:.6; transition:transform .18s; }
.navbtn[aria-expanded="true"] .caret { transform:rotate(180deg); }
.navgroup { position:relative; }
.navmenu {
  position:absolute; top:calc(100% + 8px); left:0; z-index:70;
  min-width:190px; padding:6px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; box-shadow:var(--shadow-lg);
  display:none;
}
.navgroup.open .navmenu { display:block; }
.navmenu button {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; text-align:left;
  background:transparent; border:0; border-radius:10px;
  padding:9px 12px; cursor:pointer;
  font-family:var(--sans); font-size:13.5px; color:var(--text2);
}
.navmenu button:hover { background:var(--surface2); color:var(--text); }
.navmenu button.active { background:var(--accent); color:var(--accent-ink); font-weight:600; }

/* right-hand cluster */
.appbar-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.iconbtn {
  width:34px; height:34px; border-radius:50%;
  background:var(--surface2); border:1px solid var(--border);
  color:var(--text2); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; line-height:1; transition:all .15s;
}
.iconbtn:hover { color:var(--text); border-color:var(--border2); }
.userchip {
  display:flex; align-items:center; gap:9px;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:99px; padding:4px 12px 4px 4px;
}
.userchip .av {
  width:28px; height:28px; border-radius:50%;
  background:var(--accent); color:var(--accent-ink);
  display:grid; place-items:center;
  font-size:11.5px; font-weight:700; letter-spacing:.2px;
}
.userchip .who { line-height:1.15; min-width:0; }
.userchip .who b { display:block; font-size:12.5px; font-weight:600; color:var(--text);
  max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.userchip .who span { display:block; font-size:10.5px; color:var(--muted); }
.navtoggle { display:none; }

/* mobile drawer */
@media (max-width:1080px) {
  .appbar { padding:10px 14px; gap:10px; flex-wrap:wrap; }
  .navtoggle { display:inline-flex; order:-1; }
  .mainnav {
    order:10; flex-basis:100%; display:none;
    flex-direction:column; align-items:stretch; gap:2px;
    padding-top:8px; margin-top:8px; border-top:1px solid var(--border);
    max-height:70vh; overflow-y:auto;
  }
  body.nav-open .mainnav { display:flex; }
  .navbtn { border-radius:12px; justify-content:space-between; padding:12px 14px; font-size:15px; }
  .navgroup { position:static; }
  .navmenu {
    position:static; display:none; min-width:0;
    box-shadow:none; border:0; border-radius:0;
    padding:2px 0 6px 12px; margin:0;
    background:transparent;
  }
  .navgroup.open .navmenu { display:block; }
  .navmenu button { padding:11px 12px; font-size:14px; }
  .userchip .who { display:none; }
  .appbar-actions { margin-left:auto; }
}

/*  MAIN  */
.main { margin-left:0; display:flex; flex-direction:column; min-height:calc(100vh - 60px); } /* 60px = appbar height; 56 left a 4px scrollbar on every page */
.topbar {
  padding:20px 24px 0;
  display:flex; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
}
.page-title { font-size:22px; font-weight:600; letter-spacing:-.5px; }
.page-subtitle { font-size:12.5px; color:var(--text2); margin-top:1px; }
.topbar-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.subtabs { display:flex; gap:6px; flex-wrap:wrap; }
@media (max-width:640px){
  .topbar { padding:16px 14px 0; }
  .page-title { font-size:19px; }
  .subtabs { width:100%; overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px; }
}

/*  THEME TOGGLE  */
.theme-toggle {
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:20px;
  padding:4px 8px;
  cursor:pointer;
  font-size:14px;
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--text2);
  transition:all .2s;
  font-family:var(--sans);
}
.theme-toggle:hover { border-color:var(--accent); color:var(--text); }

/*  BUTTONS  */
.btn {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 14px;
  border-radius:7px;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  border:none;
  transition:all .15s;
  font-family:var(--sans);
  letter-spacing:0;
}
.btn-primary { background:var(--accent); color:var(--accent-ink); font-weight:600; }
.btn-primary:hover { filter:brightness(.94); }
.btn-ghost {
  background:transparent;
  color:var(--text2);
  border:1px solid var(--border);
}
.btn-ghost:hover { color:var(--text); border-color:var(--muted); background:var(--surface2); }
.btn-danger { background:transparent; color:var(--red); border:1px solid transparent; }
.btn-danger:hover { background:rgba(248,81,73,.1); border-color:var(--red); }
.btn-sm  { padding:5px 11px; font-size:12px; }
.btn-xs  { padding:3px 8px;  font-size:11px; border-radius:5px; }

/*  CONTENT  */
.content { padding:18px 24px 40px; }
@media (max-width:640px){ .content { padding:14px 14px 34px; } }
.sc-subtab { background:var(--surface2); color:var(--text2); border:1px solid var(--border); border-radius:99px; }
.sc-subtab:hover { color:var(--text); }
.sc-subtab.active { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600; }
@media print{
  /* visibility:hidden would keep every hidden element's layout box (and thus its
     height) in the page, so the print engine would compute several pages worth of
     invisible content, and Chrome repeats position:fixed elements on EVERY printed
     page -- so the one real card would show up duplicated once per those pages.
     display:none on body's direct children removes them from the flow entirely, so
     print-mount (moved to be a direct child of body right before printing -- see
     printDrivers) is the only thing left contributing height, and prints once. */
  body.printing-scorecard > *:not(#print-mount){display:none!important}
  /* NOT position:fixed -- Chrome clips fixed elements to a single printed page.
     With every other body child hidden, normal flow paginates one card per page
     via each card wrapper's page-break-after. */
  body.printing-scorecard{display:block;height:auto;min-height:0;overflow:visible}
  body.printing-scorecard #print-mount{display:block!important;position:static;width:100%;padding:20px}
  /* one driver per page; no blank page after the last card */
  body.printing-scorecard #print-mount>div{page-break-after:always}
  body.printing-scorecard #print-mount>div:last-child{page-break-after:auto}
}


/*  STATS  */
.stats-row {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  margin-bottom:22px;
}
.stat-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:16px 18px;
  box-shadow:var(--shadow);
  transition:box-shadow .2s;
}
.stat-card:hover { box-shadow:0 4px 12px rgba(0,0,0,.15); }
.stat-label {
  font-size:16px;
  text-transform:uppercase;
  letter-spacing:0.8px;
  color:var(--muted);
  font-family:var(--mono);
  font-weight:500;
}
.stat-value {
  font-size:28px;
  font-weight:700;
  margin:4px 0 2px;
  color:var(--text);
  letter-spacing:-0.5px;
}
.stat-meta { font-size:12px; color:var(--text2); }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:4px; vertical-align:middle; }
.dot-green{background:var(--green);}
.dot-red{background:var(--red);}
.dot-blue{background:var(--accent);}

/*  SECTION  */
.section {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  margin-bottom:20px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.section-header {
  padding:13px 18px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  background:var(--surface);
}
.section-title { font-size:14px; font-weight:600; letter-spacing:-0.1px; }
.section-count { font-size:12px; color:var(--muted); font-family:var(--mono); margin-left:6px; }
.header-left  { display:flex; align-items:center; gap:8px; }
.header-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/*  TABLE  */
.table-scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th {
  text-align:left;
  padding:10px 16px;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:0.6px;
  color:var(--muted);
  font-family:var(--mono);
  font-weight:500;
  border-bottom:2px solid var(--border);
  background:var(--surface2);
  white-space:nowrap;
  position:sticky;
  top:0;
}
td {
  padding:10px 16px;
  border-bottom:1px solid var(--border);
  color:var(--text);
  vertical-align:middle;
  font-size:16px;
}
/* Alternating rows */
tbody tr:nth-child(even) td { background:var(--row-alt); }
tbody tr:nth-child(odd) td  { background:var(--surface); }
tbody tr:hover td { background:var(--row-hover) !important; }
tr:last-child td { border-bottom:none; }

/*  BADGES  */
.badge {
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:12px;
  font-size:11px;
  font-weight:600;
  font-family:var(--mono);
  white-space:nowrap;
  letter-spacing:0.2px;
}
.badge-green  { background:rgba(63,185,80,.15);  color:var(--green); border:1px solid rgba(63,185,80,.3); }
.badge-yellow { background:rgba(210,153,34,.15); color:var(--yellow); border:1px solid rgba(210,153,34,.3); }
.badge-red    { background:rgba(248,81,73,.15);  color:var(--red); border:1px solid rgba(248,81,73,.3); }
.badge-blue   { background:var(--accent-dim); color:var(--text); border:1px solid var(--border2); }
.badge-gray   { background:var(--surface2); color:var(--muted); border:1px solid var(--border); }
.badge-orange { background:rgba(227,179,65,.15); color:var(--orange); border:1px solid rgba(227,179,65,.3); }
.badge-purple { background:rgba(188,140,255,.15);color:var(--purple); border:1px solid rgba(188,140,255,.3); }

.exp-warn    { color:var(--yellow); font-weight:600; }
.exp-expired { color:var(--red);    font-weight:600; }

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

/*  SORTABLE  */
th.sortable { cursor:pointer; user-select:none; position:relative; padding-right:22px; }
th.sortable:hover { color:var(--text); }
th.sortable::after { content:'\2195'; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:10px; color:var(--muted); opacity:.5; }
th.sortable.asc::after  { content:'\2191'; color:var(--text); opacity:1; }
th.sortable.desc::after { content:'\2193'; color:var(--text); opacity:1; }

/*  FILTER PILLS  */
.filter-pills { display:flex; gap:5px; flex-wrap:wrap; }
.pill {
  padding:3px 10px;
  border-radius:14px;
  font-size:11px;
  font-weight:500;
  cursor:pointer;
  border:1px solid var(--border);
  color:var(--muted);
  transition:all .15s;
  font-family:var(--mono);
  background:var(--surface2);
}
.pill:hover { color:var(--text); border-color:var(--muted); }
.pill.active { border-color:var(--accent); color:var(--accent-ink); background:var(--accent); font-weight:600; }

/*  SEARCH  */
.search-bar {
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:7px;
  padding:6px 11px;
  color:var(--text);
  font-family:var(--sans);
  font-size:13px;
  outline:none;
  width:190px;
  transition:border-color .15s, box-shadow .15s;
}
.search-bar::placeholder { color:var(--muted); }
.search-bar:focus { border-color:var(--border2); box-shadow:0 0 0 3px var(--accent-dim); }

/*  MODAL  */
.modal-overlay {
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  z-index:100;display:none;
  align-items:center;justify-content:center;
  backdrop-filter:blur(2px);
}
.modal-overlay.open { display:flex; }
.modal {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  width:520px;
  max-width:95vw;
  max-height:90vh;
  overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.modal-lg { width:680px; }
.modal-header {
  padding:16px 20px 12px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.modal-title { font-size:15px; font-weight:600; }
.modal-close { background:none;border:none;cursor:pointer;color:var(--muted);font-size:20px;line-height:1;transition:color .15s; }
.modal-close:hover { color:var(--text); }
.modal-body   { padding:16px 20px; }
.modal-footer { padding:12px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; }

/*  FIELDS  */
.field { margin-bottom:13px; }
.field label {
  display:block;
  font-size:11px;
  color:var(--text2);
  margin-bottom:5px;
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:0.4px;
  font-weight:500;
}
.field input,.field select,.field textarea {
  width:100%;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:7px;
  padding:8px 11px;
  color:var(--text);
  font-family:var(--sans);
  font-size:13px;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus {
  border-color:var(--border2);
  box-shadow:0 0 0 3px var(--accent-dim);
}
.field select option { background:var(--surface2); color:var(--text); }
.field-row  { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/*  TAB CONTENT  */
.tab-content { display:none; }
.tab-content.active { display:block; }

/*  CONFIRM  */
.confirm-overlay {
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  z-index:200;display:none;
  align-items:center;justify-content:center;
}
.confirm-overlay.open { display:flex; }
.confirm-box {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:24px;width:360px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.confirm-box h3 { font-size:15px; margin-bottom:8px; }
.confirm-box p  { font-size:13px; color:var(--text2); margin-bottom:20px; }
.confirm-actions { display:flex; gap:10px; justify-content:center; }

/*  EMPTY STATE  */
.empty-state { text-align:center; padding:40px 20px; color:var(--muted); font-size:13px; }
.empty-state .icon { font-size:28px; margin-bottom:8px; }

/*  OVERVIEW GRID  */
.overview-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }

/*  MAINTENANCE  */
.maint-item {
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  margin-bottom:8px;
  background:var(--surface2);
  transition:border-color .15s;
}
.maint-item:hover { border-color:var(--accent); }
.maint-icon  { font-size:16px; flex-shrink:0; margin-top:1px; }
.maint-body  { flex:1; min-width:0; }
.maint-type  { font-size:12px; font-weight:600; }
.maint-desc  { font-size:12px; color:var(--text2); margin-top:1px; word-break:break-word; }
.maint-meta  { font-size:11px; color:var(--muted); margin-top:3px; font-family:var(--mono); }
.maint-actions { display:flex; gap:4px; flex-shrink:0; }
.maint-badge { display:inline-block; padding:2px 7px; border-radius:10px; font-size:10px; font-family:var(--mono); font-weight:600; }

#routes-tbody td { font-size:15px; font-family:var(--sans); color:var(--text); padding:8px 8px; }
#routes-tbody select { font-size:14px; font-family:var(--sans); }
#routes-tbody th { font-size:12px; padding:8px 8px; }

/* ── TYPOGRAPHY ── */
:root, [data-theme="light"] { --header:'Inter', system-ui, sans-serif; --subheader:'Inter', system-ui, sans-serif; }
.page-title, .stat-value, .modal-title, .section-title { font-family:var(--header); }
.logo-mark { font-family:var(--header) !important; font-size:18px; font-weight:700; text-transform:none; letter-spacing:-.4px; }
.filter-pills .pill, .badge, .section-count { font-family:var(--sans); font-size:11px; }
.stat-label { font-family:var(--sans); font-size:11.5px; }
th { font-family:var(--sans); font-size:11.5px; }
td { font-family:var(--sans); font-size:14.5px; }
#routes-tbody td, #routes-tbody select { font-size:15px; font-family:var(--sans); color:var(--text); }
body, .btn, input, select, textarea { font-family:var(--sans); }

/* ── ROUTES TABLE ──────────────────────────────────────────────
   Fifteen columns. Widths are measured from the widest real value in
   each one (plus room for the header and its sort arrow), and the table
   carries a min-width so the browser scrolls the strip rather than
   squeezing columns until names truncate. The previous rules stopped at
   nth-child(13) while the table has 15 columns, so every width from
   "Van" rightwards was landing on the wrong column -- Late, a checkbox,
   was handed 130px while Driver made do with 120px. */
#route-assign-section table { table-layout:fixed; width:100%; min-width:1769px; }
#route-assign-section .table-scroll { overflow-x:auto; }
#routes-tbody td, #routes-table th { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

#route-assign-section th:nth-child(1), #routes-tbody td:nth-child(1) { width:133px; }  /* Route */
#route-assign-section th:nth-child(2), #routes-tbody td:nth-child(2) { width:285px; }  /* Driver */
#route-assign-section th:nth-child(3), #routes-tbody td:nth-child(3) { width:166px; }  /* Van */
#route-assign-section th:nth-child(4), #routes-tbody td:nth-child(4) { width:71px; }  /* Stops/hr */
#route-assign-section th:nth-child(5), #routes-tbody td:nth-child(5) { width:90px; }  /* Wave */
#route-assign-section th:nth-child(6), #routes-tbody td:nth-child(6) { width:79px; }  /* Lane */
#route-assign-section th:nth-child(7), #routes-tbody td:nth-child(7) { width:100px; }  /* Staging */
#route-assign-section th:nth-child(8), #routes-tbody td:nth-child(8) { width:175px; }  /* Service */
#route-assign-section th:nth-child(9), #routes-tbody td:nth-child(9) { width:110px; }  /* Veh type */
#route-assign-section th:nth-child(10), #routes-tbody td:nth-child(10) { width:76px; }  /* Duration */
#route-assign-section th:nth-child(11), #routes-tbody td:nth-child(11) { width:78px; }  /* Packages */
#route-assign-section th:nth-child(12), #routes-tbody td:nth-child(12) { width:133px; }  /* Progress */
#route-assign-section th:nth-child(13), #routes-tbody td:nth-child(13) { width:265px; }  /* Assign driver */

/* The dropdowns fill their column instead of sitting at a fixed width. */
#routes-tbody select { width:100%; max-width:100%; }
/* Transporter ID reads as a reference code, not the loudest thing in the row --
   same treatment as the Associates table. */
#routes-tbody td.rt-tid { color:var(--muted); font-family:var(--sans); font-variant-numeric:tabular-nums; letter-spacing:.2px; }
/* Numeric columns line up. */
#routes-tbody td:nth-child(5),
#routes-tbody td:nth-child(11),
#routes-tbody td:nth-child(12) { font-variant-numeric:tabular-nums; }

/* Stat cards smaller */
.stat-card { padding:14px 18px; }
.stat-value { font-size:24px; }
/* Unassigned table compact */
#unassigned-section td { font-size:14px; padding:5px 6px; }
#unassigned-section th { font-size:12px; padding:5px 6px; }
#unassigned-section th:nth-child(1) { width:90px; }  /* Route */
#unassigned-section th:nth-child(2) { width:140px; } /* Name */
#unassigned-section th:nth-child(3) { width:100px; } /* Status */
#unassigned-section th:nth-child(4) { width:110px; } /* Mark As */
#unassigned-section th:nth-child(5) { width:110px; } /* Van */
#unassigned-section th:nth-child(6) { min-width:120px; } /* Notes */
#unassigned-section th:nth-child(7) { width:60px; }  /* Remove */

/* ===== Scorecard (merged app) ===== */
.sc-scope, .scrim, #dlg-mount{
  --ink: var(--text); --ink-2: var(--text2); --ink-3: var(--muted);
  --paper: var(--bg); --card: var(--surface); --rule: var(--border); --rule-2: var(--border);
  --signal:#ffd100; --good:var(--green); --bad:var(--red);
  --platinum:#63b3d4; --gold:#d8ab3f; --silver:#a3adb8; --bronze:#ef6b76;
  --slab:#16191c; --slab-hi:#1e2227; --slab-line:#2c3138; --slab-dim:#8b929a; --on-slab:#fff;
  --edge: var(--border);
  --hover: var(--surface2); --hot:#2a2617; --medal:#282314; --note-bg:#2a2617;
  --scrim:rgba(4,6,8,.68);
  --sc-bg:#fff; --sc-text:#16191c; --sc-panel:#f2f4f6; --sc-line:#dfe3e7; --sc-sub:#e6e9ec;
  --cond: var(--header); --display: var(--header);
  --data:10pt;
}
[data-theme="light"] .sc-scope, [data-theme="light"] .scrim, [data-theme="light"] #dlg-mount{
  --platinum:#1f6f8b; --gold:#9a7314; --silver:#5d6570; --bronze:#b3202e;
  --hot:#fffdf0; --medal:#fffdf3; --note-bg:#fffdf0;
  --scrim:rgba(22,25,28,.55);
}
.sc-scope{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14.5px;line-height:1.5;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
.sc-scope button{font-family:inherit;cursor:pointer}
.sc-scope .wrap{max-width:1260px;margin:0 auto;padding:0 20px 90px}

/* app shell */
/* The page itself never scrolls. The sidebar is fixed furniture; only .main moves. */
.shell{display:block;height:auto;overflow:visible}
.side{background:var(--slab);color:var(--ink-2);padding:20px 0;position:relative;height:100%;overflow-y:auto;overflow-x:hidden}
@media(max-width:860px){
  .shell{grid-template-columns:1fr;height:auto;overflow:visible}
  .side{height:auto;overflow:visible;position:static}
  .sc-scope .main{height:auto!important;overflow:visible!important}
  .theme-sw, .side .foot{position:static!important;margin:14px 18px 0}
}
.side .brand{padding:0 18px 20px;border-bottom:1px solid var(--slab-line);margin-bottom:14px}
.side .brand b{display:block;font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:.09em;text-transform:uppercase;color:var(--on-slab);line-height:1.1}
.side .brand span{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#7d848c}
.side nav{display:grid}
.side nav button{display:flex;align-items:center;gap:9px;background:none;border:0;border-left:3px solid transparent;
  font-family:var(--display);font-weight:600;font-size:17px;text-transform:uppercase;letter-spacing:.06em;line-height:1.25;
  color:var(--ink-2);text-align:left;padding:11px 16px}
.side nav button:hover{background:var(--slab-hi);color:var(--on-slab)}
.side nav button[aria-current=page]{background:var(--slab-hi);border-left-color:var(--signal);color:var(--on-slab);font-weight:700}
.side nav button i{font-style:normal;font-family:var(--sans);font-size:12px;width:16px;text-align:center;opacity:.7;letter-spacing:0}
.theme-sw{position:absolute;bottom:52px;left:18px;right:18px;display:flex;border:1px solid var(--slab-line)}
.theme-sw button{flex:1;background:none;border:0;color:var(--slab-dim);padding:8px 0;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:6px}
.theme-sw button:hover{color:var(--on-slab)}
.theme-sw button[aria-pressed=true]{background:var(--slab-hi);color:var(--signal)}
.side .foot{position:absolute;bottom:18px;left:18px;right:18px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slab-dim);line-height:1.7}
.sc-scope .main{min-width:0;padding:0;margin-left:0;flex:none;display:block}
.view[hidden]{display:none}

/* sortable table headers */
.sc-scope .roster th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
.sc-scope .roster th.sortable:hover{color:var(--ink)}
.sc-scope .roster th.sortable::after{content:"↕";margin-left:5px;opacity:.3;font-size:9px}
.sc-scope .roster th.sortable[aria-sort=ascending]::after{content:"↑";opacity:1;color:var(--ink)}
.sc-scope .roster th.sortable[aria-sort=descending]::after{content:"↓";opacity:1;color:var(--ink)}

/* modal dialogs */
.dlg-scrim{position:fixed;inset:0;background:var(--scrim);z-index:70;display:grid;place-items:center;padding:20px}
.dlg{background:var(--card);border:1.5px solid var(--edge);width:100%;max-width:620px}
.dlg header{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--rule)}
.dlg header h2{font-family:var(--display);font-weight:600;font-size:22px;margin:0;letter-spacing:.02em;line-height:1.15}
.sc-scope .dlg header .spacer{flex:1}
.dlg header .x{border:0;background:none;font-size:20px;line-height:1;color:var(--ink-3);padding:2px 6px}
.dlg header .x:hover{color:var(--ink)}
.dlg .body{padding:18px}
.dlg .lede{font-size:14.5px;margin:0 0 4px}
.dlg .lede b{font-weight:600}
.dlg .hint{font-size:12.5px;color:var(--ink-3);margin:0 0 14px;line-height:1.55}
.dlg textarea{width:100%;min-height:92px;border:1px solid var(--rule);padding:11px;font-family:var(--sans);font-size:14px;line-height:1.55;color:var(--ink);background:var(--card);resize:vertical}
.dlg textarea:focus{border-color:var(--ink);outline:none}
.dlg .foot{display:flex;align-items:center;gap:12px;margin-top:14px}
.dlg .foot .fine{font-size:12px;color:var(--ink-3);font-style:italic;flex:1}
.sc-scope .dlg .btn-primary{background:var(--slab);color:var(--on-slab);border:1.5px solid var(--slab);font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:.07em;font-size:14.5px;padding:9px 18px}
.sc-scope .dlg .btn-primary:hover{filter:brightness(1.4)}
.dlg .cur{display:flex;align-items:center;gap:10px;font-size:13.5px;margin-bottom:8px;color:var(--ink-2)}
.dlg .cur span{min-width:150px}
.dlg h4{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.07em;font-size:15px;margin:16px 0 8px}
.sc-scope .seg{display:flex;gap:8px;flex-wrap:wrap}
.sc-scope .seg button{border:1.5px solid var(--rule);background:var(--card);padding:8px 15px;font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;font-size:14.5px;color:var(--ink-3)}
.sc-scope .seg button[data-v=platinum]{color:var(--platinum);border-color:var(--platinum)}
.sc-scope .seg button[data-v=gold]{color:var(--gold);border-color:var(--gold)}
.sc-scope .seg button[data-v=silver]{color:var(--silver);border-color:var(--silver)}
.sc-scope .seg button[data-v=bronze]{color:var(--bronze);border-color:var(--bronze)}
.sc-scope .seg button[data-v=none]{color:var(--ink);border-color:var(--ink)}
.sc-scope .seg button[aria-pressed=true]{background:currentColor;border-color:currentColor}
.sc-scope .seg button[aria-pressed=true] em{font-style:normal;color:#fff;mix-blend-mode:normal}
.sc-scope .seg button[aria-pressed=true]{color:#fff}
.sc-scope .seg button[aria-pressed=true][data-v=platinum]{background:var(--platinum);border-color:var(--platinum)}
.sc-scope .seg button[aria-pressed=true][data-v=gold]{background:var(--gold);border-color:var(--gold)}
.sc-scope .seg button[aria-pressed=true][data-v=silver]{background:var(--silver);border-color:var(--silver)}
.sc-scope .seg button[aria-pressed=true][data-v=bronze]{background:var(--bronze);border-color:var(--bronze)}
.sc-scope .seg button[aria-pressed=true][data-v=none]{background:var(--slab);border-color:var(--slab)}

/* history */
.hist{display:grid;gap:12px;margin-top:24px}
.hist-row{border:1.5px solid var(--edge);background:var(--card);display:grid;
  grid-template-columns:repeat(5,1fr) auto;gap:0;align-items:center}
@media(max-width:860px){.hist-row{grid-template-columns:1fr 1fr}}
.hist-wk{padding:16px 18px;border-right:1px solid var(--rule-2)}
.hist-wk b{display:block;font-family:var(--mono);font-weight:600;font-size:22px;line-height:1;letter-spacing:0}
.hist-wk span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.hist-cell{padding:16px 18px;border-right:1px solid var(--rule-2)}
.hist-cell .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:4px}
.hist-cell .v{font-family:var(--mono);font-weight:600;font-size:19px;line-height:1;font-variant-numeric:tabular-nums}
.hist-cell .v em{font-style:normal;font-size:12px;color:var(--ink-3);font-weight:600}
.hist-act{padding:12px 16px;display:flex;gap:6px}
.hist .saved{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.06em}
.sc-note a{color:inherit}

.masthead{border-bottom:1.5px solid var(--edge);padding:20px 0 13px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.masthead h1{font-family:var(--display);font-weight:600;font-size:29px;letter-spacing:.03em;text-transform:uppercase;margin:0;line-height:1}
.stamp{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--rule);padding:3px 8px;background:var(--card)}
.sc-scope .masthead .spacer{flex:1}
.sc-scope .btn{border:1.5px solid var(--edge);background:var(--card);color:var(--ink);font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.07em;font-size:14px;padding:8px 14px;white-space:nowrap;line-height:1.25}
.sc-scope .btn:hover{background:var(--slab);color:var(--signal)}
.sc-scope .btn.ghost{border-color:var(--rule);color:var(--ink-2)}
.sc-scope .btn.ghost:hover{border-color:var(--ink);color:var(--ink);background:var(--card)}
.sc-scope .btn.sm{padding:4px 9px;font-size:12.5px}
.sc-scope .btn:disabled{opacity:.4;cursor:not-allowed}

.dropall{margin:22px 0 0;border:1.5px dashed var(--rule);background:var(--card);padding:18px 20px;display:flex;align-items:center;gap:16px}
.dropall.is-hot{border-color:var(--edge);background:var(--hot)}
.dropall .mk{width:38px;height:38px;border:1.5px solid var(--edge);display:grid;place-items:center;font-family:var(--mono)}
.dropall p{margin:0;font-size:13.5px;color:var(--ink-2)}
.dropall strong{color:var(--ink);font-weight:600}
.dropall input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.dropall label.pick{cursor:pointer;color:var(--ink);text-decoration:underline;text-underline-offset:2px}

.manifest{margin:14px 0 0;border:1px solid var(--rule);background:var(--card)}
.manifest summary{font-family:var(--display);text-transform:uppercase;letter-spacing:.07em;font-weight:600;font-size:15px;padding:11px 15px;cursor:pointer}
.slot{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;padding:9px 15px;border-top:1px solid var(--rule-2)}
.slot-dot{width:12px;height:12px;border:1.5px solid var(--rule);border-radius:50%;justify-self:center}
.slot.ok .slot-dot{background:var(--good);border-color:var(--good)}
.slot.err .slot-dot{background:var(--bad);border-color:var(--bad)}
.slot h3{font-family:var(--display);font-size:16px;font-weight:600;margin:0;text-transform:uppercase;letter-spacing:.045em}
.slot h3 em{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--ink-3);margin-left:7px}
.slot p{margin:1px 0 0;font-size:11.5px;color:var(--ink-2);font-family:var(--mono)}
.slot p.msg{color:var(--bad)} .slot p.good{color:var(--good)}
.slot input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.slot label.pick{border:1px solid var(--rule);padding:4px 11px;font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--ink-2)}
.slot label.pick:hover{border-color:var(--ink);color:var(--ink)}

.fleet{margin:24px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));border:1.5px solid var(--edge);background:var(--card)}
.fc{padding:14px 16px;border-right:1px solid var(--rule-2)}
.fc:last-child{border-right:0}
.fc .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:5px}
.fc .v{font-family:var(--mono);font-weight:600;font-size:26px;line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums}
.fc .v small{font-size:12px;font-weight:600;color:var(--ink-3);margin-left:3px}

.sc-scope .controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:22px 0 0;padding:11px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sc-scope .controls input[type=search], .sc-scope .controls select{border:1px solid var(--rule);background:var(--card);padding:7px 10px;font-size:13.5px;color:var(--ink)}
.sc-scope .controls .spacer{flex:1}
.sc-scope .controls .lab{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

table.roster{width:100%;table-layout:fixed;border-collapse:collapse;margin:16px 0 0;background:var(--card);border:1.5px solid var(--edge)}
.roster col.c-rank{width:56px} .roster col.c-name{width:auto}
.roster col.c-tier{width:106px} .roster col.c-score{width:82px}
.roster col.c-6rank{width:96px} .roster col.c-6tier{width:106px}
.roster col.c-ten{width:118px} .roster col.c-pkg{width:92px} .roster col.c-act{width:214px}
/* truncate the text, never the cell — a clipped cell eats the actions dropdown */
.roster th{overflow:hidden;text-overflow:ellipsis}
.roster td .nm, .roster td .tid{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the open row must paint above the rows that follow it */
.roster tr.menu-open{position:relative;z-index:40}
.roster tr.menu-open td{background:var(--hover)}
@media(max-width:1180px){table.roster{table-layout:auto}}
.roster th{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:10px 9px;font-weight:400;
  position:sticky;top:0;z-index:3;background:var(--card);box-shadow:inset 0 -1.5px 0 var(--edge)}
.roster th.r, .roster td.r{text-align:right}
.roster td{padding:8px 10px;border-bottom:1px solid var(--rule-2);font-size:13.2px}
.roster tr:last-child td{border-bottom:0}
.roster tr:hover td{background:var(--hover)}
.roster tr.removed td{opacity:.55}
.roster .rk{font-family:var(--mono);font-weight:600;font-size:16px;width:42px;font-variant-numeric:tabular-nums}
.roster .rk.un{color:var(--ink-3);font-weight:400;font-size:14px}
.roster .nm{font-weight:500}
.roster .nm em{font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--bronze);margin-left:6px}
.roster .tid{font-family:var(--mono);font-size:9.5pt;color:var(--ink-3);letter-spacing:.02em}
.roster .sc, .roster .pk{font-family:var(--mono);font-size:var(--data);font-variant-numeric:tabular-nums}
.roster .six-rk{font-family:var(--mono);font-weight:700;font-size:var(--data);font-variant-numeric:tabular-nums}
.roster .none{color:var(--ink-3)}
.roster .six-mv{font-style:normal;font-family:var(--mono);font-size:10px;font-weight:400;margin-left:5px;letter-spacing:0}
.roster .six-mv.up{color:var(--good)} .roster .six-mv.down{color:var(--bad)}
.roster .act{display:flex;gap:5px;justify-content:flex-end;position:relative}
.ten{font-size:13px;color:var(--ink-3);white-space:nowrap;line-height:1.3}
.ten.yes{color:var(--good)}
.ten.no{color:var(--bronze)}

.tier-chip{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:13px;padding:3px 9px;border:1.5px solid currentColor;display:inline-block;line-height:1.3}
.tier-chip[data-t=platinum]{color:var(--platinum)}
.tier-chip[data-t=gold]{color:var(--gold)}
.tier-chip[data-t=silver]{color:var(--silver)}
.tier-chip[data-t=bronze]{color:var(--bronze)}
.tier-chip.ovr::after{content:" ✎";font-size:9px}

/* actions dropdown */
.menu{position:relative}
.menu-pop{position:absolute;right:0;top:calc(100% + 4px);z-index:20;background:var(--card);border:1.5px solid var(--edge);min-width:178px;box-shadow:0 6px 18px rgba(0,0,0,.24)}
.menu-pop.up{top:auto;bottom:calc(100% + 4px)}
.menu-pop button{display:block;width:100%;text-align:left;border:0;background:none;padding:9px 13px;font-size:13px;color:var(--ink);border-bottom:1px solid var(--rule-2)}
.menu-pop button:last-child{border-bottom:0}
.menu-pop button:hover{background:var(--hover)}
.menu-pop button.danger{color:var(--bad)}

/* ══ the scorecard itself ══ */
.sc-card{background:var(--sc-bg);color:var(--sc-text);--acc:var(--platinum)}
.sc-card[data-t=gold]{--acc:var(--gold)}
.sc-card[data-t=silver]{--acc:var(--silver)}
.sc-card[data-t=bronze]{--acc:var(--bronze)}

.sc-brand{display:flex;align-items:center;gap:16px;padding:16px 20px 12px}
.sc-scope .sc-brand .logo{font-family:var(--cond);font-weight:700;font-size:20px;letter-spacing:.13em;text-transform:uppercase}
.sc-brand .div{width:1px;height:26px;background:var(--rule)}
.sc-brand .co{font-family:var(--cond);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.sc-scope .sc-brand .spacer{flex:1}
.sc-brand .qr{display:flex;align-items:center;gap:10px}
.sc-brand .qr p{margin:0;font-size:10.5px;color:var(--ink-3);text-align:right;line-height:1.3;max-width:96px}
.sc-brand .qr .box{width:66px;height:66px;border:2px solid var(--acc);padding:3px;display:grid;place-items:center}
.sc-brand .qr img, .sc-brand .qr canvas{width:100%;height:100%;display:block}

.sc-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(116px,1fr));gap:10px;padding:0 20px}
@media(max-width:700px){.sc-top{grid-template-columns:repeat(3,1fr)}.sc-top .sc-who{grid-column:1/-1}}
@media(max-width:460px){.sc-top{grid-template-columns:1fr}}
.sc-who{background:var(--sc-panel);padding:18px 20px}
.sc-who h2{font-family:var(--cond);font-weight:700;font-size:26px;margin:0;letter-spacing:0;line-height:1.15}
.sc-who .co{font-size:13px;color:var(--ink-3);margin-top:2px;letter-spacing:.04em}
.sc-who .wk{display:flex;align-items:baseline;gap:6px 14px;margin-top:14px;flex-wrap:wrap}
.sc-who .wk b{font-family:var(--cond);font-weight:700;font-size:22px;letter-spacing:0;white-space:nowrap}
.sc-who .wk span{font-size:13px;color:var(--ink-2)}
.sc-badge{background:var(--acc);color:#fff;display:grid;place-items:center;text-align:center;padding:16px 10px}
.sc-badge .ico{font-size:20px;opacity:.85;margin-bottom:4px}
.sc-badge .v{font-family:var(--cond);font-weight:700;font-size:22px;letter-spacing:0;line-height:1}
.sc-badge .v small{font-size:12px;font-weight:600;opacity:.8}
.sc-scope .sc-badge.num .v{font-family:var(--mono);font-weight:600;font-size:19px;letter-spacing:-.01em}
.sc-scope .sc-badge.num .alt b{font-family:var(--mono);font-weight:600}
.sc-badge .k{font-size:11.5px;opacity:.85;margin-top:3px}
.sc-badge .alt{margin-top:9px;padding-top:7px;border-top:1px solid rgba(255,255,255,.28);font-size:11px;opacity:.9;line-height:1.35}
.sc-badge .alt b{font-weight:700;display:block;font-size:13px}

/* leaderboard */
.lb-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:20px 0 0;padding:11px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.lb-bar select{border:1px solid var(--rule);background:var(--card);padding:7px 10px;font-size:13.5px;color:var(--ink)}
.sc-scope .lb-bar .spacer{flex:1}
.lb-bar .lab{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.lb-toggle{display:flex;border:1.5px solid var(--edge)}
.lb-toggle button{border:0;background:var(--card);font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;
  font-size:14px;font-weight:600;padding:7px 15px;color:var(--ink-2)}
.lb-toggle button[aria-pressed=true]{background:var(--slab);color:var(--signal)}

table.lb{width:100%;border-collapse:collapse;margin:16px 0 0;background:var(--card);border:1.5px solid var(--edge)}
.lb th{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  text-align:left;padding:10px 12px;font-weight:400;
  position:sticky;top:0;z-index:3;background:var(--card);box-shadow:inset 0 -1.5px 0 var(--edge)}
.lb th.r, .lb td.r{text-align:right}
.lb td{padding:9px 12px;border-bottom:1px solid var(--rule-2);font-size:13.4px}
.lb tr:last-child td{border-bottom:0}
.lb .pos{font-family:var(--mono);font-weight:600;font-size:17px;width:56px;font-variant-numeric:tabular-nums;color:var(--ink-3)}
.lb tr.medal td{background:var(--medal)}
.lb tr.medal .pos{color:var(--ink);font-size:19px}
.lb .pos i{font-style:normal;margin-right:5px}
.lb .nm{font-weight:500}
.lb .tid{font-family:var(--mono);font-size:9.5pt;color:var(--ink-3)}
.lb .sc, .lb .pk{font-family:var(--mono);font-size:var(--data);font-variant-numeric:tabular-nums}
.lb .delta{font-family:var(--mono);font-size:9.5pt;font-variant-numeric:tabular-nums}
.lb .delta.up{color:var(--good)} .lb .delta.down{color:var(--bad)} .lb .delta.new{color:var(--ink-3)}
.hist h2.sec{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:21px;margin:34px 0 0}

.sc-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px 20px 0;align-items:start}
@media(max-width:640px){.sc-cols{grid-template-columns:1fr}}
.sc-col{display:grid;gap:12px}
.sc-sect{border:0}
.sc-sect h3{background:var(--acc);color:#fff;margin:0;padding:8px 14px;font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.01em;display:flex;align-items:center;gap:8px}
.sc-body{background:var(--sc-panel);padding:12px 14px}
.sc-row{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--sc-line);font-size:12.9px}
.sc-row:last-child{border-bottom:0}
.sc-row .l{font-weight:600;color:var(--sc-text)}
.sc-row .v{font-family:var(--mono);font-size:var(--data);font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-scope .sc-row.sub{padding-left:16px;font-size:12.2px;border-bottom:1px solid var(--sc-sub)}
.sc-scope .sc-row.sub .l{font-weight:400;color:var(--ink-2)}
.sc-scope .sc-row.sub .v{color:var(--ink-3)}
.sc-scope .sc-row.sub .v b{color:var(--ink);font-weight:600}
/* Deeper level for reason-code breakdowns (CDF categories, POD rejects, RTS codes) */
.sc-scope .sc-row.sub2, #print-mount .sc-row.sub2{padding-left:34px;font-size:12px}
.sc-scope .sc-row.sub2 .l::before, #print-mount .sc-row.sub2 .l::before{content:"\21b3\00a0";color:var(--ink-3)}
.sc-scope .sc-row.sub2 .l, #print-mount .sc-row.sub2 .l{font-weight:400;color:var(--ink-3)}
/* the printed card sits outside .sc-scope; give it the same sub styling */
#print-mount .sc-row.sub{padding-left:16px;font-size:12.2px;border-bottom:1px solid var(--sc-sub)}
#print-mount .sc-row.sub .l{font-weight:400;color:var(--ink-2)}
#print-mount .sc-row.sub .v{color:var(--ink-3)}
#print-mount .sc-row.sub .v b{color:var(--ink);font-weight:600}
.sc-head{font-weight:700;font-size:12.5px;margin:10px 0 2px}
.sc-head span{font-weight:400;color:var(--ink-3)}
.sc-praise{font-size:13px;font-weight:600;padding:4px 0 2px;line-height:1.4}

.sc-guide{padding:12px 20px 20px}
.sc-guide h3{background:var(--acc);color:#fff;margin:0;padding:8px 14px;font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.01em}
.sc-guide .body{background:var(--sc-panel);padding:14px}
.sc-guide .g{margin:0 0 12px;font-size:13px;line-height:1.55}
.sc-guide .g:last-child{margin-bottom:0}
.sc-guide .g b{color:var(--acc)}
/* praise variant: clean card, green treatment (card is always the light document) */
.sc-guide.praise h3{background:#1a7f37}
.sc-guide.praise .body{background:#eaf6ec;color:#16311c}
.sc-note{margin:0 20px;padding:11px 14px;background:#fdecec;border-left:4px solid #d94848;font-size:13px;color:#16191c}
.sc-note span{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:#a06060;display:block;margin-bottom:3px}

.scrim{position:fixed;inset:0;background:var(--scrim);z-index:65;display:grid;place-items:start center;overflow:auto;padding:28px 16px}
.sheet{background:var(--card);border:1.5px solid var(--edge);width:100%;max-width:840px}
.sheet-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--rule)}
.sc-scope .sheet-bar .spacer{flex:1}
.tabs{display:flex;border:1px solid var(--rule)}
.tabs button{border:0;background:var(--card);font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:13.5px;font-weight:600;padding:6px 13px;color:var(--ink-2)}
.tabs button[aria-pressed=true]{background:var(--slab);color:var(--signal)}

.panel{margin:26px 0 0;border:1px solid var(--rule);background:var(--card)}
.panel summary{font-family:var(--display);text-transform:uppercase;letter-spacing:.07em;font-weight:600;font-size:15px;padding:12px 15px;cursor:pointer}
.panel .inner{padding:0 15px 15px}
.panel p.lead{font-size:13px;line-height:1.6;color:var(--ink-2);max-width:74ch;margin:0 0 12px}
textarea.cfg{width:100%;min-height:88px;border:1px solid var(--rule);background:var(--paper);font-family:var(--mono);font-size:11.5px;padding:9px;color:var(--ink)}

.sc-scope .empty{margin:36px 0;padding:44px 24px;border:1.5px dashed var(--rule);background:var(--card);text-align:center}
.sc-scope .empty h3{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:20px;margin:0 0 6px}
.sc-scope .empty p{margin:0 auto;color:var(--ink-2);font-size:13.2px;line-height:1.6;max-width:60ch}
.note{margin:24px 0 0;font-size:12.2px;line-height:1.65;color:var(--ink-3);max-width:80ch}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--slab);color:var(--on-slab);padding:11px 18px;font-size:13.5px;border-left:4px solid var(--signal);z-index:80;max-width:90vw}
.toast.err{border-left-color:var(--bad)}
:focus-visible{outline:2.5px solid var(--platinum);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

body.da-view .wrap{max-width:840px}
body.da-view .main{margin-left:0!important}
body.da-view #da-mount{max-width:900px;margin:0 auto;padding:0 14px 24px}
body.da-view .ops{display:none}
.da-shell{margin:24px 0 0;border:1px solid var(--rule);background:#fff}

.sc-links{display:flex;flex-direction:column;justify-content:center;gap:7px;margin-left:14px;font-size:12.5px}
.sc-links a{color:var(--platinum);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.sc-links a:hover{opacity:.8}
@media print{.sc-links{display:none}}

/* print: only the print mount, one letter page */
#print-mount{display:none}
@page{size:letter portrait;margin:14mm}
@media print{
  .shell{display:block;height:auto;overflow:visible}
  .sc-scope .main{height:auto;overflow:visible;padding:0}
  .roster th, .lb th{position:static}
  /* a printed scorecard is the light document, whatever the screen is showing */
  .sc-scope, #print-mount{
    --ink:#16191c;--ink-2:#4a5057;--ink-3:#7d848c;--card:#fff;--rule:#d7d7cf;--rule-2:#e8e8e2;
    --platinum:#1f6f8b;--gold:#9a7314;--silver:#5d6570;--bronze:#b3202e;--edge:#16191c;
    --sc-bg:#fff;--sc-text:#16191c;--sc-panel:#f2f4f6;--sc-line:#dfe3e7;--sc-sub:#e6e9ec;--note-bg:#fffdf0;
  }
  body{background:#fff}
  .sc-card{break-inside:avoid}
  .sc-badge, .sc-sect h3, .sc-guide h3, .sc-note, .sc-brand .qr .box{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sc-body, .sc-who, .sc-guide .body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* driver share-link page: print just the card */
  body.da-view .sheet-bar, body.da-view header, body.da-view .side, body.da-view .masthead{display:none!important}
  body.da-view .da-shell{border:none;margin:0}
  body.da-view #da-mount{
    --ink:#16191c;--ink-2:#4a5057;--ink-3:#7d848c;--card:#fff;--rule:#d7d7cf;--rule-2:#e8e8e2;
    --platinum:#1f6f8b;--gold:#9a7314;--silver:#5d6570;--bronze:#b3202e;--edge:#16191c;
    --sc-bg:#fff;--sc-text:#16191c;--sc-panel:#f2f4f6;--sc-line:#dfe3e7;--sc-sub:#e6e9ec;--note-bg:#fffdf0;
  }
}
/* ===== harmonize with Daily Build's own component style ===== */
.sc-scope .btn{
  border-radius:7px;border:1px solid var(--border);background:var(--surface2);
  color:var(--text2);font-family:var(--sans);font-weight:500;
  text-transform:none;letter-spacing:0;
}
.sc-scope .btn:hover{background:var(--surface2);color:var(--text);border-color:var(--muted)}
.sc-scope .btn.ghost{background:transparent;border-color:var(--border);color:var(--text2)}
.sc-scope .btn.ghost:hover{color:var(--text);border-color:var(--muted);background:var(--surface2)}
.sc-scope .btn:disabled{opacity:.4}

.sc-scope .dropall, .sc-scope .manifest, .sc-scope .dlg, .sc-scope .menu-pop, .sc-scope .empty, .sc-scope .hist-wk, .sc-scope table.roster, .sc-scope table.lb{
  border-radius:10px;
}
/* The row action menu is absolutely positioned inside a cell, so the table
   must not clip it — round the corner cells instead of clipping the table. */
.sc-scope table.roster, .sc-scope table.lb{ overflow:visible; border-collapse:separate; border-spacing:0; }
.sc-scope table.roster thead th:first-child, .sc-scope table.lb thead th:first-child { border-top-left-radius:10px; }
.sc-scope table.roster thead th:last-child,  .sc-scope table.lb thead th:last-child  { border-top-right-radius:10px; }
.sc-scope table.roster tbody tr:last-child td:first-child,
.sc-scope table.lb tbody tr:last-child td:first-child { border-bottom-left-radius:10px; }
.sc-scope table.roster tbody tr:last-child td:last-child,
.sc-scope table.lb tbody tr:last-child td:last-child { border-bottom-right-radius:10px; }
/* the open row paints above the ones below it */
.roster tr.menu-open, .roster tr.menu-open td { position:relative; z-index:60; }
.menu-pop { z-index:70; }
.sc-scope .stamp{ border-radius:6px; }
.sc-scope .controls input[type=search], .sc-scope .controls select, .sc-scope .lb-bar select{ border-radius:7px; }
.sc-scope .slot label.pick, .sc-scope .dropall label.pick{ border-radius:6px; }

.sc-scope .tier-chip{
  border-radius:12px;border-width:1px;padding:2px 9px;
  font-family:var(--sans);font-weight:600;text-transform:none;letter-spacing:.2px;font-size:12px;
  background:rgba(127,127,127,.12);
}
.sc-scope .tier-chip[data-t=platinum]{background:rgba(99,179,212,.15)}
.sc-scope .tier-chip[data-t=gold]{background:rgba(216,171,63,.15)}
.sc-scope .tier-chip[data-t=silver]{background:rgba(163,173,184,.15)}
.sc-scope .tier-chip[data-t=bronze]{background:rgba(239,107,118,.15)}

.sc-scope .ten{font-family:var(--sans);font-weight:400}

.sc-scope .masthead h1, .sc-scope .empty h3, .sc-scope .manifest summary, .sc-scope .slot h3, .sc-scope .dlg h2, .sc-scope .dlg h4, .sc-scope .hist-wk b{
  text-transform:none;letter-spacing:0;
}
.sc-scope .masthead h1{font-weight:700;font-size:22px}

.sc-scope .fleet{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; border:none; background:none; }
.sc-scope .fc{ border-right:none; border:1px solid var(--border); border-radius:10px; background:var(--card); box-shadow:var(--shadow); }

.sc-scope .seg button{ border-radius:7px; text-transform:none; letter-spacing:0; font-family:var(--sans); font-weight:500; }

.sc-scope .roster th{
  font-size:12px; font-family:var(--subheader); letter-spacing:.6px; color:var(--muted);
}

/* ── AUTH GATE ─────────────────────────────────────────────── */
.auth-overlay{
  position:fixed; inset:0; z-index:9999; display:flex;
  align-items:center; justify-content:center;
  background:var(--bg);
}
.auth-card{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:36px 44px; max-width:420px; text-align:center;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
}
.auth-card p{ margin:0; font-size:13px; color:var(--text2); line-height:1.5; }
.auth-uid{
  font-family:var(--mono); font-size:12px; padding:6px 10px;
  background:var(--bg); border:1px solid var(--border); border-radius:6px;
  user-select:all; word-break:break-all;
}

/* ── OVERVIEW: COMPANY SCORECARD BANNER ────────────────────── */
.sc-banner{
  display:flex; align-items:center; gap:18px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card);
  padding:16px 20px; cursor:pointer; transition:border-color .15s;
}
.sc-banner:hover{ border-color:var(--border2); }
.sc-banner .stat-label{ margin-bottom:2px; }
.sc-banner .standing{ font-size:26px; font-weight:700; font-family:var(--header); }
.sc-banner .wk{ margin-left:auto; text-align:right; font-size:12px; color:var(--muted); font-family:var(--mono); }
.standing.st-fantasticplus{ color:var(--green); }
.standing.st-fantastic{ color:var(--green); }
.standing.st-great{ color:var(--text); }
.standing.st-fair{ color:var(--yellow); }
.standing.st-poor{ color:var(--red); }
.standing.st-none{ color:var(--muted); font-size:18px; font-weight:400; }

/* ── HISTORY: collapsible saved weeks ──────────────────────── */
.hist-week{border:1.5px solid var(--edge);background:var(--card);margin-bottom:14px}
.hist-week>summary{list-style:none;display:flex;align-items:center;gap:14px;padding:13px 18px;cursor:pointer}
.hist-week>summary::-webkit-details-marker{display:none}
.hist-week>summary:hover{background:var(--hover)}
.hw-arrow{font-size:13px;color:var(--ink-3);transition:transform .15s ease}
.hist-week[open] .hw-arrow{transform:rotate(90deg)}
.hw-wk b{font-family:var(--mono);font-size:20px;font-weight:600}
.hw-wk em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-left:7px}
.hw-standing{font-size:13px;font-weight:600}
.hw-meta{margin-left:auto;font-size:12px;color:var(--ink-3);font-family:var(--mono)}
.hist-week .hist-row{border:none;border-top:1px solid var(--rule-2);margin:0}
.hist-drivers{border-top:1px solid var(--rule-2)}
.hist-drivers .hd-cap{display:flex;align-items:center;gap:12px;padding:9px 18px 4px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.hist-drivers .hd-tabs{margin-left:auto;display:inline-flex;gap:6px}
.hist-drivers .hd-tabs .btn[aria-pressed="true"]{color:var(--platinum);border-color:var(--platinum)}
.hist-drivers th{padding:7px 18px;text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);cursor:pointer;user-select:none;white-space:nowrap}
.hist-drivers th:hover{color:var(--ink)}
.hist-drivers th.rk{width:44px}
.hist-drivers th:last-child{cursor:default}
.hist-drivers table{width:100%;border-collapse:collapse}
.hist-drivers td{padding:7px 18px;border-top:1px solid var(--rule-2);font-size:13.5px;vertical-align:middle}
.hist-drivers td.rk{width:44px;font-family:var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.hist-drivers td.nm em{font-style:normal;font-size:11px;color:var(--ink-3);margin-left:6px}
.hist-drivers td.r{text-align:right}
.hist-drivers .act{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}


@media(max-width:1100px){#tab-settings .settings-grid{grid-template-columns:1fr}}

/* ── PAVE tab ──────────────────────────────────────────────────
   Same treatment as the Associates and Fleet tables: one typeface, one
   size, weight only on the van number. The status was 16px uppercase
   monospace on every single row, which made the whole table shout. */
#tab-pave input[type="date"], #tab-pave .notes-input, #tab-pave .pave-note{
  background:var(--surface2); border:1px solid var(--border); border-radius:6px;
  padding:6px 9px; color:var(--text); font-size:13.5px; font-family:var(--sans);
  transition:border-color .15s;
}
#tab-pave input[type="date"]:hover, #tab-pave .notes-input:hover, #tab-pave .pave-note:hover{ border-color:var(--border2); }
#tab-pave input[type="date"]:focus, #tab-pave .notes-input:focus, #tab-pave .pave-note:focus{ outline:none; border-color:var(--accent); }

/* status reads as a badge, like every other status in the app */
#tab-pave .pave-status{
  display:inline-flex; align-items:center;
  font-family:var(--sans); font-size:10.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.3px;
  padding:2px 8px; border-radius:12px; white-space:nowrap;
}
#tab-pave .pave-status-green{ color:var(--green);  background:rgba(63,185,80,.14);  border:1px solid rgba(63,185,80,.3); }
#tab-pave .pave-status-red  { color:var(--red);    background:rgba(248,81,73,.12);  border:1px solid rgba(248,81,73,.28); }
#tab-pave .pave-status-amber{ color:var(--yellow); background:rgba(210,153,34,.14); border:1px solid rgba(210,153,34,.3); }

#tab-pave .pave-type-filter{
  background:var(--surface2); border:1px solid var(--border); border-radius:6px;
  padding:6px 9px; color:var(--text); font-size:12.5px; cursor:pointer;
}

/* ── ROUTES: quiet upload tiles (replaces the solid blue buttons) ── */
.upload-tile{
  display:flex; align-items:center; justify-content:center; width:100%;
  padding:9px 12px; cursor:pointer;
  background:transparent; border:1px dashed var(--border); border-radius:8px;
  color:var(--muted); font-size:13px; font-family:var(--subheader);
  transition:border-color .15s, color .15s;
}
.upload-tile:hover{ border-color:var(--accent); color:var(--accent); }

/* ── ATTENDANCE: four compact per-type tables ──────────────── */
.att-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:start}
@media(max-width:1200px){.att-grid{grid-template-columns:repeat(2,1fr)}}
.att-card{border:1.5px solid var(--edge);background:var(--card);border-radius:10px;overflow:hidden}
.att-card .att-head{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;
  border-bottom:1px solid var(--rule-2);font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);font-weight:600}
.att-card .att-head span{color:var(--ink-3);font-size:12px}
.att-card .att-body{max-height:360px;overflow-y:auto}
.att-card table{width:100%;border-collapse:collapse}
.att-card td,.att-card th{padding:6px 12px;border-top:1px solid var(--rule-2);font-size:12.5px;text-align:left}
.att-card th{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border-top:none;cursor:pointer;user-select:none;white-space:nowrap}
.att-card th:hover{color:var(--ink)}
.att-card td.ct{font-family:var(--mono);font-variant-numeric:tabular-nums;width:30px}
.att-card .att-none{padding:16px;font-size:12.5px;color:var(--ink-3);text-align:center}
.att-dates{background:var(--card);border:1px solid var(--rule);border-radius:5px;color:var(--ink);
  font-size:11.5px;padding:2px 4px;max-width:110px;cursor:pointer}

/* ── UNIFORMS ──────────────────────────────────────────────── */
/* Bare inputs/selects in the Uniforms cards pick up native (light) styling
   otherwise — match the .field controls so dark mode works. */
#uniforms-stage input, #uniforms-stage select{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:7px;
  padding:6px 10px;
  color:var(--text);
  font-size:12.5px;
}
#uniforms-stage select option{background:var(--surface);color:var(--text)}
#uniforms-stage input::placeholder{color:var(--muted)}
#uniforms-stage input:focus, #uniforms-stage select:focus{outline:none;border-color:var(--accent)}

/* ── COLLAPSIBLE SIDEBAR ───────────────────────────────────── */
.sidebar{transition:transform .18s ease}
body.nav-collapsed .sidebar{transform:translateX(-100%);}
body.nav-collapsed .main{margin-left:0!important}
#nav-toggle:hover{color:var(--text);border-color:var(--muted)}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD (Overview) — v59
   ══════════════════════════════════════════════════════════════ */
.dash {
  display:grid;
  grid-template-columns:minmax(300px,380px) 1fr;
  gap:14px;
  align-items:start;
}
.dash-col { display:flex; flex-direction:column; gap:14px; }
@media (max-width:980px){ .dash { grid-template-columns:1fr; } }

.dcard {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:16px 18px;
  position:relative;
  transition:border-color .15s, transform .15s;
}
.dcard.clickable { cursor:pointer; }
.dcard.clickable:hover { border-color:var(--border2); }
.dcard.clickable:active { transform:scale(.995); }
.dcard-head {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:14px;
}
.dcard-head h3 {
  font-size:15px; font-weight:600; letter-spacing:-.2px; color:var(--text); margin:0;
}
.dcard-head .sub { font-size:11.5px; color:var(--muted); font-weight:400; margin-top:1px; }
.goarrow {
  width:28px; height:28px; flex-shrink:0;
  border-radius:50%; border:1px solid var(--border);
  background:var(--surface2); color:var(--text2);
  display:grid; place-items:center; font-size:12px;
  transition:all .15s;
}
.dcard.clickable:hover .goarrow { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

/* big number + supporting figures */
.kpi { display:flex; align-items:baseline; gap:8px; }
.kpi b { font-size:34px; font-weight:600; letter-spacing:-1.2px; line-height:1; font-variant-numeric:tabular-nums; }
.kpi span { font-size:12px; color:var(--muted); }
.kpi-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.kpi-cell { background:var(--surface2); border:1px solid var(--border); border-radius:12px; padding:11px 12px; }
.kpi-cell .k { font-size:10.5px; text-transform:uppercase; letter-spacing:.7px; color:var(--muted); font-weight:600; }
.kpi-cell .v { font-size:22px; font-weight:600; letter-spacing:-.6px; margin-top:3px; font-variant-numeric:tabular-nums; line-height:1.1; }
.kpi-cell .v small { font-size:11px; color:var(--muted); font-weight:500; letter-spacing:0; margin-left:3px; }

/* compact tables inside dashboard cards */
.minitable { width:100%; border-collapse:collapse; }
.minitable th, .minitable td { border:0; background:transparent !important; padding:7px 0; font-size:13px; }
.minitable th {
  font-size:10.5px; text-transform:uppercase; letter-spacing:.7px;
  color:var(--muted); font-weight:600; border-bottom:1px solid var(--border);
  position:static; text-align:right;
}
.minitable th:first-child { text-align:left; }
.minitable td { text-align:right; font-variant-numeric:tabular-nums; border-bottom:1px solid var(--border); }
.minitable td:first-child { text-align:left; color:var(--text2); }
.minitable tr:last-child td { border-bottom:0; }
.minitable td.tot { font-weight:600; color:var(--text); }

/* stacked list rows (expiring plates, licenses, maintenance) */
.listrow {
  display:flex; align-items:center; gap:10px;
  padding:9px 0; border-bottom:1px solid var(--border);
  font-size:13.5px;
}
.listrow:last-child { border-bottom:0; }
.listrow .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
.listrow .meta { font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.dnone { color:var(--muted); font-size:12.5px; padding:10px 0; }

/* small labelled divider inside a card */
.cardsec { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.cardsec:first-child { margin-top:0; padding-top:0; border-top:0; }
.cardsec-h {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:10.5px; text-transform:uppercase; letter-spacing:.8px;
  color:var(--muted); font-weight:600; margin-bottom:6px;
}
.countpill {
  background:var(--surface2); border:1px solid var(--border);
  border-radius:99px; padding:1px 8px;
  font-size:11px; font-weight:600; color:var(--text2); letter-spacing:0;
}
.countpill.warn { background:rgba(224,180,85,.14); border-color:rgba(224,180,85,.35); color:var(--yellow); }
.countpill.bad  { background:rgba(239,107,98,.14); border-color:rgba(239,107,98,.35); color:var(--red); }

/* fleet summary bar */
.fleetbar { display:flex; height:8px; border-radius:99px; overflow:hidden; background:var(--surface2); margin-top:12px; }
.fleetbar i { display:block; height:100%; }
.fleetbar .ok { background:var(--green); }
.fleetbar .warn { background:var(--yellow); }
.fleetbar .bad { background:var(--red); }
.fleetkey { display:flex; gap:14px; flex-wrap:wrap; margin-top:9px; font-size:11.5px; color:var(--text2); }

.dash-scroll { max-height:230px; overflow-y:auto; }
.dcard-fleet .dash-scroll { max-height:280px; }
@media (max-width:980px){ .dash-scroll, .dcard-fleet .dash-scroll { max-height:200px; } }

/* ══════════════════════════════════════════════════════════════
   VEHICLE DETAIL PAGE — v59 phase 2
   ══════════════════════════════════════════════════════════════ */
.vp-back { margin-bottom:14px; }
.vp-link {
  color:var(--text); text-decoration:none; font-weight:600;
  border-bottom:1px solid transparent; transition:border-color .15s;
}
.vp-link:hover { border-bottom-color:var(--text2); }

.vp-head {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-card); padding:20px 22px; margin-bottom:18px;
}
.vp-headline { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.vp-title {
  font-size:30px; font-weight:600; letter-spacing:-.9px; line-height:1.15;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.vp-actions { display:flex; gap:8px; flex-shrink:0; }
.vp-actions .iconbtn { cursor:pointer; }

/* details in small print under the title */
.vp-meta {
  display:flex; flex-wrap:wrap; gap:10px 28px; margin:14px 0 0;
}
.vp-meta dt {
  font-size:10.5px; text-transform:uppercase; letter-spacing:.7px;
  color:var(--muted); font-weight:600; margin:0 0 2px;
}
.vp-meta dd { margin:0; font-size:13.5px; color:var(--text); font-variant-numeric:tabular-nums; }

/* registration strip */
.vp-reg {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--border);
}
.vp-reg-empty { font-size:12.5px; color:var(--muted); }
.vp-reg.vp-reg-empty { display:block; }
.vp-reg-t { font-size:10.5px; text-transform:uppercase; letter-spacing:.7px; color:var(--muted); font-weight:600; }
.vp-reg-s { font-size:13px; color:var(--text); margin:2px 0 6px; word-break:break-all; }
.vp-thumb {
  width:74px; height:56px; flex-shrink:0;
  border:1px solid var(--border); border-radius:10px; overflow:hidden;
  background:var(--surface2); display:grid; place-items:center;
  transition:border-color .15s;
}
.vp-thumb:hover { border-color:var(--border2); }
.vp-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.vp-thumb-doc {
  font-size:11px; font-weight:700; letter-spacing:.8px;
  color:var(--text2); font-family:var(--mono);
}
.vp-busy { font-size:12px; color:var(--text2); flex-basis:100%; }
.vp-by { font-size:11px; color:var(--muted); }
.vp-notes { max-width:420px; white-space:normal; line-height:1.45; }
.vp-done td { opacity:.55; }

/* per-row issue status control */
.vp-status {
  background:var(--surface2); border:1px solid var(--border);
  border-radius:99px; padding:4px 10px; color:var(--text);
  font-family:var(--sans); font-size:12px; cursor:pointer; outline:none;
}
.vp-status:focus { border-color:var(--border2); box-shadow:0 0 0 3px var(--accent-dim); }

/* attached documents */
.doc-chip {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--surface2); border:1px solid var(--border);
  border-radius:99px; padding:3px 10px; margin:2px 0;
  font-size:11.5px; color:var(--text2); text-decoration:none;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
a.doc-chip:hover { color:var(--text); border-color:var(--border2); }
.doc-chip button {
  background:none; border:0; color:var(--muted); cursor:pointer;
  font-size:14px; line-height:1; padding:0;
}
.doc-chip button:hover { color:var(--red); }

/* form helpers */
.req, .opt {
  font-size:9.5px; letter-spacing:.6px; text-transform:uppercase;
  border-radius:99px; padding:1px 6px; margin-left:6px; font-weight:600;
}
.req { background:rgba(239,107,98,.14); color:var(--red); }
.opt { background:var(--surface3); color:var(--muted); }
.form-err { font-size:12.5px; color:var(--red); margin:6px 0 0; min-height:16px; }

@media (max-width:640px){
  .vp-head { padding:16px; }
  .vp-title { font-size:24px; }
  .vp-meta { gap:10px 20px; }
  .vp-notes { max-width:220px; }
}

/* Vehicle-page tables restack as cards on a phone rather than scrolling sideways */
@media (max-width:720px){
  .vp-table thead { display:none; }
  .vp-table, .vp-table tbody, .vp-table tr, .vp-table td { display:block; width:100%; }
  .vp-table tr { border-bottom:1px solid var(--border); padding:13px 16px; position:relative; }
  .vp-table tr:last-child { border-bottom:0; }
  .vp-table td { border:0; padding:4px 0; background:transparent !important; font-size:13.5px; }
  .vp-table td::before {
    content:attr(data-l); display:block;
    font-size:10px; text-transform:uppercase; letter-spacing:.7px;
    color:var(--muted); font-weight:600; margin-bottom:1px;
  }
  .vp-table td:first-child { font-size:16px; padding-right:44px; }
  .vp-table td:first-child::before { display:none; }
  .vp-table .vp-notes { max-width:none; }
  .vp-table .vp-actcell { position:absolute; top:11px; right:12px; width:auto; padding:0; }
  .vp-table .vp-actcell::before { display:none; }
}

/* PAVE inspection rows on the vehicle page */
.vp-date {
  background:var(--surface2); border:1px solid var(--border); border-radius:8px;
  padding:4px 8px; color:var(--text); font-family:var(--sans); font-size:12.5px;
  outline:none; max-width:150px;
}
.vp-date:focus { border-color:var(--border2); box-shadow:0 0 0 3px var(--accent-dim); }
.pave-findings { margin-top:6px; }
.pave-findings summary {
  cursor:pointer; font-size:11.5px; color:var(--text2);
  list-style:none; display:inline-flex; align-items:center; gap:4px;
}
.pave-findings summary::before { content:'\25B8'; font-size:9px; transition:transform .15s; }
.pave-findings[open] summary::before { transform:rotate(90deg); }
.pave-findings summary:hover { color:var(--text); }
.pave-findings ul { margin:6px 0 0 14px; padding:0; }
.pave-findings li { font-size:12.5px; color:var(--text2); line-height:1.5; margin-bottom:2px; }
.section-header .badge { margin-left:4px; }

/* PAVE priority-damage marker */
.pave-star {
  color:var(--red); font-size:26px; line-height:1;
  display:inline-block; vertical-align:-4px; margin-right:8px; font-weight:700;
}
.pave-star.sm { font-size:14px; vertical-align:-1px; margin-right:3px; }
.pave-flagged td:first-child { box-shadow:inset 3px 0 0 var(--red); }
.pave-score { display:flex; align-items:center; gap:8px; }
.pave-score b { font-size:26px; font-weight:600; letter-spacing:-.8px; line-height:1; font-variant-numeric:tabular-nums; }
.pave-prio { color:var(--red); font-weight:600; font-size:13px; margin-top:4px; }
.pave-risk { color:var(--yellow); font-size:12px; margin-top:2px; }
@media (max-width:720px){
  .pave-flagged td:first-child { box-shadow:none; }
  .pave-flagged { box-shadow:inset 3px 0 0 var(--red); }
}

/* PAVE bulk import drop zone */
.pave-drop {
  display:flex; align-items:center; gap:16px;
  border:1.5px dashed var(--border2); border-radius:var(--r-card);
  background:var(--surface2); padding:18px 20px; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.pave-drop:hover { border-color:var(--text2); }
.pave-drop.is-hot { border-color:var(--accent); background:var(--accent-dim); }
.pave-drop-mk {
  width:40px; height:40px; flex-shrink:0;
  border:1.5px solid var(--border2); border-radius:12px;
  display:grid; place-items:center; font-size:18px; color:var(--text2);
}
.pave-drop b { font-size:14px; }
.pave-import-foot {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--border);
}
#pave-import-stage .table-scroll { max-height:420px; overflow-y:auto; }
.pave-blocked td { opacity:.62; }
.pave-blocked td:first-child { box-shadow:inset 3px 0 0 var(--yellow); }

/* ══════════════════════════════════════════════════════════════
   UPLOAD PANELS — the drop zone and the file checklist live in a
   panel opened from a button, instead of sitting on the page.
   ══════════════════════════════════════════════════════════════ */
.modal-xl { width:min(960px,95vw); }
.upanel .modal-body { padding:18px 20px; }
.upanel .modal-footer { justify-content:space-between; align-items:center; }

/* drop zone inside a panel */
.upanel .dropall {
  margin:0 0 16px; display:flex; align-items:center; gap:14px;
  border:1.5px dashed var(--border2); border-radius:var(--r-card);
  background:var(--surface2); padding:20px; cursor:default;
}
.upanel .dropall.is-hot { border-color:var(--accent); background:var(--accent-dim); }
.upanel .dropall .mk {
  width:44px; height:44px; flex-shrink:0; border-radius:12px;
  border:1.5px solid var(--border2); display:grid; place-items:center;
  font-size:19px; color:var(--text2);
}
.upanel .dropall p { margin:0; font-size:13px; color:var(--text2); line-height:1.5; }
.upanel .dropall strong { color:var(--text); font-weight:600; }
.upanel .dropall label.pick { cursor:pointer; color:var(--text); text-decoration:underline; text-underline-offset:2px; }

/* the report checklist: two columns of short rows instead of nine tall ones */
.upanel-list { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (max-width:720px){ .upanel-list { grid-template-columns:1fr; } }
.upanel-list .slot {
  display:grid; grid-template-columns:16px 1fr auto; gap:10px; align-items:center;
  padding:10px 12px; border:1px solid var(--border); border-radius:12px;
  background:var(--surface2);
}
.upanel-list .slot > div { min-width:0; }
.upanel-list .slot-dot {
  width:9px; height:9px; border-radius:50%; justify-self:center;
  border:1.5px solid var(--border2); background:transparent;
}
.upanel-list .slot.ok  { border-color:rgba(99,201,138,.4); }
.upanel-list .slot.ok  .slot-dot { background:var(--green); border-color:var(--green); }
.upanel-list .slot.err { border-color:rgba(239,107,98,.4); }
.upanel-list .slot.err .slot-dot { background:var(--red); border-color:var(--red); }
.upanel-list .slot h3 {
  font-family:var(--sans); font-size:13px; font-weight:600; margin:0;
  text-transform:none; letter-spacing:0; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.upanel-list .slot h3 em {
  font-style:normal; font-family:var(--sans); font-size:9.5px; font-weight:600;
  letter-spacing:.5px; text-transform:uppercase; color:var(--red);
  background:rgba(239,107,98,.14); border-radius:99px; padding:1px 6px; margin-left:6px;
}
.upanel-list .slot p {
  margin:1px 0 0; font-size:11px; color:var(--muted); font-family:var(--sans);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.upanel-list .slot p.good { color:var(--green); }
.upanel-list .slot p.msg  { color:var(--red); }
.upanel-list .slot input[type=file] { position:absolute; width:1px; height:1px; opacity:0; }
.upanel-list .slot label.pick {
  border:1px solid var(--border2); border-radius:99px; padding:3px 10px;
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:0;
  text-transform:none; cursor:pointer; color:var(--text2); white-space:nowrap;
}
.upanel-list .slot label.pick:hover { border-color:var(--text2); color:var(--text); }

/* the PAVE review table inside its panel */
#pave-import-modal .pave-drop { margin-bottom:4px; }
#pave-import-modal .table-scroll { max-height:46vh; }
#pave-import-stage .vp-notes > div { white-space:nowrap; }
#pave-import-stage td[data-l="Summary"] { min-width:150px; }
/* a required report that has not arrived yet */
.upanel-list .slot:not(.ok):not(.err) { border-style:dashed; }
.upanel-list .slot:not(.ok):not(.err) .slot-dot { border-color:var(--yellow); }

/* "where do I download this" links next to an upload */
.src-link {
  font-size:10.5px; font-weight:600; letter-spacing:.2px;
  color:var(--text2); text-decoration:none; white-space:nowrap;
  border:1px solid var(--border); border-radius:99px; padding:1px 7px;
  margin-left:8px; display:inline-block; vertical-align:1px;
}
.src-link:hover { color:var(--text); border-color:var(--border2); background:var(--surface3); }

/* Settings → Report Links */
.rl-group {
  font-size:10.5px; text-transform:uppercase; letter-spacing:.8px;
  color:var(--muted); font-weight:600; margin:16px 0 6px;
}
.rl-group:first-child { margin-top:0; }
.rl-row {
  display:grid; grid-template-columns:210px 1fr 70px; gap:10px;
  align-items:center; padding:5px 0;
}
.rl-row label { font-size:13px; color:var(--text2); }
.rl-row input {
  background:var(--surface2); border:1px solid var(--border); border-radius:var(--r-ctl);
  padding:7px 11px; color:var(--text); font-family:var(--sans); font-size:12.5px; outline:none;
}
.rl-row input:focus { border-color:var(--border2); box-shadow:0 0 0 3px var(--accent-dim); }
@media (max-width:720px){
  .rl-row { grid-template-columns:1fr; gap:4px; padding:8px 0; border-bottom:1px solid var(--border); }
}

/* ══════════════════════════════════════════════════════════════
   ASSOCIATE DETAIL PAGE — v59 phase 3
   ══════════════════════════════════════════════════════════════ */
.ap-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:start; }
@media (max-width:1080px){ .ap-cols { grid-template-columns:1fr 1fr; } }
@media (max-width:720px){ .ap-cols { grid-template-columns:1fr; } }
.ap-alias { font-size:16px; font-weight:400; color:var(--muted); letter-spacing:0; }

/* tier chip on a scorecard row */
.tierpill {
  border:1px solid; border-radius:99px; padding:1px 9px;
  font-size:10.5px; font-weight:700; letter-spacing:.4px;
  text-transform:uppercase; white-space:nowrap; margin-left:8px;
}

/* the four attendance counters */
.att-grid4 { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.att-tile {
  background:var(--surface2); border:1px solid var(--border);
  border-radius:12px; padding:10px 12px;
}
.att-tile .k {
  font-size:10px; text-transform:uppercase; letter-spacing:.7px;
  color:var(--muted); font-weight:600;
}
.att-tile .v {
  font-size:24px; font-weight:600; letter-spacing:-.7px;
  line-height:1.15; margin-top:2px; font-variant-numeric:tabular-nums;
}
.att-tile .v.zero { color:var(--muted); font-weight:500; }

/* Attendance — the day's roster */
.att-day { margin-bottom:4px; }
.att-day-chips {
  display:flex; gap:6px; flex-wrap:wrap;
  padding:12px 20px 0;
}
.att-day .att-flag td:first-child { box-shadow:inset 3px 0 0 var(--yellow); }
.att-note {
  background:var(--surface2); border:1px solid var(--border); border-radius:8px;
  padding:5px 9px; color:var(--text); font-family:var(--sans); font-size:12.5px;
  outline:none; width:100%; box-sizing:border-box;
}
.att-note:focus { border-color:var(--border2); box-shadow:0 0 0 3px var(--accent-dim); }
.vp-status.badge-yellow { border-color:rgba(224,180,85,.45); color:var(--yellow); }
.vp-status.badge-orange { border-color:rgba(227,154,82,.45); color:var(--orange); }
.vp-status.badge-red    { border-color:rgba(239,107,98,.45); color:var(--red); }
.sc-scope .att-day table { width:100%; }
.att-range { font-size:12.5px; color:var(--muted); margin:0 0 14px; }

/* ══════════════════════════════════════════════════════════════
   MOBILE PASS — v59 phase 4
   Inline grid-template-columns on several sections predate the rebuild, so
   these overrides carry !important to beat them.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:820px){
  /* stat rows: 4 and 5 across never fit a phone */
  .stats-row { grid-template-columns:1fr 1fr !important; gap:10px !important; }
  /* side-by-side sections stack */
  .overview-grid, .settings-grid { grid-template-columns:1fr !important; }
  /* the three route-file upload tiles */
  #tab-routes .section > div[style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns:1fr !important; }
  /* company info fields */
  #tab-settings div[style*="grid-template-columns:2fr 1fr 1fr"] { grid-template-columns:1fr !important; }
  /* scorecard: attendance cards, uniforms panes, fleet summary strip */
  .att-grid { grid-template-columns:1fr !important; }
  .sc-scope #stage { overflow-x:auto; }
  .hist-row { grid-template-columns:1fr 1fr !important; }
}
@media (max-width:560px){
  .stats-row { grid-template-columns:1fr !important; }
  .section-header { align-items:stretch; }
  .header-right { width:100%; }
  .header-right .search-bar { flex:1; width:auto; min-width:0; }
  .filter-pills { width:100%; }
  /* keep action buttons from wrapping into a ragged column */
  .header-right .btn { flex:0 0 auto; }
  .att-grid4 { grid-template-columns:1fr 1fr; }
  .vp-meta { gap:10px 18px; }
  .modal-header, .modal-body, .modal-footer { padding-left:16px; padding-right:16px; }
  .field-row { grid-template-columns:1fr; }
  .rl-row { grid-template-columns:1fr; }
}
/* the day roster and the two vehicle tables restack rather than scroll (see .vp-table) */
@media (max-width:720px){
  .att-day .att-day-chips { padding:12px 16px 0; }
  .att-note { font-size:13px; }
}

/* ══════════════════════════════════════════════════════════════
   SCORECARD — typography, week cards, aligned row actions
   ══════════════════════════════════════════════════════════════ */

/* The roster and history tables were set in Roboto Mono, which read as a
   different app. They now use the same face as everything else, with tabular
   figures so columns of numbers still line up. */
.roster th {
  font-family:var(--sans); font-size:10.5px; font-weight:600;
  letter-spacing:.05em; padding:11px 10px;
}
.roster td { padding:8px 14px; font-size:13.5px; }
.roster .nm { font-size:15px; font-weight:600; letter-spacing:-.1px; }
.roster .nm em { font-family:var(--sans); font-size:9.5px; letter-spacing:.06em; }
/* Transporter IDs are still searchable, just not shown — the name is what you read. */
.roster .tid { display:none; }
.roster .rk,
.roster .sc, .roster .pk, .roster .six-rk, .roster .six-mv {
  font-family:var(--sans); font-variant-numeric:tabular-nums; letter-spacing:-.2px;
}
.roster .rk { font-size:15px; }
.roster .sc, .roster .pk { font-size:14px; }
.tier-chip { font-family:var(--sans); font-size:11px; letter-spacing:.06em; border-radius:99px; padding:2px 9px; }
.hist-drivers .hd-head th { font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.06em; }
.hist-drivers td { font-size:13.5px; }
.hist-drivers td.nm { font-size:15px; font-weight:600; }
.hist-drivers td.rk { font-family:var(--sans); font-variant-numeric:tabular-nums; }

/* Row actions line up column by column, whatever the label says.
   "Note" / "Edit Note" and "Remove Rank" / "Restore Rank" no longer shift
   the buttons beside them. */
.hist-drivers .act {
  display:grid; grid-template-columns:58px 74px 82px 58px 116px;
  gap:5px; justify-content:end;
}
.roster .act { display:grid; grid-template-columns:58px 74px 62px; gap:5px; justify-content:end; }
.hist-drivers .act .btn, .roster .act .btn {
  width:100%; justify-content:center; text-align:center;
  padding-left:4px; padding-right:4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Saved weeks as cards */
.wk-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; }
@media (max-width:1100px){ .wk-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:720px){ .wk-grid { grid-template-columns:1fr; } }
.wk-card {
  background:var(--card); border:1.5px solid var(--edge); border-radius:14px;
  padding:16px 18px; display:flex; flex-direction:column; gap:14px;
  transition:border-color .15s;
}
.wk-card.open { border-color:var(--ink-2); }
.wk-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.wk-no { font-family:var(--sans); font-size:22px; font-weight:600; letter-spacing:-.6px; line-height:1.1; color:var(--ink); }
.wk-yr { font-family:var(--sans); font-size:11px; color:var(--ink-3); margin-top:1px; }
.wk-standing {
  font-family:var(--sans); font-size:10.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  border:1px solid currentColor; border-radius:99px; padding:2px 9px; white-space:nowrap;
}
.wk-figs { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin:0; }
.wk-figs dt {
  font-family:var(--sans); font-size:10px; text-transform:uppercase;
  letter-spacing:.7px; color:var(--ink-3); font-weight:600;
}
.wk-figs dd {
  margin:2px 0 0; font-family:var(--sans); font-size:19px; font-weight:600;
  letter-spacing:-.5px; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.15;
}
.wk-figs dd em {
  font-style:normal; font-size:11px; font-weight:500; color:var(--ink-3);
  letter-spacing:0; margin-left:4px;
}
.wk-card footer {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap; padding-top:12px; border-top:1px solid var(--rule-2);
}
.wk-saved { font-family:var(--sans); font-size:11px; color:var(--ink-3); }
.wk-acts { display:flex; gap:6px; }
.hist-drivers { margin-top:16px; }

/* the week picker sits with the masthead buttons */
.sc-scope select.wk-pick {
  border:1.5px solid var(--edge); background:var(--card); color:var(--ink);
  font-family:var(--sans); font-weight:600; font-size:12.5px;
  padding:6px 10px; cursor:pointer; max-width:210px;
}
.sc-scope select.wk-pick:hover { border-color:var(--ink); }
.hd-cap { font-family:var(--sans) !important; }
.hd-cap > span:first-child {
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.04em; text-transform:none; color:var(--ink-2);
}

/* Column widths, redistributed: the name column no longer hoards the slack —
   it is sized to the names it holds and the Note column takes what's left. */
.roster col.c-rank  { width:72px; }
.roster col.c-name  { width:230px; }
.roster col.c-note  { width:auto; }
.roster col.c-tier  { width:104px; }
.roster col.c-score { width:94px; }
.roster col.c-6rank { width:118px; }
.roster col.c-6tier { width:108px; }
.roster col.c-ten   { width:116px; }
.roster col.c-pkg   { width:116px; }
.roster col.c-act   { width:212px; }
@media (max-width:1400px){ .roster col.c-name{width:190px} .roster col.c-act{width:200px} }

/* the rest of the generator page, in the same face as its table */
.fc .k, .fc .v, .fc .v small { font-family:var(--sans); }
.fc .v { font-variant-numeric:tabular-nums; letter-spacing:-.6px; font-size:25px; }
.fc .k { font-size:10.5px; letter-spacing:.7px; font-weight:600; }
.stamp { font-family:var(--sans); font-size:11.5px; letter-spacing:.02em; text-transform:none; border-radius:99px; padding:3px 10px; }
.sc-scope .controls .lab { font-family:var(--sans); font-size:11.5px; letter-spacing:.02em; text-transform:none; }
.hist .saved { font-family:var(--sans); font-size:11px; letter-spacing:0; }
.slot h3, .slot p { font-family:var(--sans); }

/* Note column: the note itself, on the row, editable in place.
   Two lines maximum so a long note can't stretch its row. */
.roster col.c-note { width:230px; }
.roster td.note-cell { padding:5px 10px; vertical-align:middle; }
.note-btn {
  display:block; width:100%; text-align:left;
  background:transparent; border:1px solid transparent; border-radius:8px;
  padding:3px 8px; cursor:pointer;
  font-family:var(--sans); font-size:12.5px; line-height:1.35; color:var(--ink-2);
  height:40px; overflow:hidden; white-space:normal;
}
.note-btn:hover { border-color:var(--rule); background:var(--hover); color:var(--ink); }
.note-btn.note-empty { color:var(--ink-3); font-size:11.5px; opacity:0; transition:opacity .12s; }
.roster tr:hover .note-btn.note-empty, .note-btn.note-empty:focus { opacity:1; }
@media (max-width:1180px){ .roster col.c-note { width:170px; } }

/* ── Collapsible Settings sections ───────────────────────────── */
#tab-settings .section-header-toggle { cursor:pointer; user-select:none; }
#tab-settings .section-header-toggle:hover .section-title { color:var(--text); }
.sec-toggle {
  background:transparent; border:0; padding:0; margin-right:2px;
  width:22px; height:22px; border-radius:6px; cursor:pointer;
  color:var(--muted); display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.sec-toggle:hover { color:var(--text); background:var(--surface2); }
.sec-toggle .caret { font-size:9px; line-height:1; transition:transform .18s; display:block; }
.sec-toggle[aria-expanded="false"] .caret { transform:rotate(-90deg); }
/* the header stays; everything under it folds away */
#tab-settings .section.collapsed > *:not(.section-header) { display:none; }
#tab-settings .section.collapsed .section-header { border-bottom:0; }
#tab-settings .section { transition:none; }
/* the two-up row shouldn't stretch a collapsed card to match its neighbour */
#tab-settings .settings-grid { align-items:start !important; }

/* ══════════════════════════════════════════════════════════════
   ASSOCIATES + FLEET + MAINTENANCE TABLES — quiet typography
   One family, one size; weight only marks the clickable name.
   All three tables share this so they stay identical.
   ══════════════════════════════════════════════════════════════ */
#tab-employees thead th,
#tab-vehicles thead th,
#tab-maintenance thead th {
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.7px;
  color:var(--muted);
  padding:11px 16px;
}

#tab-employees tbody td,
#tab-vehicles tbody td,
#tab-maintenance tbody td {
  font-family:var(--sans);
  font-size:13.5px;
  font-weight:400;
  line-height:1.45;
  padding:11px 16px;
  vertical-align:middle;
}

/* The name is the only thing carrying extra weight — it's the link. */
#tab-employees tbody .vp-link,
#tab-vehicles tbody .vp-link,
#tab-maintenance tbody .vp-link { font-weight:500; color:var(--text); }

/* Secondary data steps back by colour, not italics or size. */
#tab-employees tbody .ct-soft,
#tab-vehicles tbody .ct-soft,
#tab-maintenance tbody .ct-soft { color:var(--muted); }
#tab-employees tbody .ct-dash,
#tab-vehicles tbody .ct-dash,
#tab-maintenance tbody .ct-dash { color:var(--border2); }

/* Reference codes (Transporter ID, VIN, plate): tabular, not loud. */
#tab-employees tbody .ct-code,
#tab-vehicles tbody .ct-code,
#tab-maintenance tbody .ct-code {
  color:var(--text2);
  font-variant-numeric:tabular-nums;
  letter-spacing:.2px;
}

/* Figures line up; expiry keeps its colour without shouting. */
#tab-employees tbody .ct-num,
#tab-vehicles tbody .ct-num,
#tab-maintenance tbody .ct-num { font-variant-numeric:tabular-nums; }
#tab-employees tbody .exp-warn,
#tab-employees tbody .exp-expired,
#tab-vehicles tbody .exp-warn,
#tab-vehicles tbody .exp-expired,
#tab-maintenance tbody .exp-warn,
#tab-maintenance tbody .exp-expired { font-weight:500; }
#tab-employees tbody .badge,
#tab-vehicles tbody .badge,
#tab-maintenance tbody .badge {
  font-family:var(--sans);
  font-weight:500;
  font-size:10.5px;
  letter-spacing:.2px;
}

/* Inline dropdowns: same face and size as the text beside them. */
#tab-employees .ct-select,
#tab-vehicles .ct-select,
#tab-maintenance .ct-select {
  background:transparent;
  border:1px solid transparent;
  border-radius:6px;
  font-family:var(--sans);
  font-size:13.5px;
  font-weight:400;
  padding:4px 6px;
  cursor:pointer;
  color:var(--text);
  transition:background .15s, border-color .15s;
}
#tab-employees .ct-select:hover,
#tab-vehicles .ct-select:hover,
#tab-maintenance .ct-select:hover { background:var(--surface2); border-color:var(--border); }
#tab-employees .ct-select:focus,
#tab-vehicles .ct-select:focus,
#tab-maintenance .ct-select:focus { background:var(--surface2); border-color:var(--border2); outline:none; }
#tab-employees .ct-select-status,
#tab-vehicles .ct-select-status,
#tab-maintenance .ct-select-status { width:132px; }
#tab-employees .ct-select-van,
#tab-vehicles .ct-select-van { max-width:124px; }

/* Row actions stay out of the way until you're on the row. */
#tab-employees tbody .actions,
#tab-vehicles tbody .actions,
#tab-maintenance tbody .actions { opacity:.45; transition:opacity .15s; flex-wrap:nowrap; justify-content:flex-end; gap:2px; }
#tab-employees tbody tr:hover .actions,
#tab-vehicles tbody tr:hover .actions,
#tab-maintenance tbody tr:hover .actions { opacity:1; }

/* Uniform row height: figures never wrap mid-value. */
#tab-employees tbody .ct-num,
#tab-employees tbody .ct-code,
#tab-vehicles tbody .ct-num,
#tab-vehicles tbody .ct-code,
#tab-maintenance tbody .ct-num,
#tab-maintenance tbody .ct-code { white-space:nowrap; }
#tab-employees tbody .exp-warn,
#tab-employees tbody .exp-expired,
#tab-vehicles tbody .exp-warn,
#tab-vehicles tbody .exp-expired { white-space:nowrap; }
#tab-employees thead th:last-child,
#tab-employees tbody td:last-child,
#tab-vehicles thead th:last-child,
#tab-vehicles tbody td:last-child { width:1%; white-space:nowrap; }

/* Column widths sized so ordinary names and figures sit on one line. */
#tab-employees table { table-layout:fixed; }
#tab-employees thead th { padding-left:12px; padding-right:12px; }
#tab-employees tbody td { padding-left:12px; padding-right:12px; }
#tab-employees th:nth-child(1), #tab-employees td:nth-child(1) { width:108px; }
#tab-employees th:nth-child(2), #tab-employees td:nth-child(2) { width:178px; }
#tab-employees th:nth-child(3), #tab-employees td:nth-child(3) { width:92px; }
#tab-employees th:nth-child(4), #tab-employees td:nth-child(4) { width:150px; }
#tab-employees th:nth-child(5), #tab-employees td:nth-child(5) { width:132px; }
#tab-employees th:nth-child(6), #tab-employees td:nth-child(6) { width:168px; }
#tab-employees th:nth-child(7), #tab-employees td:nth-child(7) { width:104px; }
#tab-employees th:nth-child(8), #tab-employees td:nth-child(8) { width:142px; }
#tab-employees th:nth-child(9),  #tab-employees td:nth-child(9)  { width:128px; }
#tab-employees th:nth-child(10), #tab-employees td:nth-child(10) { width:128px; }
#tab-employees th:nth-child(11), #tab-employees td:nth-child(11) { width:74px; }
#tab-employees th.sortable { padding-right:18px; }

/* ══════════════════════════════════════════════════════════════
   IMPORT REVIEW — fill in new associates before they're saved
   ══════════════════════════════════════════════════════════════ */
.modal-review { width:min(1080px,94vw); max-height:88vh; display:flex; flex-direction:column; }
.review-note {
  padding:10px 20px; font-size:12.5px; color:var(--muted);
  background:var(--surface2); border-bottom:1px solid var(--border);
}
.review-note b { color:var(--text); font-weight:500; }
.review-body { padding:0; overflow:hidden; flex:1; min-height:0; }
.review-scroll { overflow:auto; max-height:60vh; }

.review-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.review-table thead th {
  position:sticky; top:0; z-index:2;
  background:var(--surface2); border-bottom:1px solid var(--border);
  font-family:var(--sans); font-size:11px; font-weight:500;
  letter-spacing:.7px; text-transform:uppercase; color:var(--muted);
  text-align:left; padding:10px 12px; white-space:nowrap;
}
/* Wide enough that the carried-over line (ID · phone · expiry) sits on one row. */
.review-table th.rv-name { width:330px; }
.review-table th.rv-skip { width:56px; text-align:center; }
.review-table tbody td {
  padding:7px 12px; border-bottom:1px solid var(--border);
  font-family:var(--sans); font-size:13.5px; vertical-align:middle;
}
.review-table tbody tr:last-child td { border-bottom:none; }
.review-table tbody tr.rv-off td { opacity:.4; }

.rv-person { font-weight:500; color:var(--text); line-height:1.3; }
.rv-sub { display:block; font-size:11.5px; font-weight:400; color:var(--muted); margin-top:1px; }

.review-table input[type="text"],
.review-table input[type="date"] {
  width:100%; box-sizing:border-box;
  background:var(--surface2); border:1px solid var(--border); border-radius:6px;
  padding:6px 8px; font-family:var(--sans); font-size:13px; color:var(--text);
  transition:border-color .15s;
}
.review-table input:focus { outline:none; border-color:var(--accent); }
.review-table input.rv-bad { border-color:var(--red); background:rgba(248,81,73,.08); }
.rv-warn { display:block; font-size:11px; color:var(--red); margin-top:3px; line-height:1.3; }
.rv-check { width:17px; height:17px; cursor:pointer; accent-color:var(--green); }
.review-table td.rv-skip { text-align:center; }

.review-count { margin-right:auto; font-size:12.5px; color:var(--muted); }
.modal-footer .review-count { align-self:center; }

@media (max-width:820px){
  .review-table, .review-table thead, .review-table tbody { display:block; }
  .review-table thead { display:none; }
  .review-table tbody tr {
    display:block; border-bottom:1px solid var(--border); padding:10px 4px;
  }
  .review-table tbody td { display:block; border:none; padding:5px 12px; }
  .review-table tbody td::before {
    content:attr(data-l); display:block; font-size:10.5px; text-transform:uppercase;
    letter-spacing:.6px; color:var(--muted); margin-bottom:3px;
  }
  .review-table tbody td.rv-nolabel::before { content:none; }
  .review-table td.rv-skip { text-align:left; }
}

/* "apply to all" — sits quietly in the column header until needed. */
.rv-fill {
  background:none; border:0; padding:0 0 0 6px; cursor:pointer;
  font-family:var(--sans); font-size:10px; font-weight:400;
  letter-spacing:.3px; text-transform:none; color:var(--accent);
  opacity:.7; transition:opacity .15s;
}
.rv-fill:hover { opacity:1; text-decoration:underline; }

/* Inputs keep a sane width even when only one column is on show. */
.review-table input[type="text"],
.review-table input[type="date"] { max-width:160px; }
/* Table layout is fixed, so these are the real column widths. The reference
   column is narrow and wraps; Last Name gets the most of what is left, since
   that is the box being checked against the file on every row. */
.review-table th.rv-name { width:178px; }
.review-table th:nth-child(2) { width:142px; }   /* First Name   */
.review-table th:nth-child(3) { width:228px; }   /* Last Name    */
.review-table th:nth-child(4) { width:112px; }   /* Alias        */
.review-table th:nth-child(5) { width:148px; }   /* Start Date   */
.review-table th:nth-child(6) { width:168px; }   /* Transporter ID */
/* The per-column "apply to all" button must not steal width from the label. */
.review-table thead th { white-space:normal; }
.review-table .rv-fill { white-space:nowrap; }
.review-table td.rv-nolabel .rv-sub { white-space:normal; }
.rv-sub { word-break:break-word; }

/* ══════════════════════════════════════════════════════════════
   UNIFORMS — larger type
   Scoped to the tab so the Attendance page, which shares .att-card,
   keeps its own compact sizing.
   ══════════════════════════════════════════════════════════════ */

/* Summary tiles across the top */
#tab-uniforms .stat-label { font-size:12.5px; letter-spacing:.7px; }
#tab-uniforms .stat-value { font-size:29px; }
#tab-uniforms .stat-meta  { font-size:13.5px; line-height:1.65; }

/* Card headers: "INVENTORY 141 ON HAND" / "ISSUED" */
#tab-uniforms .hd-head,
#tab-uniforms .att-card .att-head { font-size:12.5px; letter-spacing:.08em; padding:11px 14px; }
#tab-uniforms .att-card .att-head span { font-size:13.5px; }

/* Column headers */
#tab-uniforms .att-card th {
  font-size:11.5px; letter-spacing:.08em; padding:9px 12px;
}

/* Row text — matches the Associates table */
#tab-uniforms .att-card td,
#tab-uniforms .att-card .nm { font-size:14px; padding:9px 12px; line-height:1.45; }
#tab-uniforms .att-card td.ct { font-size:14px; width:auto; min-width:34px; }

/* Stock steppers and the undo arrow sit comfortably beside bigger rows */
#tab-uniforms .btn-xs { font-size:13px; padding:4px 9px; }

/* Add-item row and the issue controls */
#tab-uniforms input,
#tab-uniforms select { font-size:13.5px; padding:7px 11px; }
#tab-uniforms .btn-sm { font-size:13px; }

/* Empty states and the explanatory note underneath */
#tab-uniforms .att-card .att-none { font-size:13.5px; }
#tab-uniforms .empty-state { font-size:14px; }
#tab-uniforms > div > p,
#tab-uniforms p { font-size:13.5px; line-height:1.6; }
#tab-uniforms .uni-note { font-size:13.5px; color:var(--muted); margin-top:12px; line-height:1.6; }

/* Fleet table column widths — same treatment, different content. */
#tab-vehicles table { table-layout:fixed; }
#tab-vehicles th:nth-child(1),  #tab-vehicles td:nth-child(1)  { width:132px; }  /* Van #        */
#tab-vehicles th:nth-child(2),  #tab-vehicles td:nth-child(2)  { width:186px; }  /* VIN          */
#tab-vehicles th:nth-child(3),  #tab-vehicles td:nth-child(3)  { width:116px; }  /* Type         */
#tab-vehicles th:nth-child(4),  #tab-vehicles td:nth-child(4)  { width:150px; }  /* Status       */
#tab-vehicles th:nth-child(5),  #tab-vehicles td:nth-child(5)  { width:96px;  }  /* Plate State  */
#tab-vehicles th:nth-child(6),  #tab-vehicles td:nth-child(6)  { width:124px; }  /* Plate        */
#tab-vehicles th:nth-child(7),  #tab-vehicles td:nth-child(7)  { width:168px; }  /* Plate exp    */
#tab-vehicles th:nth-child(8),  #tab-vehicles td:nth-child(8)  { width:168px; }  /* State insp   */
#tab-vehicles th:nth-child(9),  #tab-vehicles td:nth-child(9)  { width:168px; }  /* DOT insp     */
#tab-vehicles th:nth-child(10), #tab-vehicles td:nth-child(10) { width:74px;  }
#tab-vehicles th.sortable { padding-right:18px; }

/* Associates card: the licence list is the only part that grows with the
   roster, so cap it rather than letting the card set the page height.
   Viewport-aware so a taller screen still shows more before scrolling. */
.dcard-assoc .dash-scroll { max-height:clamp(116px, 17vh, 196px); }
@media (max-width:980px){ .dcard-assoc .dash-scroll { max-height:150px; } }

/* Overview cards carry a lot of vertical padding for the amount they say.
   Tightening the two fixed-height cards buys the room the page needs to sit
   on one screen without shrinking any of the numbers. */
.dash .dcard { padding:15px 16px; }
.dash .minitable th, .dash .minitable td { padding:5px 0; }
.dash .listrow { padding:7px 0; }
.dash .cardsec { margin-top:12px; padding-top:11px; }
.dash .kpi-cell { padding:9px 11px; }
.dash .kpi-cell .v { font-size:20px; }
.dash .dcard-head { margin-bottom:11px; }
.dash .unote { font-size:11.5px; margin-top:7px; }
.dash .uni-foot { padding-top:6px; font-size:11.5px; }
/* the uniform table is short; it only ever scrolls on a cramped window */
.dcard .dash-scroll-uni { max-height:none; }
/* When the uniform table does have to scroll, the grand total stays put.
   .minitable td forces background:transparent !important, so the sticky row
   needs !important too -- without it the row underneath shows straight
   through and the text collides. */
.dash-scroll-uni .minitable tr:last-child td {
  position:sticky; bottom:0;
  background:var(--surface) !important;
  border-top:1px solid var(--border);
}

/* Scheduled for maintenance: one row per shop visit — when, which van, where. */
.mxtable { width:100%; border-collapse:collapse; }
.mxtable th {
  text-align:left; padding:0 10px 6px 0; border:0; background:transparent;
  font-family:var(--sans); font-size:10.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.7px; color:var(--muted);
  position:sticky; top:0; background:var(--surface);
}
.mxtable td {
  padding:8px 10px 8px 0; border:0; border-bottom:1px solid var(--border);
  font-size:13.5px; vertical-align:top; background:transparent !important;
}
.mxtable tr:last-child td { border-bottom:0; }
.mxtable th:last-child, .mxtable td:last-child { padding-right:0; }

.mx-c-date { white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--text); width:96px; }
.mx-c-van  { color:var(--text); font-weight:500; width:38%; }
.mx-c-shop { color:var(--text2); }
.mx-c-what { display:block; font-size:11.5px; font-weight:400; color:var(--muted); margin-top:2px; }
.mx-tbd    { color:var(--muted); opacity:.7; }

.vp-none { color:var(--border2); }
.mx-late { color:var(--red); }
.mx-later { margin-top:8px; font-size:11.5px; color:var(--muted); }

/* ══════════════════════════════════════════════════════════════
   DAILY ROUTES — compact upload row
   Four uploads and the build controls on one line, replacing the
   three-column block of dashed tiles.
   ══════════════════════════════════════════════════════════════ */
.rup-row {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:12px 20px 0;
}
.rup {
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px; cursor:pointer;
  background:var(--surface2); border:1px solid var(--border); border-radius:9px;
  font-family:var(--sans); font-size:13px; color:var(--text);
  transition:border-color .15s, background .15s;
  min-width:0;
}
.rup:hover { border-color:var(--accent); }
.rup input[type="file"] { display:none; }

.rup-n {
  flex:none; width:18px; height:18px; border-radius:5px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface3); color:var(--muted);
  font-size:10.5px; font-weight:600;
}
.rup-t { white-space:nowrap; }
.rup-s {
  color:var(--muted); font-size:12px; white-space:nowrap;
  padding-left:8px; border-left:1px solid var(--border);
}

/* loaded */
.rup-done { border-color:rgba(63,185,80,.4); background:rgba(63,185,80,.07); }
.rup-done .rup-n { background:rgba(63,185,80,.18); color:var(--green); }
.rup-done .rup-s { color:var(--green); }
/* failed */
.rup-bad { border-color:rgba(248,81,73,.45); background:rgba(248,81,73,.07); }
.rup-bad .rup-n { background:rgba(248,81,73,.18); color:var(--red); }
.rup-bad .rup-s { color:var(--red); }
/* the optional second station reads as secondary until it is used */
.rup-opt { border-style:dashed; }
.rup-opt .rup-t, .rup-opt .rup-s { color:var(--muted); }
.rup-opt.rup-done .rup-t { color:var(--text); }

.rup-actions { display:inline-flex; gap:8px; margin-left:auto; }

/* One thin line under the row for file names and errors. */
.rup-msgs {
  display:flex; flex-wrap:wrap; gap:14px;
  padding:7px 20px 14px; min-height:15px;
  font-size:11.5px; color:var(--muted);
}
.rup-msgs .rup-ok  { color:var(--muted); }
.rup-msgs .rup-err { color:var(--red); }
.rup-msgs span:empty { display:none; }

@media (max-width:900px){
  .rup { flex:1 1 100%; }
  .rup-actions { margin-left:0; flex:1 1 100%; }
  .rup-s { margin-left:auto; }
}

/* Route-row dropdowns take the width of their column, so a long driver or van
   name is readable without opening the menu. */
#routes-tbody select.rt-sel {
  width:100%; box-sizing:border-box;
  background:var(--surface2); border:1px solid var(--border); border-radius:6px;
  color:var(--text); font-family:var(--sans); font-size:14px;
  padding:4px 6px; cursor:pointer;
}
/* Long values keep their full text on hover rather than being lost. */
#routes-tbody td.rt-drv, #routes-tbody td.rt-svc { overflow:hidden; text-overflow:ellipsis; }
#routes-tbody td.rt-svc { color:var(--muted); }
.rt-vt { font-family:var(--sans); font-weight:600; font-size:14px; }

/* Route cell: code, station, and a remove control that costs no column width. */
#routes-tbody td.rt-route { position:relative; padding-right:24px; }
.rt-code { display:block; line-height:1.25; }
.rt-stn  { display:block; font-size:10px; color:var(--muted); font-weight:600; letter-spacing:.02em; margin-top:1px; }
.rt-x {
  position:absolute; top:50%; right:4px; transform:translateY(-50%);
  width:20px; height:20px; padding:0; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; border-radius:5px; cursor:pointer;
  color:var(--muted); font-size:16px; opacity:0; transition:opacity .15s, color .15s, background .15s;
}
#routes-tbody tr:hover .rt-x { opacity:.65; }
.rt-x:hover { opacity:1 !important; color:var(--red); background:rgba(248,81,73,.12); }
.rt-x:focus-visible { opacity:1; outline:2px solid var(--red); outline-offset:1px; }

/* ── ROUTES TABLE: pin the columns you work between ──────────
   The strip is wider than the screen, and Route (which row am I on) and
   Assign Driver (the control) sit at opposite ends. Pinning both means the
   middle scrolls under them instead of the dropdown disappearing off the
   right edge. Sticky cells need an opaque background of their own, matching
   the zebra striping, or the scrolling columns show through. */
#route-assign-section th:nth-child(1),
#routes-tbody td:nth-child(1)   { position:sticky; left:0;  z-index:3; }
#route-assign-section th:nth-child(13),
#routes-tbody td:nth-child(13)  { position:sticky; right:0; z-index:3; }
#route-assign-section thead th:nth-child(1),
#route-assign-section thead th:nth-child(13) { z-index:5; background:var(--surface2); }

/* --row-alt and --row-hover are 55% alpha, which is fine for a normal row but
   lets the scrolling columns show straight through a pinned one. Painting the
   translucent colour over an opaque base gives the identical shade, opaque. */
#routes-tbody tr:nth-child(odd)  td:nth-child(1),
#routes-tbody tr:nth-child(odd)  td:nth-child(13) { background:var(--surface); }
#routes-tbody tr:nth-child(even) td:nth-child(1),
#routes-tbody tr:nth-child(even) td:nth-child(13) {
  background:linear-gradient(var(--row-alt),var(--row-alt)), var(--surface);
}
#routes-tbody tr:hover td:nth-child(1),
#routes-tbody tr:hover td:nth-child(13) {
  background:linear-gradient(var(--row-hover),var(--row-hover)), var(--surface) !important;
}

/* A hairline marks where the pinned edge is, so the scroll reads as intentional. */
#route-assign-section th:nth-child(1),
#routes-tbody td:nth-child(1)  { box-shadow:1px 0 0 var(--border); }
#route-assign-section th:nth-child(13),
#routes-tbody td:nth-child(13) { box-shadow:-1px 0 0 var(--border); }
/* The dropdown keeps clear of the pinned edge. */
#routes-tbody td:nth-child(13) { padding-right:10px; }
.rt-undo {
  margin-left:8px; padding:2px 9px; cursor:pointer;
  background:var(--surface2); border:1px solid var(--border); border-radius:6px;
  color:var(--accent); font-family:var(--sans); font-size:12px; font-weight:500;
}
.rt-undo:hover { border-color:var(--accent); background:var(--surface3); }
#build-status { font-size:12.5px; color:var(--muted); }
/* Add Route: the button sits ahead of the filters, and the form's optional
   hints stay quiet next to their labels. */
#route-assign-section .header-right .btn-primary { margin-right:4px; }
.field label .hint { font-weight:400; color:var(--muted); font-size:10.5px; margin-left:5px; text-transform:none; letter-spacing:0; }

/* PAVE table: matched to Associates and Fleet. */
#tab-pave table:not(.vp-table) thead th {
  font-family:var(--sans); font-size:11px; font-weight:500;
  letter-spacing:.7px; color:var(--muted); padding:11px 12px;
}
#tab-pave table:not(.vp-table) tbody td {
  font-family:var(--sans); font-size:13.5px; font-weight:400;
  line-height:1.45; padding:9px 12px; vertical-align:middle; white-space:nowrap;
}
#tab-pave table:not(.vp-table) tbody td:first-child .vp-link { font-weight:500; color:var(--text); }
#tab-pave table:not(.vp-table) tbody td:nth-child(2) { color:var(--text2); }

#tab-pave table:not(.vp-table) { table-layout:fixed; width:100%; }
#tab-pave table:not(.vp-table) th:nth-child(1), #tab-pave table:not(.vp-table) td:nth-child(1) { width:128px; }  /* Van #        */
#tab-pave table:not(.vp-table) th:nth-child(2), #tab-pave table:not(.vp-table) td:nth-child(2) { width:112px; }  /* Type         */
#tab-pave table:not(.vp-table) th:nth-child(3), #tab-pave table:not(.vp-table) td:nth-child(3) { width:238px; }  /* Completed    */
#tab-pave table:not(.vp-table) th:nth-child(4), #tab-pave table:not(.vp-table) td:nth-child(4) { width:128px; }  /* Status       */
#tab-pave table:not(.vp-table) th:nth-child(5), #tab-pave table:not(.vp-table) td:nth-child(5) { width:132px; }  /* Score        */
#tab-pave table:not(.vp-table) th:nth-child(6), #tab-pave table:not(.vp-table) td:nth-child(6) { width:114px; }  /* Inspected by */
#tab-pave table:not(.vp-table) th:nth-child(7), #tab-pave table:not(.vp-table) td:nth-child(7) { width:auto;  }  /* Notes        */
#tab-pave table:not(.vp-table) th:nth-child(8), #tab-pave table:not(.vp-table) td:nth-child(8) { width:96px;  }  /* Exclude      */
#tab-pave table:not(.vp-table) th.sortable { padding-right:18px; }

/* the note field takes the room the column gives it */
#tab-pave .pave-note { width:100%; box-sizing:border-box; }
#tab-pave .notes-input { width:100%; box-sizing:border-box; }
#tab-pave input[type="date"] { width:150px; margin-right:6px; }
/* "Set today" and "Exclude" stay quiet until you're on the row */
#tab-pave td:last-child .btn { font-size:12.5px; padding:4px 10px; }
#tab-pave tbody td .btn-ghost { opacity:.5; transition:opacity .15s; }
#tab-pave tbody tr:hover td .btn-ghost { opacity:1; }
#tab-pave tbody td:last-child { text-align:right; }

/* ── Dashboard scroll areas ────────────────────────────────────
   Text was running straight into the scrollbar. Reserve the gutter so the
   inset is the same whether the bar is showing or not, pad the content clear
   of it, and slim the bar down so it reads as a hint rather than furniture. */
.dash-scroll {
  padding-right:10px;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:var(--border2) transparent;
}
.dash-scroll::-webkit-scrollbar { width:9px; }
.dash-scroll::-webkit-scrollbar-track { background:transparent; }
.dash-scroll::-webkit-scrollbar-thumb {
  background:var(--border2); border-radius:99px;
  border:2px solid transparent; background-clip:content-box;
}
.dash-scroll::-webkit-scrollbar-thumb:hover { background:var(--muted); background-clip:content-box; }

/* ── Unmatched Inspections ─────────────────────────────────────
   Its own six columns, sized to real values: a full year/make/model, a
   17-character VIN, and the reason line underneath each. Widths are set
   here because the checklist table's rules no longer reach it. */
#pave-unmatched-stage table.vp-table { table-layout:fixed; width:100%; min-width:960px; }
#pave-unmatched-stage .table-scroll { overflow-x:auto; }

#pave-unmatched-stage thead th {
  font-family:var(--sans); font-size:11px; font-weight:500;
  letter-spacing:.7px; color:var(--muted); padding:11px 12px;
  white-space:nowrap; vertical-align:bottom;
}
#pave-unmatched-stage tbody td {
  font-family:var(--sans); font-size:13.5px; font-weight:400;
  line-height:1.4; padding:10px 12px; vertical-align:top;
  white-space:normal; overflow:visible;
}
#pave-unmatched-stage tbody td:first-child { font-weight:500; color:var(--text); }
/* the small grey line under a value wraps instead of running into the next column */
#pave-unmatched-stage .vp-by {
  display:block; font-size:11.5px; font-weight:400; color:var(--muted);
  margin-top:2px; white-space:normal; word-break:break-word; line-height:1.35;
}
/* VIN: tabular so characters line up, but the same face as everywhere else */
#pave-unmatched-stage td.unm-vin {
  font-family:var(--sans); font-variant-numeric:tabular-nums;
  letter-spacing:.2px; color:var(--text2); word-break:break-all;
}

#pave-unmatched-stage th:nth-child(1), #pave-unmatched-stage td:nth-child(1) { width:250px; }  /* Vehicle */
#pave-unmatched-stage th:nth-child(2), #pave-unmatched-stage td:nth-child(2) { width:215px; }  /* VIN     */
#pave-unmatched-stage th:nth-child(3), #pave-unmatched-stage td:nth-child(3) { width:118px; }  /* Date    */
#pave-unmatched-stage th:nth-child(4), #pave-unmatched-stage td:nth-child(4) { width:140px; }  /* Score   */
#pave-unmatched-stage th:nth-child(5), #pave-unmatched-stage td:nth-child(5) { width:130px; }  /* Points  */
#pave-unmatched-stage th:nth-child(6), #pave-unmatched-stage td:nth-child(6) { width:auto; text-align:right; }
#pave-unmatched-stage th.sortable { padding-right:20px; }
#pave-unmatched-stage td:nth-child(5) { font-variant-numeric:tabular-nums; }
#pave-unmatched-stage tbody .btn-danger { opacity:.5; transition:opacity .15s; }
#pave-unmatched-stage tbody tr:hover .btn-danger { opacity:1; }
#pave-unmatched-stage td.unm-date { white-space:nowrap; }
/* Archive / restore sit with the other quiet row actions. */
#tab-vehicles tbody .actions .btn-ghost,
#tab-employees tbody .actions .btn-ghost { font-size:12.5px; }

/* PAVE checklist — score from the filed report */
.pave-score-cell { white-space:nowrap; }
.pave-score-cell b { font-weight:600; font-variant-numeric:tabular-nums; }
.pave-band {
  display:inline-block; margin-left:6px; padding:2px 7px; border-radius:12px;
  font-size:10.5px; font-weight:500; letter-spacing:.2px; vertical-align:1px;
}
.pave-band-green { color:var(--green);  background:rgba(63,185,80,.14);  border:1px solid rgba(63,185,80,.3); }
.pave-band-amber { color:var(--yellow); background:rgba(210,153,34,.14); border:1px solid rgba(210,153,34,.3); }
.pave-band-red   { color:var(--red);    background:rgba(248,81,73,.12);  border:1px solid rgba(248,81,73,.28); }
.pave-noscore { color:var(--border2); }
.pave-score-cell .pave-star { margin-right:5px; }
/* A score carried over from an earlier month reads as history, not this month's result. */
.pave-score-cell.pave-score-old { opacity:.5; }

/* Maintenance table — column widths and the note line under each issue. */
#tab-maintenance table { table-layout:fixed; width:100%; min-width:1036px; }
#tab-maintenance th:nth-child(1), #tab-maintenance td:nth-child(1) { width:132px; }  /* Van #        */
#tab-maintenance th:nth-child(2), #tab-maintenance td:nth-child(2) { width:auto;  }  /* Issue        */
#tab-maintenance th:nth-child(3), #tab-maintenance td:nth-child(3) { width:190px; }  /* Repair shop  */
#tab-maintenance th:nth-child(4), #tab-maintenance td:nth-child(4) { width:130px; }  /* Service date */
#tab-maintenance th:nth-child(5), #tab-maintenance td:nth-child(5) { width:104px; }  /* Mileage      */
#tab-maintenance th:nth-child(6), #tab-maintenance td:nth-child(6) { width:122px; }  /* Reported     */
#tab-maintenance th:nth-child(7), #tab-maintenance td:nth-child(7) { width:150px; }  /* Status       */
#tab-maintenance th:nth-child(8), #tab-maintenance td:nth-child(8) { width:56px; }   /* Edit         */
#tab-maintenance th.sortable { padding-right:18px; }
#tab-maintenance tbody td:first-child .vp-link { font-weight:500; }

/* Issue + note share one line so rows match the other tables; the note is
   trimmed with an ellipsis and the whole thing is on hover. */
#tab-maintenance td.mx-issue { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tab-maintenance .mx-cat  { font-weight:500; color:var(--text); }
#tab-maintenance .mx-note { color:var(--muted); font-size:12.5px; }
#tab-maintenance .mx-note::before { content:' \2014 '; opacity:.6; }
#tab-maintenance tbody td { vertical-align:middle; }
#tab-maintenance .ct-dash { color:var(--border2); }
/* a long shop name trims rather than wrapping the row to two lines */
#tab-maintenance td:nth-child(3) { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#tab-maintenance tbody .actions .btn { font-size:12px; opacity:.55; transition:opacity .15s; }
#tab-maintenance tbody tr:hover .actions .btn { opacity:1; }
/* a count inside a filter pill */
.filter-pills .pill .pill-n { opacity:.55; margin-left:3px; font-variant-numeric:tabular-nums; }
.filter-pills .pill.active .pill-n { opacity:.7; }

/* ── Add Maintenance Issue: the van picker ─────────────────────
   A scrolling tick-list rather than a multi-select, so several vans can be
   booked in for the same job in one pass. */
.vanpick { border:1px solid var(--border); border-radius:9px; overflow:hidden; background:var(--surface2); }
.vanpick-bar {
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  border-bottom:1px solid var(--border); background:var(--surface);
}
.vanpick-bar input {
  flex:1; min-width:0; background:var(--surface2); border:1px solid var(--border);
  border-radius:6px; padding:6px 9px; color:var(--text);
  font-family:var(--sans); font-size:13px;
}
.vanpick-bar input:focus { outline:none; border-color:var(--accent); }
.vanpick-count { font-size:12px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; }

.vanpick-list {
  max-height:212px; overflow-y:auto; padding:4px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:2px;
  scrollbar-width:thin; scrollbar-color:var(--border2) transparent;
}
.vanpick-list::-webkit-scrollbar { width:9px; }
.vanpick-list::-webkit-scrollbar-track { background:transparent; }
.vanpick-list::-webkit-scrollbar-thumb { background:var(--border2); border-radius:99px; border:2px solid transparent; background-clip:content-box; }

/* These are <label> elements inside a .field, so they inherit the form-label
   styling (block, uppercase, letter-spaced, 11px). Reset all of it. */
.vanpick-item {
  display:flex !important; align-items:center; gap:8px; cursor:pointer;
  padding:6px 9px; border-radius:7px; border:1px solid transparent;
  font-family:var(--sans); font-size:13.5px; color:var(--text);
  text-transform:none; letter-spacing:0; font-weight:400; margin-bottom:0;
}
.vanpick-item:hover { background:var(--surface3); }
.vanpick-item.on { background:var(--accent-dim); border-color:var(--border2); }
.vanpick-item input { width:15px; height:15px; cursor:pointer; accent-color:var(--accent); flex:none; }
.vanpick-item .vp-n { font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-transform:none; letter-spacing:0; }
.vanpick-item .vp-t { margin-left:auto; font-size:11.5px; color:var(--muted); white-space:nowrap; text-transform:none; letter-spacing:0; }
.vanpick-item .vp-open {
  font-size:10.5px; color:var(--yellow); background:rgba(210,153,34,.14);
  border:1px solid rgba(210,153,34,.3); border-radius:10px; padding:1px 6px; white-space:nowrap;
}
.vanpick-none { padding:16px; text-align:center; color:var(--muted); font-size:13px; }
/* Edit control on a maintenance row — quiet until you're on the row, and small
   enough not to make rows taller than the other tables. */
#tab-maintenance td.mx-act { text-align:right; }
#tab-maintenance td.mx-act .btn { font-size:12px; padding:3px 7px; opacity:.45; transition:opacity .15s; }
#tab-maintenance tbody tr:hover td.mx-act .btn { opacity:1; }

/* ══════════════════════════════════════════════════════════════
   SCHEDULED DRIVERS WITHOUT A ROUTE — available extras vs. out
   The table is one <table>, so the two groups are separated by a full-width
   divider row rather than a second table; that keeps the columns aligned and
   the header sort working across both halves.
   ══════════════════════════════════════════════════════════════ */
#unassigned-tbody .ua-sel {
  background:var(--surface2); border:1px solid var(--border); border-radius:5px;
  font-size:11px; padding:3px 6px; color:var(--text); cursor:pointer;
}
#unassigned-tbody .ua-sel-route { font-size:12px; width:90px; }
#unassigned-tbody .ua-sel-van   { width:120px; }
#unassigned-tbody .ua-note {
  background:var(--surface2); border:1px solid var(--border); border-radius:5px;
  font-size:11px; padding:3px 6px; color:var(--text);
  width:100%; box-sizing:border-box;
}
#unassigned-tbody .ua-dash { color:var(--muted); opacity:.5; }

#unassigned-tbody tr.ua-group td {
  background:var(--surface2);
  font-family:var(--sans); font-size:10.5px; font-weight:600;
  letter-spacing:.7px; text-transform:uppercase; color:var(--muted);
  padding:7px 12px;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
/* Dimmed, but the Mark as… control stays at full strength so a mis-click is
   one change away from being undone. */
#unassigned-tbody tr.ua-out td { opacity:.62; }
#unassigned-tbody tr.ua-out td:nth-child(3),
#unassigned-tbody tr.ua-out td:nth-child(4) { opacity:1; }

/* Why a driver is unranked — shift count, or the driving events that cost them
   the week. The name line above is nowrap and would clip anything longer than a
   word, so it takes the second line. That line is the Transporter ID, hidden by
   default (see .roster .tid), and unhidden only on rows that carry a reason. */
.roster .tid.why-line { display:block; }
.roster .tid .why { font-family:var(--sans); font-size:10.5px; letter-spacing:.01em; color:var(--bronze); }

/* ══════════════════════════════════════════════════════════════
   ROUTE SHEETS — stamping the day's strip onto the station's PDFs
   ══════════════════════════════════════════════════════════════ */
#rs-modal .modal { width:min(620px,94vw); }
.rs-lede { margin:0 0 16px; font-family:var(--sans); font-size:13.5px; line-height:1.55; color:var(--muted); }

.rs-drop {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:26px 20px; border:1.5px dashed var(--border); border-radius:12px;
  background:var(--surface2); cursor:pointer; text-align:center;
  transition:border-color .15s, background .15s;
}
.rs-drop:hover { border-color:var(--accent); background:var(--surface); }
.rs-drop input[type="file"] { display:none; }
.rs-drop-icon { font-size:24px; line-height:1; }
.rs-drop-main { font-family:var(--sans); font-size:14px; font-weight:600; color:var(--text); }
.rs-drop-sub  { font-family:var(--sans); font-size:12px; color:var(--muted); }

.rs-result { margin-top:16px; font-family:var(--sans); font-size:13px; }
.rs-working { color:var(--muted); }
.rs-ok   { font-size:14px; color:var(--text); }
.rs-ok b { font-size:18px; color:var(--green); }

.rs-files { list-style:none; margin:10px 0 0; padding:0; }
.rs-files li {
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  padding:5px 0; border-bottom:1px solid var(--border); color:var(--muted);
}
.rs-files li:last-child { border-bottom:none; }
.rs-files li span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rs-files li em { font-style:normal; font-variant-numeric:tabular-nums; color:var(--text); }

/* A route the plan doesn't know isn't an error — that page just prints as the
   station sent it — so this reads as a heads-up rather than a failure. */
.rs-warn {
  margin-top:12px; padding:10px 12px; border-radius:8px;
  background:rgba(210,153,34,.10); border:1px solid rgba(210,153,34,.30);
  color:var(--text); line-height:1.5;
}
.rs-warn span { display:block; margin-top:3px; font-size:12px; color:var(--muted); }
.rs-bad {
  padding:10px 12px; border-radius:8px;
  background:rgba(248,81,73,.10); border:1px solid rgba(248,81,73,.30); color:var(--red);
}
.rs-note { flex:1; font-family:var(--sans); font-size:12px; color:var(--muted); }

/* ══════════════════════════════════════════════════════════════
   FLEET — registration on file
   A narrow column answering two things at once: is a document uploaded, and
   is the one we hold still current? Amber means a file exists but the plate
   behind it has expired, so it is last year's registration.
   ══════════════════════════════════════════════════════════════ */
#tab-vehicles th.ct-reg, #tab-vehicles td.ct-reg { width:52px; text-align:center; }
#tab-vehicles td.ct-reg { font-size:15px; line-height:1; }
.reg-yes {
  color:var(--green); text-decoration:none; font-weight:700;
  display:inline-block; padding:2px 5px; border-radius:5px; transition:background .15s;
}
.reg-yes:hover { background:rgba(63,185,80,.14); }
.reg-yes.reg-stale { color:var(--yellow); }
.reg-yes.reg-stale:hover { background:rgba(210,153,34,.16); }
.reg-none { color:var(--red); opacity:.75; font-weight:600; }

/* ══════════════════════════════════════════════════════════════
   LEADERBOARD POSTER — the weekly board Heart Key posts
   Every value here is absolute (px, hex) rather than a theme token: the poster
   is rasterised to a PNG and printed/posted, so it must look identical whether
   the app is in light or dark mode.
   ══════════════════════════════════════════════════════════════ */
.lbp {
  background:#fff; color:#232F3F; box-sizing:border-box; color-scheme:light;
  font-family:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
  padding:18px 20px 22px; border:1px solid #E0E0E0;
}
.lbp-banner {
  background:#FF9900; display:flex; align-items:center; justify-content:center; gap:18px;
  padding:10px 16px;
}
.lbp-banner-t { font-size:46px; font-weight:800; color:#fff; letter-spacing:-.5px; line-height:1.1; }
.lbp-star { font-size:52px; color:#1370B5; line-height:1; }
.lbp-band {
  background:#1370B5; color:#fff; text-align:center;
  font-size:13px; font-weight:700; letter-spacing:.2px; padding:7px 10px;
}
.lbp-cols { display:flex; align-items:flex-start; margin-top:14px; }
.lbp-side { flex:1; min-width:0; }
.lbp-divider { width:14px; align-self:stretch; background:#232F3F; margin:34px 10px 0; }
.lbp-subtitle { text-align:center; font-size:19px; font-weight:700; padding:6px 0 10px; }

/* Selectors are deliberately over-qualified. The app stripes every table with
   `tbody tr:nth-child(even) td { background:var(--row-alt) }`, which in dark
   mode would paint half the poster's rows charcoal; these have to outrank it. */
.lbp .lbp-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.lbp .lbp-table thead tr th {
  background:#232F3F; color:#fff; font-size:13px; font-weight:700;
  padding:9px 6px; text-align:center; border:1px solid #232F3F;
}
.lbp .lbp-table th:nth-child(1), .lbp .lbp-table td:nth-child(1) { width:17%; }
.lbp .lbp-table th:nth-child(3), .lbp .lbp-table td:nth-child(3) { width:25%; }
.lbp .lbp-table th:nth-child(4), .lbp .lbp-table td:nth-child(4) { width:16%; }
.lbp .lbp-table tbody tr td,
.lbp .lbp-table tbody tr:nth-child(even) td {
  border:1px solid #E0E0E0; padding:7px 6px; font-size:14px; text-align:center;
  background:#fff; color:#232F3F;
}
.lbp .lbp-table tbody tr td.lbp-rank { font-weight:700; }
.lbp .lbp-table tbody tr td.lbp-name { font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lbp .lbp-table tbody tr td.lbp-empty { color:#8A94A3; font-style:italic; padding:18px 6px; }

/* Tier pills, pale enough to read the label against. These are the poster's own
   colours, not the app's tier palette. */
.lbp-chip {
  display:inline-block; padding:3px 14px; border-radius:4px;
  font-size:12px; font-weight:600; letter-spacing:.3px;
}
.lbp .lbp-chip[data-t="platinum"] { background:#E3F0FA; color:#2C6FA8; }
.lbp .lbp-chip[data-t="gold"]     { background:#FDF6DC; color:#AD8300; }
.lbp .lbp-chip[data-t="silver"]   { background:#EDEFF2; color:#67707D; }
.lbp .lbp-chip[data-t="bronze"]   { background:#F6E7DB; color:#A05E2B; }

.lbp-check {
  display:inline-block; width:19px; height:19px; line-height:19px;
  background:#FF9900; color:#fff; border-radius:4px;
  font-size:14px; font-weight:800;
}
.lbp-rules {
  margin-top:16px; text-align:center; font-size:13px; font-weight:700;
  line-height:1.75; color:#232F3F;
}

/* ── the dialog around it ── */
.lbp-dlg { max-width:720px; }
.lbp-controls { display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.lbp-controls label { font-size:13px; font-weight:600; }
/* The poster is taller than most screens once scaled, so the preview scrolls
   rather than pushing the dialog's buttons off the bottom. */
.lbp-preview { overflow:auto; max-height:60vh; border:1px solid var(--border); border-radius:8px; background:#fff; }
.lbp-scaler { transform-origin:top left; }

/* ── Bonus disqualification ──────────────────────────────────────
   A narrow column beside Note. The button is invisible until the row is
   hovered on drivers who are clean, so the roster stays quiet; once a driver
   is disqualified it turns into a red DQ chip that is always visible. */
.roster col.c-dq { width:100px; }
.roster td.dq-cell { padding:5px 6px; vertical-align:middle; text-align:center; }
.dq-btn {
  font-family:var(--sans); font-size:11.5px; line-height:1;
  padding:5px 9px; border-radius:999px; cursor:pointer;
  border:1px solid transparent; background:transparent; color:var(--ink-3);
  white-space:nowrap;
}
.dq-btn.off { opacity:0; transition:opacity .12s; }
.roster tr:hover .dq-btn.off, .dq-btn.off:focus { opacity:1; }
.dq-btn.off:hover { border-color:#d9534f; color:#c0392b; background:#fdf1f0; }
.dq-btn.on {
  background:#c0392b; border-color:#a93226; color:#fff;
  font-weight:600; letter-spacing:.06em;
}
.dq-btn.on:hover { background:#a93226; }
@media (max-width:1400px){ .roster col.c-dq { width:86px; } }

/* the Disqualify dialog */
.dq-lede { margin:0 0 12px; }
.dq-list { display:flex; flex-direction:column; gap:2px; margin-bottom:14px; }
.dq-row {
  display:flex; align-items:center; gap:9px; cursor:pointer;
  padding:7px 9px; border-radius:8px;
  font-family:var(--sans); font-size:13px; color:var(--ink);
}
.dq-row:hover { background:var(--hover); }
.dq-row input { width:15px; height:15px; margin:0; accent-color:#c0392b; cursor:pointer; }
.dq-field { margin-bottom:4px; }
.dq-field label {
  display:block; margin-bottom:6px;
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3);
}
.dq-field input {
  width:100%; box-sizing:border-box; border:1px solid var(--rule);
  padding:10px 11px; font-family:var(--sans); font-size:14px;
  color:var(--ink); background:var(--card);
}
.dq-field input:focus { border-color:var(--ink); outline:none; }

/* ── Bonus sheet dialog summary ─────────────────────────────── */
.bn-sum { width:100%; border-collapse:collapse; margin:14px 0 2px; }
.bn-sum th, .bn-sum td {
  padding:8px 10px; border-bottom:1px solid var(--rule);
  font-family:var(--sans); font-size:13px; text-align:left; color:var(--ink-2);
}
.bn-sum th { font-weight:600; color:var(--ink); width:34%; }
.bn-sum td.bn-amt { text-align:right; font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink); width:22%; }
.bn-sum tr.bn-tot th, .bn-sum tr.bn-tot td {
  border-bottom:0; border-top:1.5px solid var(--ink-3);
  font-size:14.5px; color:var(--ink);
}
.bn-sum tr:nth-child(even) td { background:transparent; }

/* ── Gas Cards ───────────────────────────────────────────────────
   Phone-first: the dispatch desk uses this one-handed, so the tiles are
   thumb-sized and the state of every card reads at a glance. */
.gc-stats { grid-template-columns:repeat(3,1fr); margin-bottom:14px; }
.gc-stat { text-align:left; cursor:pointer; font:inherit; color:inherit; }
.gc-stat:hover { border-color:var(--muted); }
.gc-stat[aria-pressed="true"] { border-color:var(--text); }
.gc-stat.in .stat-value { color:var(--green); }
.gc-stat.out .stat-value { color:var(--yellow); }
.gc-stat.late .stat-value { color:var(--red); }

.gc-bar { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.gc-bar input[type=search] {
  flex:1 1 220px; min-width:0;
  background:var(--surface2); border:1px solid var(--border); border-radius:7px;
  padding:9px 11px; color:var(--text); font-family:var(--sans); font-size:13px; outline:none;
}
.gc-bar input[type=search]:focus { border-color:var(--border2); box-shadow:0 0 0 3px var(--accent-dim); }

.gc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:10px; }
.gc-tile {
  display:flex; flex-direction:column; gap:5px; text-align:left; min-width:0;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:12px; cursor:pointer; font:inherit; color:var(--text);
}
.gc-tile:hover { border-color:var(--muted); }
.gc-tile.late { border-color:var(--red); }
.gc-code { font-size:26px; font-weight:700; line-height:1; letter-spacing:.01em; }
.gc-meta { color:var(--muted); font-size:12.5px; overflow-wrap:anywhere; }
.gc-who  { font-weight:600; font-size:13px; overflow-wrap:anywhere; }
.gc-when { font-family:var(--mono); font-size:11.5px; color:var(--muted); }
.gc-pill {
  align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
  font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px;
}
.gc-pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.gc-pill.in   { background:rgba(99,201,138,.15); background:color-mix(in srgb, var(--green) 16%, transparent); color:var(--green); }
.gc-pill.out  { background:rgba(224,180,85,.17); background:color-mix(in srgb, var(--yellow) 18%, transparent); color:var(--yellow); }
.gc-pill.late { background:rgba(239,107,98,.15); background:color-mix(in srgb, var(--red) 16%, transparent); color:var(--red); }

.gc-lower { grid-template-columns:1fr 1.25fr; margin-top:18px; }
@media(max-width:1000px){ .gc-lower { grid-template-columns:1fr; } }
.gc-lower .att-head input[type=date] {
  background:var(--surface2); border:1px solid var(--border); border-radius:6px;
  padding:3px 7px; color:var(--text); font-family:var(--mono); font-size:11.5px;
}
.gc-t { font-family:var(--mono); font-size:11.5px; color:var(--muted); white-space:nowrap; }
.gc-tag {
  display:inline-block; min-width:34px; text-align:center;
  font-size:10px; font-weight:700; letter-spacing:.08em; padding:2px 6px; border-radius:5px;
}
.gc-tag.out { background:rgba(224,180,85,.17); background:color-mix(in srgb, var(--yellow) 18%, transparent); color:var(--yellow); }
.gc-tag.in  { background:rgba(99,201,138,.15); background:color-mix(in srgb, var(--green) 16%, transparent); color:var(--green); }

.gc-form { display:flex; gap:6px; padding:10px 12px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.gc-form input {
  flex:1 1 110px; min-width:0;
  background:var(--surface2); border:1px solid var(--border); border-radius:7px;
  padding:8px 10px; color:var(--text); font-family:var(--sans); font-size:13px; outline:none;
}
.gc-form input:focus { border-color:var(--border2); box-shadow:0 0 0 3px var(--accent-dim); }
.gc-form #gc-code { flex:0 0 96px; font-family:var(--mono); text-transform:uppercase; }
.gc-form #gc-last4 { flex:0 0 78px; }

.gc-labels-row { display:flex; gap:10px; align-items:flex-start; padding:11px 12px; border-top:1px solid var(--border); flex-wrap:wrap; }
.gc-note { color:var(--muted); font-size:12px; line-height:1.5; margin:0; flex:1 1 220px; }
.gc-warn { color:var(--yellow); margin:0 0 10px; }

/* the check in / out sheet */
.gc-modal-code { font-size:30px; font-weight:700; line-height:1.05; }
.gc-modal-meta { color:var(--muted); font-size:12.5px; margin-top:2px; }
.gc-status { border-radius:9px; padding:11px 13px; margin-bottom:14px; }
.gc-status b { display:block; font-size:15px; }
.gc-status span { font-size:12.5px; color:var(--muted); }
.gc-status.in   { background:rgba(99,201,138,.12); background:color-mix(in srgb, var(--green) 13%, transparent); }
.gc-status.out  { background:rgba(224,180,85,.15); background:color-mix(in srgb, var(--yellow) 15%, transparent); }
.gc-status.late { background:rgba(239,107,98,.12); background:color-mix(in srgb, var(--red) 13%, transparent); }
.gc-drivers {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:7px; max-height:290px; overflow:auto; margin-bottom:14px; padding:2px;
}
.gc-drv {
  text-align:left; padding:10px 11px; border:1px solid var(--border); border-radius:8px;
  background:var(--surface2); color:var(--text); font-family:var(--sans);
  font-size:13px; font-weight:600; cursor:pointer; min-width:0; overflow-wrap:anywhere;
}
.gc-drv:hover { border-color:var(--muted); }
.gc-drv small { display:block; font-weight:500; font-size:11px; color:var(--yellow); margin-top:2px; }
.gc-drv[aria-pressed="true"] { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.gc-drv[aria-pressed="true"] small { color:inherit; opacity:.85; }
.gc-big { width:100%; padding:13px; font-size:15px; justify-content:center; }

/* On the dispatch phone the three counters are a glance, not three screens —
   they stay side by side and shrink instead of stacking, and the Manage table
   drops the column dispatch never reads on a small screen. */
@media(max-width:700px){
  .gc-grid { grid-template-columns:repeat(auto-fill,minmax(138px,1fr)); gap:8px; }
  .gc-stats { grid-template-columns:repeat(3,1fr) !important; gap:7px !important; margin-bottom:12px; }
  .gc-stat { padding:9px 10px !important; }
  .gc-stat .stat-label { font-size:9.5px; letter-spacing:.3px; line-height:1.25; }
  .gc-stat .stat-value { font-size:27px; margin-top:2px; }
  .gc-lower .att-body { overflow-x:auto; }
  .gc-lower .att-card table { min-width:0; }
  .gc-manage th:nth-child(3), .gc-manage td:nth-child(3) { display:none; }
  .gc-form #gc-code { flex:1 1 90px; }
  .gc-labels-row { flex-direction:column; gap:8px; }
}
.gc-chip {
  display:inline-block; margin-left:6px; padding:1px 6px; border-radius:999px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(99,201,138,.15); background:color-mix(in srgb, var(--green) 16%, transparent);
  color:var(--green); vertical-align:middle;
}
.gc-or { display:flex; align-items:center; gap:10px; margin:16px 0 12px; color:var(--muted); font-size:12px; }
.gc-or::before, .gc-or::after { content:""; flex:1; height:1px; background:var(--border); }
.gc-form-plain { padding:0; border:0; margin-bottom:12px; }

/* ── Scorecard header: the company mark, centred, and nothing else ──
   The QR code and the repeated wordmark are gone. The card always prints on
   white, so the mark's own white ground never shows a seam. */
.sc-brand{ flex-direction:column; align-items:center; gap:9px; padding:18px 20px 10px; text-align:center; }
.sc-brand .mark{ height:40px; width:auto; display:block; }
.sc-brand .sc-links{ flex-direction:row; margin-left:0; justify-content:center; gap:18px; font-size:11.5px; }
@media print{ .sc-brand{ padding:10px 20px 8px } .sc-brand .mark{ height:34px } }

/* ── Bonus exclusion banner ────────────────────────────────────────
   Meant to be the first thing read on a disqualified driver's card, and to
   answer the question that always follows it. Fixed hex, not theme tokens:
   this block has to look the same on screen, in print and in the PDF zip. */
.sc-dq{
  margin:0 20px 16px; border:2.5px solid #c0392b; border-radius:10px;
  background:#fdf2f0; color:#16191c; overflow:hidden;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.sc-dq-h{ display:flex; align-items:center; gap:13px; padding:13px 16px; background:#c0392b; color:#fff; }
.sc-dq-h .ico{
  flex:none; width:30px; height:30px; border-radius:50%; background:#fff; color:#c0392b;
  display:grid; place-items:center; font-weight:800; font-size:19px; line-height:1;
}
.sc-dq-h b{ display:block; font-family:var(--cond,inherit); font-size:19px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; line-height:1.15; }
.sc-dq-h span{ display:block; font-size:11.5px; opacity:.9; letter-spacing:.03em; }
.sc-dq > .sc-dq-h{ padding-top:11px; padding-bottom:11px; }
.sc-dq-body{ padding:0; }
.sc-dq-body.two{ display:grid; grid-template-columns:1fr 210px; align-items:stretch; }
.sc-dq-why{ padding:13px 6px 13px 0; display:flex; align-items:center; }
.sc-dq-list{ margin:0; padding:0 18px 0 34px; list-style:disc; }
.sc-dq-list li{ font-size:13px; line-height:1.55; margin-bottom:7px; }
.sc-dq-list li:last-child{ margin-bottom:0; }
.sc-dq-list li b{ font-weight:700; }

/* The one number the driver came looking for, beside the reason rather than
   underneath it. Its own white panel so it reads as an answer, not a footnote. */
.sc-dq-rank{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:1px; padding:13px 14px; background:#fff; border-left:2px solid #e8c4bf;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.sc-dq-rank .k{ font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#8a5c56; line-height:1.35; }
.sc-dq-rank .v{ font-family:var(--cond,inherit); font-size:50px; font-weight:700; line-height:1;
  color:#c0392b; margin-top:6px; }
@media(max-width:620px){
  .sc-dq-body.two{ grid-template-columns:1fr; }
  .sc-dq-rank{ border-left:0; border-top:2px solid #e8c4bf; flex-direction:row; flex-wrap:wrap; gap:8px; }
  .sc-dq-rank .v{ margin-top:0; }
}

/* Never qualified, as opposed to lost it — stated, not shouted. */
.sc-dq.soft{ border-color:#d7dbdf; background:#f6f7f8; }
.sc-dq.soft .sc-dq-h{ background:#eceef0; color:#3a4046; }
.sc-dq.soft .sc-dq-h .ico{ background:#fff; color:#8b9299; font-size:16px; }
.sc-dq.soft .sc-dq-h b{ font-size:15px; }

/* ── Bonus badge ────────────────────────────────────────────────
   Left of the tier. Carries a third line the other badges don't: what the
   driver is paid and which check it lands on. */
.sc-badge.bonus .v{ font-size:30px; letter-spacing:-.01em; }
.sc-badge .sub{
  margin-top:5px; overflow-wrap:normal; word-break:keep-all; padding-top:5px; border-top:1px solid rgba(255,255,255,.3);
  font-size:10px; line-height:1.35; opacity:.92; max-width:132px;
}
/* Nothing earned: say so in grey rather than dressing $0 up in the tier colour. */
.sc-badge.bonus.flat{ background:#eceef0; color:#444c53; }
.sc-badge.bonus.flat .ico{ opacity:.45; }
.sc-badge.bonus.flat .v{ color:#8b9299; }
.sc-badge.bonus.flat .sub{ border-top-color:#d4d8dc; color:#5b6670; opacity:1; }
@media print{ .sc-badge.bonus, .sc-badge.bonus.flat{ -webkit-print-color-adjust:exact; print-color-adjust:exact; } }