:root {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --border: #d9dce1;
  --text: #1f2430;
  --muted: #6b7280;
  /* DockRelayX brand colors, sampled directly from the logo file (median
     pixel color of each element): deep navy wordmark + circuit-ring icon,
     vivid blue "RelayX", pale blue ring accents, cool gray "BY ACG". */
  --accent: #0057d8;
  --accent-dark: #0044ad;
  --brand-navy: #0a1220;
  --brand-blue-light: #cbe2f8;
  --radius: 10px;

  --c-scheduled: #9ca3af;
  --c-precooling: #3b82f6;
  --c-plugged_in: #f59e0b;
  --c-pulled: #8b5cf6;
  --c-in_yard: #14b8a6;
  --c-departed: #22c55e;
  --c-shuttled: #ec4899;
  --c-movement: #64748b;
  --c-realign: #06b6d4;
  --c-open-doors: #84cc16;
  --c-door-request: #fb923c;
  --c-door-available: #10b981;
  --c-load-ready: #0ea5e9;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161c;
    --panel: #1c1f27;
    --border: #2c313c;
    --text: #e7e9ee;
    --muted: #9aa1ac;
  }
}
:root[data-theme="dark"] {
  --bg: #14161c;
  --panel: #1c1f27;
  --border: #2c313c;
  --text: #e7e9ee;
  --muted: #9aa1ac;
}
:root[data-theme="light"] {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --border: #d9dce1;
  --text: #1f2430;
  --muted: #6b7280;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  overflow-x: hidden;
}

/* Live board-change alert -- fixed overlay, not in normal document flow,
   so it never shifts anything else when it shows/hides. Slides down from
   fully off-screen (translateY(-100%)) rather than just fading, so it
   reads as "popping up" the way the ask describes. */
.alert-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 150;
  padding: 14px 20px; text-align: center;
  font-size: 15px; font-weight: 700; color: #fff;
  transform: translateY(-100%); transition: transform .25s ease-out;
  cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.alert-banner.show { transform: translateY(0); }
.alert-banner.alert-new { background: var(--accent); }
.alert-banner.alert-ready { background: #16a34a; }

.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  flex-wrap: wrap; gap: 10px;
}
.topbar-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.topbar h1 { font-size: 18px; margin: 0; white-space: nowrap; }
.topbar select, .topbar input { padding: 6px 8px; }

/* Logo has a white background baked in (gradients/shadows in the artwork
   depend on it) -- rather than trying to key it transparent and risking
   the light-blue "RelayX" text getting eaten too, it sits on its own
   white card so it looks correct in both light and dark theme. */
.brand-logo {
  background: #fff;
  border-radius: 8px;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  line-height: 0;
}
.brand-logo img { height: 32px; width: auto; display: block; }

.whoami { display: flex; align-items: center; gap: 12px; }
.whoami input { width: 140px; }

/* Only ever shown once a 2nd terminal exists -- see updateTerminalIndicator()
   in app.js. A vertical rule separates it from the site picker that follows,
   same visual grouping idea as .whoami on the right side of the topbar. */
.terminal-indicator {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted);
  padding-right: 10px; border-right: 1px solid var(--border);
}

.link-btn {
  background: none; border: none; color: var(--accent); padding: 2px 4px;
  font-size: 13px; font-weight: 600; text-decoration: underline; cursor: pointer;
}

/* Quick search -- searches every DDP in the terminal at once, not just
   whichever one is selected in the site dropdown. Positioned relative so
   the results dropdown can anchor to it regardless of scroll position. */
.quick-search-bar {
  position: relative;
  padding: 10px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}
#quickSearchInput {
  width: 100%; max-width: 420px; padding: 9px 14px; font-size: 14px;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--bg); color: var(--text);
}
#quickSearchInput:focus { border-color: var(--accent); outline: none; }
.quick-search-results {
  position: absolute; top: 100%; right: 20px; left: auto; width: 100%;
  max-width: 420px;
  margin-top: 4px; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.18);
  max-height: 360px; overflow-y: auto; z-index: 60;
}
.quick-search-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13px;
}
.quick-search-row:last-child { border-bottom: none; }
.quick-search-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.quick-search-row .qs-site {
  flex: none; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; padding: 2px 7px; border-radius: 10px;
  background: var(--muted); color: #fff; white-space: nowrap;
}
.quick-search-row .qs-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-search-row .qs-main strong { color: var(--text); }
.quick-search-row .qs-date { flex: none; color: var(--muted); font-size: 12px; }
.quick-search-empty { padding: 12px 14px; color: var(--muted); font-size: 13px; }

.tabs { display: flex; gap: 4px; padding: 10px 20px 0; }
.tab-btn {
  background: none; border: none; padding: 10px 16px; cursor: pointer;
  border-bottom: 2px solid transparent; color: var(--muted); font-size: 14px; font-weight: 600;
}
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

main { padding: 16px 20px 40px; max-width: 1400px; margin: 0 auto; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Sits below <main>, outside every tab-panel, so it's on screen regardless
   of which tab (Board/Log/Dashboard/Company) is currently active. */
.app-footer {
  text-align: center; padding: 18px 20px 24px;
  font-size: 12px; color: var(--muted);
}

input, select, textarea, button {
  font: inherit; color: inherit;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
}
input, select, textarea { padding: 7px 9px; }
#bulkText { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; resize: vertical; }
button { cursor: pointer; padding: 7px 12px; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.primary:hover { background: var(--accent-dark); }
button.danger { background: #dc2626; border-color: #dc2626; color: #fff; }
button.icon-btn { background: none; border: none; font-size: 18px; padding: 2px 8px; }

.board-controls, .log-controls {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.updated-note { color: var(--muted); font-size: 12px; margin-left: auto; }
.log-controls input[type="text"] { flex: 1; min-width: 200px; }

.board-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px;
  align-items: start;
}
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  border-left: 5px solid var(--muted);
  padding: 12px 14px; cursor: pointer; transition: box-shadow .15s;
}
.card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.card.status-scheduled { border-left-color: var(--c-scheduled); }
.card.status-precooling { border-left-color: var(--c-precooling); }
.card.status-plugged_in { border-left-color: var(--c-plugged_in); }
.card.status-pulled { border-left-color: var(--c-pulled); }
.card.status-in_yard { border-left-color: var(--c-in_yard); }
.card.status-departed { border-left-color: var(--c-departed); opacity: .7; }
.card.status-shuttled { border-left-color: var(--c-shuttled); opacity: .85; }
.card.status-movement { border-left-color: var(--c-movement); }

.card-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.card-door { font-size: 18px; font-weight: 700; }
.status-badge {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 2px 8px; border-radius: 20px; color: #fff; white-space: nowrap;
}
.status-badge.status-scheduled { background: var(--c-scheduled); }
.status-badge.status-precooling { background: var(--c-precooling); }
.status-badge.status-plugged_in { background: var(--c-plugged_in); }
.status-badge.status-pulled { background: var(--c-pulled); }
.status-badge.status-in_yard { background: var(--c-in_yard); }
.status-badge.status-departed { background: var(--c-departed); }
.status-badge.status-shuttled { background: var(--c-shuttled); }
.status-badge.status-movement { background: var(--c-movement); }
/* Movement Type labels ("Backhaul Staging", "Dunnage Cleanout") run longer
   than the usual one-word statuses -- shrink and let it wrap instead of
   overflowing the card or forcing the card wider. */
.status-badge.movement-badge {
  font-size: 9px; white-space: normal; text-align: right;
  max-width: 55%; line-height: 1.3;
}

.card-row { display: flex; justify-content: space-between; font-size: 13px; margin: 3px 0; }
.card-row .route-arrow { color: var(--muted); }
.card-row .k { color: var(--muted); }

/* Movement Sheet cards read more like a compact activity log than a
   schedule card -- slightly smaller text throughout for a cleaner look. */
.movement-card .card-door { font-size: 15px; }
.movement-card .card-row { font-size: 12px; margin: 2px 0; }
.card-trailer { font-weight: 600; margin-bottom: 4px; }
.card-divider { border-top: 1px dashed var(--border); margin: 8px 0 6px; }

.quick-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.quick-btn {
  flex: 1; min-width: 64px; min-height: 34px; padding: 6px 10px;
  border: none; border-radius: 8px; font-weight: 700; font-size: 13px;
  color: #fff; cursor: pointer;
}
.quick-btn.plug { background: var(--c-plugged_in); }
.quick-btn.call { background: #64748b; }
.quick-btn.pulled { background: var(--c-pulled); }
.quick-btn.shuttle { background: var(--c-shuttled); }
.quick-btn.realign { background: var(--c-realign); }
.quick-btn.open-doors { background: var(--c-open-doors); }
.quick-btn.door-request { background: var(--c-door-request); }
.quick-btn.door-available { background: var(--c-door-available); }
.card-row.shuttle-info { color: var(--c-shuttled); font-weight: 700; }
.card-row.realign-info { color: var(--c-realign); font-weight: 700; }
.card-row.open-doors-info { color: var(--c-open-doors); font-weight: 700; }
.card-row.door-avail-info { color: var(--c-door-request); font-weight: 700; }
.card-row.door-avail-info.responded { color: var(--c-door-available); }

.quick-btn:active { filter: brightness(0.85); }
.quick-btn-sm { flex: none; min-width: 0; min-height: 0; padding: 5px 12px; font-size: 12px; white-space: nowrap; }

.table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: 13px; white-space: nowrap; }
/* Door Req./Door Avail./Response columns only mean anything for a site
   with track_door_availability on (Mixing Center) -- always in the DOM,
   just hidden everywhere else via this class on #logTable (toggled in
   applyRoleVisibility()) rather than conditionally building the row HTML. */
.door-avail-col { display: none; }
#logTable.tracks-door-availability .door-avail-col { display: table-cell; }
th, td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--border); }
thead th { position: sticky; top: 0; background: var(--panel); color: var(--muted); font-weight: 600; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }

/* Modal */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45);
  align-items: center; justify-content: center; z-index: 50; padding: 16px;
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--panel); border-radius: var(--radius); width: 100%; max-width: 640px;
  max-height: 90vh; overflow-y: auto; border: 1px solid var(--border);
}
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.modal-header h2 { margin: 0; font-size: 16px; }

/* Plug / Pulled / Shuttle / Log Movement popups — sized to read from the
   driver's seat with the device mounted on the dash: bigger text and tap
   targets than the regular form, but not so big the popup itself needs
   scrolling to reach the buttons (Log Movement in particular has enough
   fields that the earlier, larger sizing pushed it past one screen). */
.plug-modal {
  max-width: 480px; width: 95%;
}
.plug-modal .modal-header { padding: 14px 18px; }
.plug-modal .modal-header h2 { font-size: 19px; }
.plug-modal .modal-header .icon-btn { font-size: 24px; padding: 2px 8px; }
#plugForm, #pullForm { padding: 16px; }
.plug-modal .form-grid { gap: 12px 12px; }
.plug-modal .form-grid label { font-size: 15px; font-weight: 600; gap: 5px; }
.plug-modal .form-grid input,
.plug-modal .form-grid select,
.plug-modal .form-grid textarea {
  font-size: 16px; padding: 10px 12px; min-height: 42px; border-radius: 8px;
  font-family: inherit;
}
.plug-modal .form-grid textarea { min-height: unset; }
/* Marks a Plug/Pull popup field as required -- the input's own `required`
   attribute is what actually blocks submission (and is automatically
   skipped by the browser for a field hidden via a site's hidden_fields,
   since a display:none field is never a constraint-validation candidate),
   this is just the visible cue next to the label. */
.required-mark { color: #ef4444; font-weight: 700; }
.plug-modal .modal-footer { gap: 10px; margin-top: 14px; }
.plug-modal .modal-footer button {
  font-size: 16px; font-weight: 700; padding: 11px 18px; min-height: 44px; border-radius: 8px;
}
#entryForm { padding: 16px 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.form-grid .section-label { grid-column: 1 / -1; margin-top: 8px; font-weight: 700; color: var(--text); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; border-top: 1px solid var(--border); padding-top: 10px; }
.form-grid .full-width { grid-column: 1 / -1; }
.form-grid label.checkbox-field {
  flex-direction: row; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text);
  padding: 6px 8px; border-radius: 6px; cursor: pointer;
}
.form-grid label.checkbox-field:has(input:checked) {
  color: var(--c-realign); background: color-mix(in srgb, var(--c-realign) 12%, transparent);
}
.form-grid label.checkbox-field input { width: 16px; height: 16px; accent-color: var(--c-realign); cursor: pointer; flex: none; }
.form-grid label.checkbox-field .field-hint { font-weight: 400; color: var(--muted); }
.modal-footer { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.modal-footer .spacer { flex: 1; }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* Sign-in */
.signin-overlay { z-index: 100; }
.signin-modal { max-width: 420px; padding: 22px 24px; text-align: center; }
.signin-modal h2 { margin-top: 0; }
.signin-modal hr { border: none; border-top: 1px solid var(--border); margin: 18px 0; }
.signin-modal .form-grid { grid-template-columns: 1fr; text-align: left; }
#signInError { color: #ef4444; min-height: 16px; }
#pinInput { width: 100%; font-size: 22px; text-align: center; letter-spacing: 6px; padding: 10px; margin-top: 8px; }
#pinEntryName { color: var(--accent); }

#employeeSelect {
  width: 100%; padding: 12px 14px; font-size: 16px; font-weight: 600;
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--panel); color: var(--text);
}
#employeeSelect:hover { border-color: var(--accent); }

/* Terminal picker -- one big tappable button per terminal, same idea as
   the old site button grid this app used before the sign-in dropdown. */
.terminal-picker-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.terminal-pick-btn {
  width: 100%; padding: 14px; font-size: 16px; font-weight: 700;
  border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--panel); color: var(--text); cursor: pointer;
}
.terminal-pick-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Staff management */
.join-code-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 14px; margin: 14px 0; font-size: 13px;
}
#joinCodeValue { font-family: monospace; font-size: 16px; letter-spacing: .06em; color: var(--accent); }
.join-code-row button { flex: none; white-space: nowrap; }
.staff-table { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
.staff-table th, .staff-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); font-size: 14px; }
.staff-table td:last-child { text-align: right; white-space: nowrap; }
.staff-table button { font-size: 12px; padding: 4px 8px; margin-left: 6px; }
hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

/* Board: flat, chronological by plug time — each plug is its own card,
   sorted by time rather than grouped by door (a reused door's two plugs can
   land far apart in the list, at their own times). */
.board-subsection { margin-top: 18px; }
.board-subsection h3 { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; }
.board-subsection:empty, .board-subsection.hidden { display: none; }

.card-time {
  font-size: 12px; font-weight: 700; color: var(--muted);
  background: color-mix(in srgb, var(--muted) 15%, transparent);
  border-radius: 12px; padding: 2px 10px; margin-left: 8px;
}
/* Store # (or whatever a site relabels it to) shown right next to the door
   number at the top of the card -- moved up from the generic details list
   below so it's visible at a glance instead of needing to scroll a card's
   full detail rows to find it. */
.card-store {
  font-size: 12px; font-weight: 700; color: #fff;
  background: var(--accent);
  border-radius: 12px; padding: 2px 10px; margin-left: 8px;
}
.card.overdue { border-left-color: #ef4444; }
.card-door.overdue-text { color: #ef4444; }
.card-door.overdue-text .card-time { color: #fff; background: #ef4444; }

/* Mixing Center-only (see isDoorReadyToPlug in app.js): a small green
   checkmark badge right next to the door number -- not a border color --
   the moment a door actually opened up and hasn't been plugged yet, so
   "go plug this one" is unmistakable at a glance instead of something to
   notice peripherally. Doesn't touch the Plug quick-action button's own
   color. Disappears the moment it's actually plugged in. */
.card-ready-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-left: 8px;
  border-radius: 50%; background: #16a34a; color: #fff;
  font-size: 12px; font-weight: 700; vertical-align: middle;
}

/* Carry-over: loads still sitting at a door (not yet pulled) from an
   earlier date, surfaced above today's own cards so a container/mixing
   load that takes more than one day to finish never quietly falls off the
   board just because the calendar rolled over. */
.carry-over-section h3 { color: #b45309; }
.carry-over-section .card { border-top: 3px solid #f59e0b; }
.card-age-badge {
  font-size: 12px; font-weight: 700; color: #fff;
  background: #f59e0b;
  border-radius: 12px; padding: 2px 10px; margin-left: 8px;
}

.empty-doors { display: flex; flex-wrap: wrap; gap: 8px; }
.empty-doors .chip {
  border: 1px dashed var(--border); border-radius: 20px; padding: 5px 12px;
  font-size: 13px; color: var(--muted); cursor: pointer; background: var(--panel);
}
.empty-doors .chip:hover { border-color: var(--accent); color: var(--accent); }
.empty-doors .chip.chip-disabled { cursor: default; opacity: .6; }
.empty-doors .chip.chip-disabled:hover { border-color: var(--border); color: var(--muted); }

.role-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 1px 6px; border-radius: 10px; margin-left: 6px; background: var(--muted); color: #fff;
}
/* ops and wcd share a color -- same permission tier, two labels for it. */
.role-badge.ops, .role-badge.wcd { background: var(--accent); }
.role-badge.super_admin { background: #b45309; }
.role-badge.company_admin { background: #7c3aed; }

.field-hint { font-size: 11px; color: var(--muted); font-weight: 400; }
.default-temp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.default-temp-row label { font-size: 12px; color: var(--muted); }

.format-row { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.format-row label { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; cursor: pointer; }

/* ---------- Admin Dashboard ---------- */
.dashboard-controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px;
}
.dashboard-controls select { padding: 6px 8px; }

.kpi-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.stat-tile {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px;
}
.stat-tile .stat-label { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.stat-tile .stat-value { font-size: 30px; font-weight: 700; margin-top: 4px; color: var(--text); }
.stat-tile.stat-alert .stat-value { color: #d03b3b; }
.stat-tile.stat-good .stat-value { color: #0ca30c; }

.dashboard-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;
}
@media (max-width: 800px) {
  .dashboard-grid { grid-template-columns: 1fr; }
}

.dashboard-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 16px;
}
.dashboard-card h3 { margin: 0 0 2px; font-size: 15px; }
.dashboard-card .updated-note { margin-bottom: 12px; }

/* Per-site stacked status bars */
.site-status-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.site-status-row .site-name { width: 130px; flex-shrink: 0; font-size: 13px; font-weight: 600; }
.site-status-row .site-total { width: 34px; flex-shrink: 0; font-size: 12px; color: var(--muted); text-align: right; }
.status-bar-track {
  flex: 1; display: flex; height: 20px; border-radius: 5px; overflow: hidden;
  background: var(--bg); border: 1px solid var(--border);
}
.status-bar-seg { height: 100%; }
.status-bar-seg + .status-bar-seg { border-left: 2px solid var(--panel); }

.chart-legend { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 14px; }
.chart-legend .legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.chart-legend .legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* Trend bar chart */
.trend-chart { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-top: 10px; }
.trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.trend-bar { width: 100%; max-width: 28px; border-radius: 4px 4px 0 0; background: var(--accent); min-height: 2px; }
.trend-col .trend-day-label { font-size: 10px; color: var(--muted); margin-top: 6px; white-space: nowrap; }

/* Leaderboard */
.leaderboard-item { margin: 10px 0; }
.leaderboard-row { display: flex; align-items: center; gap: 10px; }
.leaderboard-row .lb-rank { width: 22px; flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--muted); text-align: right; }
.leaderboard-row .lb-name { width: 140px; flex-shrink: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-row .lb-track { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 5px; height: 20px; overflow: hidden; }
/* Filled to each person's share of the top performer's total (unchanged
   from before), but now color-coded by action type instead of one solid
   fill -- same technique as the "Today by Site" status bar (.status-bar-seg)
   just reused here for the leaderboard's own action-type legend. */
.leaderboard-row .lb-fill { height: 100%; display: flex; min-width: 2px; }
.leaderboard-row .lb-seg { height: 100%; }
.leaderboard-row .lb-seg + .lb-seg { border-left: 2px solid var(--panel); }
.leaderboard-row .lb-value { width: 30px; flex-shrink: 0; font-size: 12px; font-weight: 700; text-align: right; }
/* Per-action breakdown line under each person's bar (Plug/Load Ready/Pull/
   Shuttle/Movement) -- indented to roughly align under lb-name (rank width
   + gap). Zero-count actions are left out entirely, not shown grayed. */
.lb-breakdown { margin: 4px 0 0 32px; font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.lb-breakdown b { color: var(--text); font-weight: 700; }