/* ═══════════════════════════════════════════════════════════════
   Scheduler — styled to match the duct-canvas editor (app.html)
   Same product family: dark slate surfaces, brand-blue accent, floating
   glass panels (blur + soft shadow + inset top-light edge), a light-dotted
   work-surface backdrop with a faint blue vignette, and the editor's
   button feel (hover lift, active scale). The markup keeps its .sched-*
   hooks; component internals come from dashboard.css, recoloured via the
   token overrides below.
   ═══════════════════════════════════════════════════════════════ */

/* ── Airflow palette (dark-default) ──
   The dispatch board now shares the neuralduct "Airflow"/plenum identity used by
   the hub + dashboard: warm near-black paper, the signature ice-blue supply accent
   (with a red return accent for urgent/exhaust states), Sora type, and FLAT
   ink-tinted chrome instead of the old heavy editor-glass blur. Kept dark by
   default — dispatchers live on this screen all day. Light variant below. */
body.sched-app {
  --bg:            #0e0f12;
  --bg-secondary:  #15171c;
  --surface:       #1b1e25;
  --card:          #1b1e25;
  --bg-card:       #1b1e25;
  --bg-card-hover: #23272f;
  --bg-sidebar:    #15171c;
  --bg-modal:      #1b1e25;
  --border:        #2c313b;
  --border-strong: #3a404c;
  --text:          #f2f4f8;
  --text-primary:  #f2f4f8;
  --text-secondary:#aeb6c4;
  --text-muted:    #727b8b;
  /* Airflow-dark ice-blue (supply) accent — brighter than the old #1493e6 so it
     reads on warm near-black, and clearly distinct from the teal en-route status. */
  --accent:        #33b1ff;
  --accent-hover:  #5cc0ff;
  --accent-soft:   rgba(51,177,255,0.14);
  --accent-edge:   rgba(51,177,255,0.45);
  --accent-glow:   rgba(51,177,255,0.28);
  /* Red return accent — urgent / overdue / exhaust states. */
  --hot:           #ff5c5c;
  --hot-soft:      rgba(255,92,92,0.12);

  /* Semantic job-status colours (--st-scheduled … --st-invoiced) are defined
     once in tokens.css and consumed here via the [data-status] map below.
     They MUST stay in sync with JOB_STATUS in js/scheduler/state.js. */
  --st: var(--st-scheduled);   /* per-chip fallback; set by [data-status] below */

  /* Flat Airflow surfaces (glass tokens retuned: near-solid panels, gentle
     ink-tinted shadow, light blur — the old heavy blur/black-drop is gone). */
  --glass-bg:     rgba(24, 27, 33, 0.96);
  --glass-bg-2:   rgba(29, 32, 40, 0.97);
  --glass-border: rgba(255, 255, 255, 0.07);
  --glass-shadow: 0 1px 2px rgba(0,0,0,.28), 0 12px 30px -14px rgba(0,0,0,.55);
  --glass-blur:   blur(8px) saturate(115%);
  --topbar-h:     50px;
  --float-gap:    14px;

  background-color: var(--bg);
  color: var(--text);
  /* style.css (the editor shell) locks body to `height:100vh; overflow:hidden`.
     The scheduler is a normal scrolling document, so undo that here. */
  height: auto;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  /* Calm Airflow backdrop — a single soft ice-blue vignette, no CAD dot-grid. */
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(51,177,255,0.07), transparent 62%);
  background-attachment: fixed;
}

/* Map each job status onto --st so a single set of chip/badge rules colours by
   status with no per-status duplication. Driven by the data-status attribute
   that viewhtml.js already stamps on every chip/event/card. */
.sched-app [data-status="scheduled"]   { --st: var(--st-scheduled); }
.sched-app [data-status="en_route"]    { --st: var(--st-en_route); }
.sched-app [data-status="in_progress"] { --st: var(--st-in_progress); }
.sched-app [data-status="complete"]    { --st: var(--st-complete); }
.sched-app [data-status="no_show"]     { --st: var(--st-no_show); }
.sched-app [data-status="cancelled"]   { --st: var(--st-cancelled); }
.sched-app [data-status="invoiced"]    { --st: var(--st-invoiced); }

html, body {
  height: 100%;
  margin: 0;
  font-family: 'Sora', system-ui, sans-serif;
}

/* ── Page shell ── */
.sched-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* clear the fixed floating topbar */
  padding-top: calc(var(--topbar-h) + var(--float-gap) * 2);
}

/* ── Floating glass topbar (like the editor's immersive topbar) ── */
.sched-topbar {
  position: fixed;
  top: var(--float-gap);
  left: var(--float-gap);
  right: var(--float-gap);
  height: var(--topbar-h);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-3_5);
  border-radius: 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.sched-back.btn-icon {
  width: 30px; height: 30px;
  color: var(--text-secondary);
  text-decoration: none;
}
.sched-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.sched-brand-mark { border-radius: 6px; display: block; }
.sched-brand-name { font-weight: 700; font-size: 14px; color: var(--text-primary); letter-spacing: -0.01em; }
.sched-brand-name b, .sched-app .auth-gate-name b { font-weight: 800; color: var(--accent); }
.sched-brand-sep  { color: var(--text-muted); font-weight: 400; }
.sched-brand-page { font-weight: 600; font-size: 14px; color: var(--text-secondary); }
.sched-topbar-spacer { flex: 1; }
.sched-clock {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: .04em;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
}

/* ── Page body ── */
.sched-page-body {
  flex: 1;
  padding: var(--sp-1) var(--sp-5) var(--sp-10);
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  box-sizing: border-box;
}
/* Section switching driven by the topbar tabs — only the active section shows. */
.sched-sections { width: 100%; min-width: 0; }
.sched-sections > section.dash-section { display: none; }
.sched-sections[data-section="board"]     #sec-scheduler { display: block; }
.sched-sections[data-section="customers"] #sec-customers { display: block; }
.sched-sections[data-section="equipment"] #sec-equipment { display: block; }
.sched-sections[data-section="reports"]   #sec-reports   { display: block; }

/* ── Topbar section tabs (Board / Customers / Equipment / Reports) ── */
.sched-tabs {
  display: flex;
  align-items: center;
  gap: var(--sp-0_5);
  padding: 3px;
  border-radius: 11px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
}
.sched-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1_5);
  padding: var(--sp-1_5) var(--sp-2_5);
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.sched-tab i { font-size: 16px; }
.sched-tab:hover { color: var(--text-primary); }
.sched-tab.active {
  background: var(--accent-soft, rgba(59,130,246,0.16));
  color: var(--accent);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
html.sched-light .sched-tabs { background: rgba(15,23,42,0.04); }

/* ── Glass panel recipe applied to the toolbar + calendar surface ──
   The rail columns are NOT panels any more — they're transparent containers for
   a stack of individual rail cards (see the rail-cards block below), so the
   calendar reads as the hero. */
.sched-app .sched-toolbar,
.sched-app .sched-main {
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* ── Editor button feel (hover lift, active scale, blue active) ── */
.sched-app .btn {
  /* The editor's style.css makes .btn / .btn-primary width:100% (meant for its
     sidebar). On the scheduler, buttons live in toolbars/footers/rows and must
     size to content — otherwise they stretch full-width and crush their row
     (this is what broke the History "Report" button's card). */
  width: auto;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  color: var(--text-secondary);
  border-radius: 8px;
  transition: background .15s, color .15s, border-color .15s, transform .12s ease;
}
.sched-app .btn-primary { width: auto; }
/* …except the sign-in button in the auth gate, which is meant to fill its card. */
.sched-app .auth-gate-btn { width: 100%; }
.sched-app .btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-1px);
}
.sched-app .btn:active { transform: scale(0.96); }
.sched-app .btn.active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-edge);
}
.sched-app .btn-primary,
.sched-app .sched-toolbar .btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
}
.sched-app .btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 4px 12px var(--accent-glow);
  transform: translateY(-1px);
}

/* ── Section toolbar → command bar (own the layout; buttons stay compact) ── */
.sched-app .sched-toolbar {
  padding: var(--sp-3) var(--sp-3_5);
  margin-bottom: 14px;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
}
.sched-app .sched-toolbar-controls {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.sched-app .sched-toolbar-controls > * { flex: 0 0 auto !important; width: auto !important; }
.sched-app .sched-toolbar-controls .btn,
.sched-app .sched-toolbar-controls a.btn {
  width: auto !important;
  flex: 0 0 auto !important;
  min-height: 34px;
  justify-content: center;
}
.sched-app .sched-nav { display: flex; gap: var(--sp-1_5); }
.sched-app .sched-nav .btn { width: auto !important; }
.sched-app .sched-toolbar-controls .sched-label {
  min-width: 140px;
  text-align: center;
  margin-right: auto;
  padding: 0 var(--sp-1_5);
  font-weight: 700;
  color: var(--text-primary);
}
/* Board-tools cluster: the utilities (density/stats/map/requests/settings) sit
   together as a plain button row — each button already carries its own border,
   so no wrapping box (it read as a box-around-boxes). Add Job stays isolated at
   the far right. */
.sched-app .sched-util-cluster {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
/* Keep the primary action clearly separated from the tool cluster. */
.sched-app .sched-add-job { margin-left: var(--sp-1_5); }
@media (max-width: 900px) {
  /* On narrow widths the cluster wraps as a unit rather than scattering. */
  .sched-app .sched-util-cluster { flex-wrap: wrap; }
}

/* Section title: keep the editor's understated header weight */
.sched-app .section-title { font-weight: 700; }
.sched-app .section-subtitle { color: var(--text-muted); }

/* View switch — segmented control with a sliding active pill. The pill is a
   .sched-view-ind element positioned by views.js (_positionViewIndicator);
   the buttons themselves stay transparent and sit above it. */
.sched-app .sched-viewswitch {
  position: relative;
  background: rgba(0,0,0,.25);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: var(--sp-1);
}
.sched-app .sched-view-ind {
  position: absolute;
  top: var(--sp-1); bottom: var(--sp-1); left: 0;
  border-radius: 6px;
  background: var(--accent);
  box-shadow: 0 2px 10px -3px var(--accent-glow);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1), width .22s cubic-bezier(.4, 0, .2, 1), opacity .15s;
  pointer-events: none;
}
.sched-app .sched-viewbtn {
  position: relative;
  z-index: 1;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 12px;
  border-radius: 6px;
  padding: var(--sp-1_5) var(--sp-3);
  transition: color .15s;
}
.sched-app .sched-viewbtn:hover { color: var(--text-primary); }
.sched-app .sched-viewbtn.active { color: #fff; }

/* ── 3-pane operations layout ── */
.sched-app .sched-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 300px;
  gap: var(--sp-3_5);
  align-items: start;
}
.sched-railcol {
  padding: 0;
  position: sticky;
  top: calc(var(--topbar-h) + var(--float-gap) * 2 + var(--sp-1));
}
.sched-railcol-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--sp-0_5) var(--sp-1) var(--sp-2_5);
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.sched-railcol-title i { color: var(--accent); font-size: 14px; }

.sched-app .sched-main {
  padding: var(--sp-3);
  min-height: 60vh;
  overflow-x: auto;
}

/* ── Rail cards ──
   Every direct child of a rail column is now its own card: a flat Airflow
   surface with the shared shadow, stacked with a gap. This replaces the old
   "flatten everything into one panel" approach and gives the rail a clear,
   scannable, card-per-widget rhythm. */
.sched-app .sched-railcol > * {
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: var(--glass-shadow);
  padding: var(--sp-3);
  margin: 0;
}
.sched-app .sched-railcol > * + * { margin-top: var(--sp-2_5); }
/* The old dashboard .sched-rail chrome is superseded by the card rule above. */
.sched-app .sched-railcol .sched-rail {
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-border);
}

/* ── Collapsible rail cards ──
   Any rail card with a .sched-rail-head can collapse to just its header (state
   persisted in extras.js). A caret on the right shows/rotates for affordance;
   the header stays clickable except over its inner controls (add-tech button,
   counts). Lets a dispatcher tuck away lower-priority cards so the calendar
   stays the focus. */
.sched-app .sched-railcol .sched-rail-head {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: var(--sp-5);
  transition: margin-bottom .15s ease;
}
.sched-app .sched-railcol .sched-rail-head::after {
  content: "";
  position: absolute; right: var(--sp-0_5); top: 50%;
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-60%) rotate(45deg);   /* ⌄ expanded */
  opacity: .5;
  transition: transform .18s ease, opacity .15s ease;
}
.sched-app .sched-railcol .sched-rail-head:hover::after { opacity: 1; }
.sched-app .sched-rail-collapsed > .sched-rail-head::after { transform: translateY(-30%) rotate(-135deg); }  /* ⌃ collapsed */
.sched-app .sched-rail-collapsed > .sched-rail-head { margin-bottom: 0; }
/* High specificity (id-free) so it beats component display rules without !important. */
.sched-app .sched-railcol .sched-rail-collapsed > :not(.sched-rail-head) { display: none; }

/* ── Job chips — dual-encoded (status + technician) ──
   DUAL ENCODING so a dispatcher can triage the whole board at a glance:
     · the LEFT EDGE is the job STATUS colour (--st, set by [data-status]) — the
       single most important read, so it owns the strongest, boldest edge;
     · the BODY TINT + text accent stay the TECHNICIAN colour (--jc, inline from
       viewhtml.js) so you still see who owns the job.
   Where the chip has room (day/week/swimlane events) a status dot reinforces the
   edge. Times are bold tabular numerals. */
.sched-app .sched-chip,
.sched-app .sched-event,
.sched-app .sched-swim-event,
.sched-app .sched-swim-chip {
  background: color-mix(in srgb, var(--jc, var(--accent)) 15%, var(--card));
  border-left: 4px solid var(--st);
  color: var(--text-primary);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,.28);
  transition: background .12s, transform .12s, box-shadow .12s;
}
.sched-app .sched-chip:hover,
.sched-app .sched-event:hover,
.sched-app .sched-swim-event:hover,
.sched-app .sched-swim-chip:hover {
  background: color-mix(in srgb, var(--jc, var(--accent)) 26%, var(--card));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -2px rgba(0,0,0,.42);
}
.sched-app .sched-chip b,
.sched-app .sched-event-time,
.sched-app .sched-swim-event b {
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--jc, var(--accent)) 55%, var(--text-primary));
}
.sched-app .sched-event-time { display: flex; align-items: center; gap: var(--sp-1); }
.sched-app .sched-event:hover .sched-event-resize { background: color-mix(in srgb, var(--st) 55%, transparent); }

/* Status dot — reinforces the status edge where the chip is wide enough to
   carry it (day/week timed events + swimlane bars). Pure CSS via --st.
   NB: the events are already position:absolute (dashboard.css) which anchors
   the ::after dot — do NOT set position:relative here or timed jobs fall out
   of the absolutely-positioned time grid and stack at the bottom. */
.sched-app .sched-event > .sched-event-title,
.sched-app .sched-swim-event { padding-right: var(--sp-3_5); }
.sched-app .sched-event::after,
.sched-app .sched-swim-event::after {
  content: ""; position: absolute; top: var(--sp-1_5); right: var(--sp-1_5);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--st);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--st) 26%, transparent);
}
/* In-progress + no-show are time-critical — give their dot a gentle pulse. */
@media (prefers-reduced-motion: no-preference) {
  .sched-app .sched-event[data-status="in_progress"]::after,
  .sched-app .sched-event[data-status="no_show"]::after,
  .sched-app .sched-swim-event[data-status="in_progress"]::after,
  .sched-app .sched-swim-event[data-status="no_show"]::after { animation: schedStatusPulse 2s ease-out infinite; }
}
@keyframes schedStatusPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--st) 60%, transparent); }
  70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--st) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--st) 0%, transparent); }
}

/* Completed jobs — softer than the old opacity:.5 + line-through (which hurt
   legibility). Keep them clearly "done" via a muted body + the green status
   rail/dot, but readable and un-struck. Overrides the dashboard.css default. */
.sched-app .sched-chip.is-complete,
.sched-app .sched-event.is-complete,
.sched-app .sched-swim-event.is-complete,
.sched-app .sched-list-card.is-complete {
  opacity: .74;
  text-decoration: none;
}
.sched-app .sched-chip.is-complete:hover,
.sched-app .sched-event.is-complete:hover,
.sched-app .sched-swim-event.is-complete:hover,
.sched-app .sched-list-card.is-complete:hover { opacity: 1; }

/* Technician on leave — diagonal-stripe shaded lane + label */
.sched-app .sched-swim-track .sched-swim-leave {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-1);
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--text-muted) 9%, transparent) 0, color-mix(in srgb, var(--text-muted) 9%, transparent) 8px,
    transparent 8px, transparent 16px);
}
.sched-app .sched-swim-row.is-onleave .sched-swim-tech { opacity: .6; }
.sched-app .sched-leave-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 14%, transparent);
  padding: 1px 6px; border-radius: 5px; margin-left: var(--sp-1);
}

/* Technician time-off list inside the tech modal */
.sched-app .sched-timeoff-list { display: flex; flex-direction: column; gap: var(--sp-1); margin: var(--sp-2) 0; }
.sched-app .sched-timeoff-empty { font-size: 13px; color: var(--text-muted); }
.sched-app .sched-timeoff-item {
  display: flex; align-items: center; gap: var(--sp-2); font-size: 13px;
  padding: var(--sp-1) var(--sp-2); background: var(--surface-2, rgba(127,127,127,.06)); border-radius: 7px;
}
.sched-app .sched-timeoff-dates { font-weight: 600; color: var(--text-primary); }
.sched-app .sched-timeoff-reason { color: var(--text-muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-app .sched-timeoff-del { margin-left: auto; border: 0; background: none; color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 var(--sp-1); }
.sched-app .sched-timeoff-del:hover { color: #ef4444; }
.sched-app .sched-timeoff-add { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.sched-app .sched-timeoff-add input[type="text"] { flex: 1; min-width: 120px; }
.sched-app .sched-timeoff-sep { color: var(--text-muted); }

/* Timesheets section in the stats modal */
.sched-app .sched-timesheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.sched-app .sched-timesheet-controls { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }

/* Tiny technician initials on timed events */
.sched-ev-av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--jc, var(--accent));
  color: #fff;
  font-size: 8px; font-weight: 800; letter-spacing: .02em;
  margin-left: auto;
  flex-shrink: 0;
}
/* Tech rail: initials avatars replace the plain dots */
.sched-tech-av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  color: #fff;
  font-size: 9px; font-weight: 800;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}

/* ── Live now line — accent, pulsing dot, time pill ── */
.sched-app .sched-nowline {
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-edge);
}
.sched-app .sched-nowline::before {
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(51,177,255,.55);
}
.sched-nowline-lbl {
  position: absolute;
  left: var(--sp-3);
  top: calc(var(--sp-2_5) * -1);
  background: var(--accent);
  color: #0b1020;
  font-size: 9px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding: var(--sp-0_5) var(--sp-1_5);
  border-radius: 999px;
  pointer-events: none;
}

/* ── Working-hours texture: off days get a subtle diagonal hatch, today's
      column a faint accent wash ── */
.sched-app .sched-tg-col.is-offday,
.sched-app .sched-month-cell.is-offday {
  background:
    repeating-linear-gradient(-45deg, rgba(120,135,170,0.055) 0 5px, transparent 5px 11px),
    rgba(0,0,0,0.22);
}
.sched-app .sched-tg-col.is-today { background: rgba(51,177,255,0.05); }
.sched-app .sched-tg-headcell.is-today { box-shadow: inset 0 -2px 0 var(--accent); }

/* ═══════════════════════════════════════════════════════════════
   Modals — job + settings overhaul (editor glass cards)
   ═══════════════════════════════════════════════════════════════ */
.sched-app .modal-box {
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Structured modal: sticky head + scrolling body + sticky footer */
.sched-app .sched-modal {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  padding: 0;
  overflow: hidden;
  width: 100%;
}
.sched-modal-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
  flex-shrink: 0;
}
.sched-modal-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--sp-2_5);
  color: var(--text-primary);
}
.sched-modal-ico {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-edge);
  color: var(--accent);
  font-size: 17px;
}
.sched-modal-x {
  margin-left: auto;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  transition: background .15s, color .15s, transform .12s;
}
.sched-modal-x:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
.sched-modal-x:active { transform: scale(0.94); }
.sched-modal-ico-green {
  background: rgba(34,197,94,0.14);
  border-color: rgba(34,197,94,0.40);
  color: #22c55e;
}
.sched-modal-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  padding: var(--sp-0_5) var(--sp-2);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.sched-modal-status { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.sched-color-input {
  width: 100%; height: 40px;
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  cursor: pointer;
}
.sched-modal-body {
  padding: 16px 18px;
  overflow-y: auto;
  flex: 1;
}
.sched-app .sched-modal .sched-modal-footer {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-2_5);
  flex-wrap: wrap;
  margin: 0;
  padding: 13px 18px;
  border-top: 1px solid var(--border);
  background: linear-gradient(0deg, rgba(0,0,0,0.18), transparent);
  flex-shrink: 0;
}
.sched-app .sched-modal .sched-primaryactions { margin-left: auto; }

/* Sections inside the job modal */
.sset-sec + .sset-sec { margin-top: 18px; }
.sset-sec-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin-bottom: 11px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
}
.sset-sec-head i { color: var(--accent); font-size: 14px; }

/* Field grid */
.sset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.sset-grid .span2 { grid-column: 1 / -1; }
.sset-grid .form-group { margin: 0; }

/* Inputs & selects — crisp canvas styling with an accent focus ring */
.sched-app .form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.sched-app .sched-modal-body input[type="text"],
.sched-app .sched-modal-body input[type="email"],
.sched-app .sched-modal-body input[type="tel"],
.sched-app .sched-modal-body input[type="time"],
.sched-app .sched-modal-body input[type="date"],
.sched-app .sched-modal-body input[type="number"],
.sched-app .sset-tabbody input[type="text"],
.sched-app .sset-tabbody input[type="email"],
.sched-app .sset-tabbody input[type="tel"],
.sched-app .sset-tabbody input[type="time"],
.sched-app .sset-tabbody input[type="date"],
.sched-app .sset-tabbody input[type="number"],
.sched-app .sched-modal .filter-select {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  transition: border-color .15s, box-shadow .15s;
}
.sched-app .sched-modal input:focus,
.sched-app .sched-modal .filter-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.sched-app .hint { color: var(--text-muted); font-weight: 400; font-size: 11px; }
.sched-app .hint-block { display: block; margin-top: 6px; line-height: 1.45; }

/* Checklist + copy rows */
.sched-checklist-add, .sched-checklist-tpl, .sset-copyrow {
  display: flex; gap: var(--sp-2); align-items: center; margin-top: 8px; flex-wrap: wrap;
}
.sset-copyrow { margin-top: 0; }
.sset-copyrow input { flex: 1; min-width: 0; }
.sched-checklist-add input { flex: 1; }

/* ── Toggle switches (settings) ── */
.sset-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 11px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.sset-toggle:last-child { border-bottom: none; }
.sset-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.sset-switch {
  flex-shrink: 0;
  width: 38px; height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid var(--border-strong);
  position: relative;
  transition: background .18s, border-color .18s;
}
.sset-switch::after {
  content: "";
  position: absolute;
  top: var(--sp-0_5); left: var(--sp-0_5);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #cfd6e4;
  transition: transform .18s, background .18s;
}
.sset-toggle input:checked + .sset-switch {
  background: var(--accent);
  border-color: var(--accent);
}
.sset-toggle input:checked + .sset-switch::after { transform: translateX(16px); background: #fff; }
.sset-toggle input:focus-visible + .sset-switch { box-shadow: 0 0 0 3px var(--accent-soft); }
.sset-toggle-label { font-size: 13px; color: var(--text-primary); }

/* ── Settings: tabbed layout ── */
.sset-tabwrap { display: flex; flex: 1; min-height: 0; }
.sset-tabs {
  flex-shrink: 0;
  width: 176px;
  padding: var(--sp-3) var(--sp-2_5);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: rgba(0,0,0,0.14);
  overflow-y: auto;
}
.sset-tab {
  display: flex;
  align-items: center;
  gap: var(--sp-2_5);
  padding: 9px 11px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.sset-tab i { font-size: 16px; color: var(--text-muted); transition: color .15s; }
.sset-tab:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }
.sset-tab.active { background: var(--accent-soft); color: var(--accent); }
.sset-tab.active i { color: var(--accent); }
.sset-tabbody { flex: 1; padding: 18px 20px; overflow-y: auto; }
.sset-panel { display: none; animation: ssetFade .18s ease; }
.sset-panel.active { display: block; }
@keyframes ssetFade { from { opacity: 0; transform: translateY(4px); } }
.sset-panel-lead {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 16px;
}

/* Weekday pills */
.sched-app .sched-weekdays { display: flex; gap: var(--sp-1_5); flex-wrap: wrap; }
.sched-app .sched-wd {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: all .14s;
}
.sched-app .sched-wd:hover { border-color: var(--accent-edge); color: var(--text-primary); }
.sched-app .sched-wd.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   Rail widgets — mini-cal, weather, unscheduled tray, attention strip
   ═══════════════════════════════════════════════════════════════ */
/* Rail cards are separated by the gap from the rail-cards block above — no
   hairline needed now that each widget is its own card. */

/* ── Mini-month navigator ── */
.sched-mc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.sched-mc-title { font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.sched-mc-nav {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 7px;
  background: rgba(255,255,255,0.02); color: var(--text-secondary);
  cursor: pointer; font-size: 14px;
  transition: background .15s, color .15s;
}
.sched-mc-nav:hover { background: var(--accent-soft); color: var(--accent); }
.sched-mc-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-0_5);
}
.sched-mc-dow { margin-bottom: 3px; }
.sched-mc-wd {
  text-align: center;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-muted);
  padding: var(--sp-0_5) 0;
}
.sched-mc-day {
  aspect-ratio: 1 / 1;
  min-height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  color: var(--text-secondary);
  font-family: inherit; font-size: 11.5px; font-weight: 500;
  border-radius: 7px; cursor: pointer;
  position: relative;
  transition: background .12s, color .12s;
}
.sched-mc-day:hover { background: rgba(255,255,255,0.07); color: var(--text-primary); }
.sched-mc-blank { pointer-events: none; }
.sched-mc-day.has::after {
  content: ""; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
}
.sched-mc-day.today { color: var(--accent); font-weight: 700; }
.sched-mc-day.sel {
  background: var(--accent); color: #fff; font-weight: 700;
}
.sched-mc-day.sel.has::after { background: #fff; }

/* ── Weather forecast ── */
.sched-wx-place { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--text-muted); font-weight: 500; }
.sched-wx-place i { font-size: 12px; }
.sched-wx-list { display: flex; flex-direction: column; gap: 1px; }
.sched-wx-row {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%;
  padding: 5px 6px;
  border: none; background: transparent;
  border-radius: 7px; cursor: pointer;
  font-family: inherit;
  transition: background .12s;
}
.sched-wx-row:hover { background: rgba(255,255,255,0.06); }
.sched-wx-day { flex: 1; text-align: left; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.sched-wx-ico { font-size: 16px; color: var(--accent); }
.sched-wx-temp { font-size: 12px; font-weight: 600; color: var(--text-primary); min-width: 52px; text-align: right; }
.sched-wx-lo { color: var(--text-muted); font-weight: 400; margin-left: 3px; }

/* ── Today at a glance ── */
.sched-today-date { margin-left: auto; font-size: 10.5px; color: var(--text-muted); font-weight: 600; }
.sched-today-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-top: 4px;
}
.sched-today-stat {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 9px 4px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 9px;
}
.sched-today-stat .n { font-size: 18px; font-weight: 800; color: var(--text-primary); line-height: 1; }
.sched-today-stat .n.warn { color: #fbbf24; }
.sched-today-stat .l { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 600; }
.sched-today-next {
  display: block; width: 100%; text-align: left;
  margin-top: 8px;
  padding: var(--sp-2) var(--sp-2_5);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 9px;
  background: rgba(255,255,255,0.02);
  color: var(--text-secondary);
  font-family: inherit; font-size: 12px;
  cursor: pointer;
  transition: background .14s;
}
.sched-today-next:hover { background: rgba(255,255,255,0.06); }
.sched-today-next .lbl { color: var(--text-muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; margin-right: 6px; }
.sched-today-next b { color: var(--text-primary); }

/* ── Per-tech capacity chip (Crew rail) ── */
.sched-app .sched-tech-hrs {
  margin-left: auto;
  font-size: 10.5px; font-weight: 700;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  padding: 1px 7px;
}
.sched-app .sched-tech-item.active .sched-tech-hrs { color: var(--accent); background: var(--accent-soft); }
/* the edit pencil should sit after the hours chip without pushing it */
.sched-app .sched-tech-hrs + .sched-tech-edit { margin-left: 8px; }

/* ── Keyboard shortcuts button + help popover ── */
.sched-kbd-btn {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 8px;
  background: rgba(255,255,255,0.02); color: var(--text-secondary);
  cursor: pointer; font-size: 16px;
  transition: background .15s, color .15s;
}
.sched-kbd-btn:hover { background: var(--accent-soft); color: var(--accent); }
.sched-signout-btn:hover { background: rgba(239,68,68,0.12); color: #ef4444; border-color: rgba(239,68,68,0.3); }
.sched-kbd-help {
  position: absolute;
  top: calc(100% + var(--sp-2));
  right: var(--sp-3);
  width: 300px;
  padding: var(--sp-3_5) var(--sp-4);
  border-radius: 14px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  z-index: 70;
}
.sched-kbd-help-title { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; }
.sched-kbd-row {
  display: flex; align-items: center; gap: var(--sp-1_5);
  font-size: 12px; color: var(--text-secondary);
  padding: var(--sp-1) 0;
}
.sched-kbd-row span { margin-left: 6px; }
.sched-kbd-help kbd {
  min-width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 600;
  color: var(--text-primary);
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
}

/* ── "Needs assigning" tray ── */
.sched-rail-count {
  margin-left: auto;
  font-size: 10.5px; font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-edge);
  border-radius: 999px;
  padding: 1px 7px;
}
.sched-unsched-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--sp-2) var(--sp-2_5);
  border-radius: 9px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: rgba(255,255,255,0.02);
  margin-top: 8px;
  transition: background .14s, transform .12s;
}
.sched-unsched-card:hover { background: rgba(255,255,255,0.06); transform: translateX(2px); }
.sched-unsched-main { flex: 1 1 auto; min-width: 0; cursor: pointer; }

/* Quick-assign trigger (tray card) + popover */
.sched-qa-btn {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: transparent;
  color: var(--text-2, #94a3b8);
  cursor: pointer;
  font-size: 15px;
  transition: background .14s, color .14s, border-color .14s;
}
.sched-qa-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.sched-qa-pop {
  position: fixed;
  z-index: var(--z-modal, 1000);
  min-width: 180px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 5px;
  border-radius: 11px;
  background: var(--panel, #1b1e25);
  border: 1px solid var(--border);
  box-shadow: 0 14px 34px -10px rgba(0,0,0,.6);
}
.sched-qa-row {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: 0; border-radius: 8px;
  background: transparent;
  color: var(--text, #e5e7eb);
  font: inherit; font-size: 13px;
  text-align: left; cursor: pointer;
}
.sched-qa-row:hover { background: rgba(255,255,255,0.07); }
.sched-qa-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; }
.sched-qa-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-qa-hrs { flex: 0 0 auto; font-size: 11px; color: var(--text-2, #94a3b8); font-variant-numeric: tabular-nums; }
html.sched-light .sched-qa-pop { background: #fff; }
html.sched-light .sched-qa-row { color: #1e293b; }
html.sched-light .sched-qa-row:hover { background: rgba(15,23,42,0.05); }

/* Service-due tray cards */
.sched-servicedue-card {
  padding: var(--sp-2) var(--sp-2_5);
  border-radius: 9px;
  border: 1px solid var(--border);
  border-left: 3px solid #f59e0b;
  background: rgba(255,255,255,0.02);
  margin-top: 8px;
}
.sched-servicedue-card.is-overdue { border-left-color: #ef4444; }
.sched-servicedue-when { text-transform: capitalize; color: var(--text-muted); }
.sched-servicedue-card.is-overdue .sched-servicedue-when { color: #ef4444; }
.sched-servicedue-book { margin-top: var(--sp-1_5); width: 100%; justify-content: center; }

/* ── Overdue attention strip ── */
.sched-attention {
  border: 1px solid rgba(239,68,68,0.35);
  background: rgba(239,68,68,0.08);
  border-radius: 12px;
  padding: var(--sp-3) var(--sp-3_5);
  margin-bottom: 14px;
}
.sched-att-head {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 13px; font-weight: 700; color: #f87171;
  margin-bottom: 9px;
}
.sched-att-list { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.sched-att-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1_5);
  padding: 5px 10px;
  border: 1px solid rgba(239,68,68,0.3);
  background: rgba(255,255,255,0.03);
  color: var(--text-primary);
  border-radius: 999px;
  font-family: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: background .14s, border-color .14s;
}
.sched-att-chip:hover { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.5); }
.sched-att-date { color: var(--text-muted); font-size: 11px; }
.sched-att-more { font-size: 11px; color: var(--text-muted); align-self: center; }
.sched-att-x {
  margin-left: auto;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  color: #f87171; cursor: pointer; border-radius: 7px; font-size: 15px;
  transition: background .14s;
}
.sched-att-x:hover { background: rgba(239,68,68,0.18); }

/* ═══════════════════════════════════════════════════════════════
   History view — full-width report list
   ═══════════════════════════════════════════════════════════════ */
/* History spans the whole board (rails hidden) — it's a list, not a calendar. */
.sched-layout.sched-history-mode { grid-template-columns: 1fr; }
.sched-layout.sched-history-mode .sched-railcol { display: none; }

.sched-history-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3_5);
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.sched-history-title {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 15px; font-weight: 700; color: var(--text-primary);
}
.sched-history-title i { color: var(--accent); }
.sched-history-searchwrap {
  position: relative;
  margin-left: auto;
  flex: 1;
  max-width: 380px;
  min-width: 200px;
}
.sched-history-searchwrap > i {
  position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: 15px; pointer-events: none;
}
.sched-app input.sched-history-search {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px 9px 34px;
  font-size: 13px; font-family: inherit;
  color: var(--text-primary);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.sched-app input.sched-history-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.sched-hist-count {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.shist-group { margin-bottom: 22px; }
.sched-hist-more { display: flex; justify-content: center; padding: 8px 0 20px; }
.shist-date {
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .04em;
  padding-bottom: 7px; margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.shist-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3_5) var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: 11px;
  background: rgba(255,255,255,0.02);
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
  transition: background .14s, border-color .14s;
}
.shist-card:hover { background: rgba(255,255,255,0.055); border-color: var(--border-strong); }
.shist-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
.shist-body { flex: 1; min-width: 0; cursor: pointer; }
.shist-top { display: flex; align-items: center; gap: var(--sp-2_5); flex-wrap: wrap; }
.shist-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.shist-badge {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: var(--sp-0_5) var(--sp-2); border: 1px solid; border-radius: 999px;
}
.shist-time {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: 12px; color: var(--text-muted);
}
.shist-time i { font-size: 13px; }
/* Report meta on history cards: "needs attention" flag count + SR number */
.shist-flags {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: 11px; font-weight: 700;
  padding: var(--sp-0_5) var(--sp-2); border-radius: 999px;
  background: rgba(245,158,11,.14); color: #d97706;
}
.shist-flags i { font-size: 12px; }
.shist-repnum { color: var(--text-muted); font-family: ui-monospace, monospace; font-size: 11.5px; text-transform: none; }
.shist-meta {
  font-size: 12.5px; color: var(--text-secondary);
  margin-top: 4px;
  text-transform: capitalize;
}
.shist-sep { color: var(--text-muted); margin: 0 7px; }
.shist-type { color: var(--text-primary); font-weight: 600; }
.shist-addr {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-muted);
  margin-top: 4px;
}
.shist-addr i { font-size: 13px; }
.shist-thumbs { margin-top: 8px; }
.shist-report { flex-shrink: 0; align-self: center; }

/* ═══════════════════════════════════════════════════════════════
   Clickable legend (status filters) + global job search
   ═══════════════════════════════════════════════════════════════ */
.sched-app .sched-legend-item {
  display: inline-flex; align-items: center; gap: var(--sp-1_5);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit; font-size: 12px;
  padding: 3px 9px; border-radius: 999px;
  cursor: pointer;
  transition: background .14s, color .14s, opacity .14s;
}
.sched-app .sched-legend-item:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.sched-app .sched-legend-item.off { opacity: .4; text-decoration: line-through; }

/* Topbar search */
.sched-topbar-search {
  position: relative;
  flex: 1;
  max-width: 460px;
  margin: 0 auto 0 var(--sp-2);
}
.sched-topbar-search > i {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: 15px; pointer-events: none;
}
.sched-app .sched-topbar-search input {
  width: 100%;
  box-sizing: border-box;
  height: 34px;
  padding: 0 46px 0 34px;
  font-size: 13px; font-family: inherit;
  color: var(--text-primary);
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--border);
  border-radius: 9px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.sched-app .sched-topbar-search input::placeholder { color: var(--text-muted); }
.sched-app .sched-topbar-search input:focus {
  outline: none;
  background: var(--bg);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* ⌘K hint badge inside the search field — opens the command palette. */
.sched-cmdk {
  position: absolute; right: var(--sp-1_5); top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center;
  border: none; background: transparent; cursor: pointer; padding: 0;
}
.sched-cmdk kbd {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 600; color: var(--text-muted);
  background: rgba(255,255,255,0.06); border: 1px solid var(--border-strong);
  border-radius: 5px; padding: var(--sp-0_5) var(--sp-1_5);
}
.sched-cmdk:hover kbd { color: var(--accent); border-color: var(--accent-edge); background: var(--accent-soft); }

/* Mobile-only search trigger — opens the command palette (which already does
   job search). Hidden on desktop where the full topbar input is shown. */
.sched-search-mob { display: none; }

/* Day-map technician filter (modal header) */
.sched-daymap-tech {
  margin-left: auto;
  max-width: 170px;
  font-size: 13px;
  padding: 6px 10px;
}
/* ── Day map promoted to a first-class split view ──
   The dispatch map is core, so it gets a large map pane + a taller route list
   side-by-side rather than the cramped default. Scheduler-scoped so the shared
   dashboard.css defaults are untouched. */
.sched-app .sched-map-modal .sched-modal-body { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.sched-app .sched-map-modal .day-map-body {
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--sp-3);
}
.sched-app .sched-map-modal #dayMap {
  height: 74vh;
  min-height: 440px;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--glass-shadow);
}
.sched-app .sched-map-modal #dayMapList {
  max-height: 74vh;
  padding-right: var(--sp-1);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1_5);
}
@media (max-width: 820px) {
  .sched-app .sched-map-modal .day-map-body { grid-template-columns: 1fr; }
  .sched-app .sched-map-modal #dayMap { height: 52vh; min-height: 300px; }
  .sched-app .sched-map-modal #dayMapList { max-height: none; }
}
.sched-search-results {
  position: absolute;
  top: calc(100% + var(--sp-2));
  left: 0; right: 0;
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--sp-1_5);
  border-radius: 14px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  z-index: 70;
}
.sched-search-item {
  display: flex; align-items: center; gap: var(--sp-2_5);
  width: 100%;
  padding: 9px 10px;
  border: none; background: transparent;
  border-radius: 9px; cursor: pointer;
  text-align: left;
  transition: background .12s;
}
.sched-search-item:hover { background: rgba(255,255,255,0.07); }
.sched-search-item .ss-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sched-search-item .ss-body { display: flex; flex-direction: column; gap: var(--sp-0_5); min-width: 0; }
.sched-search-item .ss-cust { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.sched-search-item .ss-meta { font-size: 11.5px; color: var(--text-muted); }
.sched-search-empty { padding: var(--sp-3_5); text-align: center; font-size: 12.5px; color: var(--text-muted); }

/* ── AI daily briefing card ── */
.sched-brief-cta {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-1_5);
  width: 100%; padding: var(--sp-2_5);
  border: 1px solid var(--accent-edge);
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600;
  transition: background .15s;
}
.sched-brief-cta:hover { background: rgba(51,177,255,0.18); }
.sched-brief-cta i { font-size: 15px; }
.sched-brief-body {
  font-size: 12.5px; line-height: 1.55; color: var(--text-secondary);
  padding: var(--sp-0_5) var(--sp-1);
}
.sched-brief-refresh {
  margin-left: auto; width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--text-muted);
  cursor: pointer; border-radius: 7px; font-size: 14px;
}
.sched-brief-refresh:hover { background: rgba(255,255,255,0.08); color: var(--accent); }
.sched-cmd-item.ai i { color: var(--accent); }
.sched-cmd-item.ai .sched-cmd-hint { color: var(--accent); border: 1px solid var(--accent-edge); border-radius: 999px; padding: var(--sp-0_5) var(--sp-1_5); font-size: 10px; font-weight: 700; }

/* ── Command palette (⌘K) ── */
.sched-cmd-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.sched-cmd {
  width: 560px; max-width: 92vw;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: 16px; box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  overflow: hidden;
}
.sched-cmd-inp { display: flex; align-items: center; gap: var(--sp-2_5); padding: var(--sp-3_5) var(--sp-4); border-bottom: 1px solid var(--border); }
.sched-cmd-inp i { color: var(--text-muted); font-size: 18px; }
.sched-cmd-inp input { flex: 1; background: transparent; border: none; outline: none; color: var(--text-primary); font-family: inherit; font-size: 15px; }
.sched-cmd-list { max-height: 52vh; overflow-y: auto; padding: var(--sp-1_5); }
.sched-cmd-item { display: flex; align-items: center; gap: var(--sp-2_5); padding: var(--sp-2_5) var(--sp-3); border-radius: 9px; cursor: pointer; font-size: 14px; color: var(--text-secondary); }
.sched-cmd-item i { font-size: 17px; color: var(--text-muted); width: 20px; text-align: center; }
.sched-cmd-item.sel { background: var(--accent-soft); color: var(--accent); }
.sched-cmd-item.sel i { color: var(--accent); }
.sched-cmd-label { flex: 1; }
.sched-cmd-hint { font-size: 12px; color: var(--text-muted); }
.sched-cmd-empty { padding: var(--sp-5); text-align: center; color: var(--text-muted); font-size: 13px; }

/* ── Job-chip context menu ── */
.sched-ctx {
  position: fixed; z-index: 210; min-width: 176px; padding: var(--sp-1_5);
  border-radius: 12px; background: var(--glass-bg); border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.sched-ctx-item {
  display: flex; align-items: center; gap: var(--sp-2_5); width: 100%;
  padding: var(--sp-2) var(--sp-2_5); border: none; background: transparent;
  color: var(--text-secondary); font-family: inherit; font-size: 13px; text-align: left;
  border-radius: 8px; cursor: pointer;
}
.sched-ctx-item i { font-size: 16px; }
.sched-ctx-item:hover { background: rgba(255,255,255,0.07); color: var(--text-primary); }
.sched-ctx-item.danger { color: #f87171; }
.sched-ctx-item.danger:hover { background: rgba(239,68,68,0.14); }

/* ── Drag-to-create selection on the time grid ── */
.sched-create-sel {
  position: absolute; left: var(--sp-0_5); right: var(--sp-0_5);
  background: var(--accent-soft); border: 1px dashed var(--accent);
  border-radius: 6px; pointer-events: none; z-index: 5;
}

/* ── Accessibility: visible keyboard focus ── */
.sched-app :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 5px;
}
/* form controls already show an accent box-shadow ring on focus — no double ring */
.sched-app input:focus-visible,
.sched-app select:focus-visible,
.sched-app textarea:focus-visible { outline: none; }

/* ── Loading skeleton ── */
.sched-skel { padding: var(--sp-1); }
.sched-skel-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-2); margin-top: var(--sp-3_5); }
@media (max-width: 860px) { .sched-skel-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── Responsive ── */
@media (max-width: 1200px) {
  .sched-app .sched-layout { grid-template-columns: 200px minmax(0,1fr); }
  .sched-railcol-right { display: none; }
}
@media (max-width: 860px) {
  .sched-app .sched-layout { grid-template-columns: 1fr; }
  .sched-railcol { position: static; }
  .sched-railcol-left { display: none; }
  .sched-page-body { padding: var(--sp-1) var(--sp-3) var(--sp-8); }
  .sched-brand-name { display: none; }
  /* Tabs collapse to icons only to fit the narrow topbar. */
  .sched-tab span { display: none; }
  .sched-tab { padding: var(--sp-1_5); }
  .cust-drawer { width: 100%; max-width: 100%; }
  /* The full search input doesn't fit — swap it for an icon button that opens
     the command palette (job search lives there too). */
  .sched-topbar-search { display: none; }
  .sched-search-mob { display: inline-flex; }
}
@media (max-width: 620px) {
  /* Settings tabs collapse to a horizontal scroll strip above the panels. */
  .sset-tabwrap { flex-direction: column; }
  .sset-tabs {
    width: auto;
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    padding: var(--sp-2);
  }
  .sset-tab { flex-shrink: 0; }
  .sset-tab span { display: none; }
  .sset-tab i { font-size: 18px; }
  .sset-tab.active span { display: inline; }
  .sset-grid { grid-template-columns: 1fr; }

  /* ── Mobile: modals become bottom sheets, bigger touch targets ── */
  .sched-app .modal-overlay { align-items: flex-end; padding: 0; }
  .sched-app .modal-box,
  .sched-app .sched-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
    animation: schedSheetUp .22s ease;
  }
  .sched-app .btn { min-height: 40px; }
  .sched-app .sched-viewbtn { padding: var(--sp-2_5) var(--sp-3_5); }
  .sched-app .sched-modal-x { width: 36px; height: 36px; }
}
@keyframes schedSheetUp { from { transform: translateY(100%); opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  .sched-app .sched-modal, .sched-app .modal-box { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Lifecycle extras — attention sections, confirmation flags,
   day-map travel legs, AI slot suggestions
   ═══════════════════════════════════════════════════════════════ */

/* Attention strip now stacks sections (reschedule asks / overdue / tight
   transfers) — space the follow-on headings off the previous list. */
.sched-att-list + .sched-att-head { margin-top: var(--sp-3); }
.sched-att-chip.resched { border-color: rgba(245,158,11,0.35); }
.sched-att-chip.resched:hover { background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.55); }
.sched-att-chip.resched i, .sched-att-chip.tight i { font-size: 13px; }
.sched-att-chip.tight { border-color: rgba(51,177,255,0.35); }
.sched-att-chip.tight:hover { background: rgba(51,177,255,0.14); border-color: rgba(51,177,255,0.55); }

/* Customer confirmation state inside the job modal */
.sched-confirm-flag {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: 12px; font-weight: 600;
  padding: var(--sp-1_5) var(--sp-2_5);
  border-radius: 8px;
}
.sched-confirm-flag.ok { color: var(--st-complete); background: color-mix(in srgb, var(--st-complete) 10%, transparent); border: 1px solid color-mix(in srgb, var(--st-complete) 30%, transparent); }
.sched-confirm-flag.warn { color: var(--st-in_progress); background: color-mix(in srgb, var(--st-in_progress) 10%, transparent); border: 1px solid color-mix(in srgb, var(--st-in_progress) 30%, transparent); }

/* Day-map travel legs between stops */
.day-map-total {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  padding: var(--sp-1_5) var(--sp-2);
}
.day-map-leg {
  display: flex; align-items: center; gap: var(--sp-1_5);
  font-size: 11px; color: var(--text-muted);
  padding: var(--sp-0_5) var(--sp-2) var(--sp-0_5) var(--sp-6);
}
.day-map-leg.tight { color: #fbbf24; }

/* AI slot suggestions in the job modal */
.sched-slot-btn {
  display: inline-flex; align-items: center; gap: var(--sp-1_5);
  padding: var(--sp-1_5) var(--sp-3);
  border: 1px dashed rgba(51,177,255,0.45);
  background: rgba(51,177,255,0.06);
  color: #93c5fd;
  border-radius: 8px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background .14s, border-color .14s;
}
.sched-slot-btn:hover { background: rgba(51,177,255,0.14); border-color: rgba(51,177,255,0.7); }
.sched-slot-list { display: flex; flex-direction: column; gap: var(--sp-1_5); margin-top: var(--sp-2); }
.sched-slot-busy { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: var(--sp-1_5); }
.sched-slot-opt {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2_5);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text-primary);
  border-radius: 10px;
  font-family: inherit; font-size: 12px; text-align: left;
  cursor: pointer;
  transition: background .14s, border-color .14s;
}
.sched-slot-opt:hover { background: rgba(51,177,255,0.1); border-color: rgba(51,177,255,0.5); }
.sched-slot-when { font-weight: 700; }
.sched-slot-tech {
  font-size: 11px; font-weight: 600; color: #93c5fd;
  background: rgba(51,177,255,0.12);
  padding: var(--sp-0_5) var(--sp-2);
  border-radius: 999px;
}
.sched-slot-why { font-size: 11px; color: var(--text-muted); flex-basis: 100%; }

/* ═══════════════════════════════════════════════════════════════
   Look & feel pass — hover previews, micro-motion, light theme
   ═══════════════════════════════════════════════════════════════ */

/* ── Hover preview card (power.js builds + positions it) ── */
.sched-preview {
  position: fixed;
  z-index: 90;
  width: 264px;
  padding: var(--sp-3) var(--sp-3_5);
  border-radius: 12px;
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  pointer-events: none;
  font-size: 12px;
  color: var(--text-primary);
}
.sched-pv-head { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-1_5); }
.sched-pv-cust { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-pv-status { margin-left: auto; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.sched-pv-row {
  display: flex; align-items: center; gap: var(--sp-2);
  color: var(--text-secondary);
  padding: var(--sp-0_5) 0;
  font-variant-numeric: tabular-nums;
}
.sched-pv-row i { color: var(--accent); font-size: 13px; width: 14px; text-align: center; flex-shrink: 0; }
.sched-pv-notes {
  margin-top: var(--sp-1_5);
  padding-top: var(--sp-1_5);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Micro-motion (skipped entirely under reduced-motion) ── */
@keyframes schedPulse { 0% { box-shadow: 0 0 0 0 rgba(51,177,255,.55); } 70% { box-shadow: 0 0 0 7px rgba(51,177,255,0); } 100% { box-shadow: 0 0 0 0 rgba(51,177,255,0); } }
@keyframes schedRise  { from { transform: translateY(8px); opacity: 0; } }
@keyframes schedFade  { from { opacity: .55; } }
@keyframes schedModalPop { from { transform: scale(.97) translateY(6px); opacity: .6; } }
@media (prefers-reduced-motion: no-preference) {
  .sched-app .sched-nowline::before { animation: schedPulse 2.4s ease-out infinite; }
  /* Rail widgets rise in once on page load (containers persist across re-renders) */
  .sched-railcol > div { animation: schedRise .35s cubic-bezier(.22, 1, .36, 1) backwards; }
  .sched-railcol > div:nth-child(2) { animation-delay: .05s; }
  .sched-railcol > div:nth-child(3) { animation-delay: .1s; }
  .sched-railcol > div:nth-child(4) { animation-delay: .15s; }
  .sched-railcol > div:nth-child(5) { animation-delay: .2s; }
  /* Gentle crossfade when the board re-renders */
  #schedulerCalendar > * { animation: schedFade .16s ease; }
}
/* Desktop modal pop (mobile keeps its bottom-sheet slide from the ≤620px block) */
@media (prefers-reduced-motion: no-preference) and (min-width: 621px) {
  .sched-app .modal-overlay .modal-box { animation: schedModalPop .18s cubic-bezier(.34, 1.4, .64, 1); }
}

/* ── Light theme (device-level: localStorage sched_theme → html.sched-light,
      applied pre-paint). Re-derives the palette tokens; component rules that
      mix against var(--card)/var(--border) adapt automatically. ── */
html.sched-light body.sched-app {
  --bg:            #f4f6fa;
  --bg-secondary:  #e9edf3;
  --surface:       #ffffff;
  --card:          #ffffff;
  --bg-card:       #ffffff;
  --bg-card-hover: #eef2f7;
  --bg-sidebar:    #ffffff;
  --bg-modal:      #ffffff;
  --border:        #e4e9f1;
  --border-strong: #d5dce8;
  --text:          #131722;
  --text-primary:  #131722;
  --text-secondary:#4a5568;
  --text-muted:    #8a94a4;
  --accent:        #1493e6;
  --accent-hover:  #0f76bf;
  --accent-soft:   rgba(20,147,230,0.10);
  --accent-edge:   rgba(20,147,230,0.35);
  --accent-glow:   rgba(20,147,230,0.22);
  --hot:           #e23b3b;
  --hot-soft:      rgba(226,59,59,0.10);
  /* Flat Airflow-light surfaces — near-solid panels, soft ink-tinted shadow. */
  --glass-bg:     rgba(255,255,255,0.94);
  --glass-bg-2:   rgba(255,255,255,0.97);
  --glass-border: rgba(15,23,42,0.08);
  --glass-shadow: 0 1px 2px rgba(28,26,22,.05), 0 12px 28px -16px rgba(28,26,22,.18);
  /* Calm single vignette — no CAD dot-grid (matches the dark backdrop). */
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(20,147,230,0.05), transparent 62%);
}
/* Dark-tuned literals that need a light counterpart */
html.sched-light .sched-app .sched-viewswitch { background: rgba(15,23,42,0.05); }
html.sched-light .sched-app .sched-chip,
html.sched-light .sched-app .sched-event,
html.sched-light .sched-app .sched-swim-event,
html.sched-light .sched-app .sched-swim-chip { box-shadow: 0 1px 2px rgba(15,23,42,.12); }
html.sched-light .sched-app .sched-chip:hover,
html.sched-light .sched-app .sched-event:hover,
html.sched-light .sched-app .sched-swim-event:hover,
html.sched-light .sched-app .sched-swim-chip:hover { box-shadow: 0 3px 8px rgba(15,23,42,.16); }
html.sched-light .sched-app .sched-tg-col.is-offday,
html.sched-light .sched-app .sched-month-cell.is-offday {
  background:
    repeating-linear-gradient(-45deg, rgba(15,23,42,0.045) 0 5px, transparent 5px 11px),
    rgba(15,23,42,0.02);
}
html.sched-light .sched-app .sched-tg-col.is-today { background: rgba(20,147,230,0.045); }
html.sched-light .sched-att-head { color: #dc2626; }
html.sched-light .sched-att-chip { background: rgba(15,23,42,0.02); }
html.sched-light .sched-confirm-flag.ok { color: #15803d; }
html.sched-light .sched-confirm-flag.warn { color: #92400e; }
html.sched-light .day-map-leg.tight { color: #92400e; }
html.sched-light .sched-slot-btn { color: #0f76bf; background: rgba(20,147,230,0.05); }
html.sched-light .sched-slot-btn:hover { background: rgba(20,147,230,0.1); }
html.sched-light .sched-slot-tech { color: #0f76bf; }
html.sched-light .sched-slot-opt { background: rgba(15,23,42,0.02); }
html.sched-light .sched-nowline-lbl { color: #fff; background: var(--accent); }
html.sched-light .sched-app .sched-nowline,
html.sched-light .sched-app .sched-nowline::before { background: var(--accent); }
html.sched-light .sched-unsched-card:hover { background: rgba(15,23,42,0.04); }

.sched-warr-ico { color:#f59e0b; }

/* ── Equipment on site (job modal) ── */
.equip-list { display:flex; flex-direction:column; gap:var(--sp-2); margin-bottom:var(--sp-2_5); }
.equip-empty { font-size:12px; color:var(--text-muted); }
.equip-row { display:flex; align-items:flex-start; gap:var(--sp-2); padding:var(--sp-2) var(--sp-2_5); border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,0.02); }
.equip-row-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--sp-0_5); }
.equip-row-actions { display:flex; gap:var(--sp-0_5); flex-shrink:0; }
.equip-title { font-size:13px; font-weight:600; color:var(--text); }
.equip-meta { font-size:12px; color:var(--text-muted); }
.equip-warr { display:inline-block; align-self:flex-start; margin-top:var(--sp-0_5); font-size:11px; font-weight:600; padding:var(--sp-0_5) var(--sp-2); border-radius:999px; }
.equip-warr.in { background:color-mix(in srgb, var(--st-complete) 14%, transparent); color:var(--st-complete); }
.equip-warr.expired { background:color-mix(in srgb, var(--st-no_show) 14%, transparent); color:var(--st-no_show); }
.equip-warr.unknown { background:color-mix(in srgb, var(--text-muted) 10%, transparent); color:var(--text-muted); }
.equip-thumbs { display:flex; flex-wrap:wrap; gap:var(--sp-1); margin-top:var(--sp-1); }
.equip-thumb { width:52px; height:52px; object-fit:cover; border-radius:8px; border:1px solid var(--border); display:block; cursor:zoom-in; }
/* Read-only equipment detail view (shown before Edit). */
.eqv-hero { display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-3); }
.eqv-hero-ico {
  flex-shrink:0; width:48px; height:48px; border-radius:12px; display:grid; place-items:center;
  background:var(--accent-soft, rgba(59,130,246,0.14)); color:var(--accent); font-size:24px;
}
.eqv-hero-main { flex:1; min-width:0; }
.eqv-hero-title { font-size:17px; font-weight:700; color:var(--text-primary); line-height:1.2; }
.eqv-hero-sub { font-size:12px; color:var(--text-muted); margin-top:2px; }
.eqv-specs {
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-bottom:var(--sp-3);
}
.eqv-spec { display:flex; flex-direction:column; gap:2px; padding:var(--sp-2) var(--sp-2_5); background:var(--surface, rgba(255,255,255,0.02)); }
.eqv-k { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; color:var(--text-muted); }
.eqv-v { font-size:14px; color:var(--text-primary); font-variant-numeric:tabular-nums; word-break:break-word; }
.eqv-block { margin-bottom:var(--sp-3); }
.eqv-block-h { display:flex; align-items:center; gap:var(--sp-1); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; color:var(--text-muted); margin-bottom:var(--sp-1_5); }
.eqv-notes { font-size:13px; color:var(--text-secondary); line-height:1.5; white-space:pre-wrap; }
.equip-addrow { display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.equip-form { margin-top:var(--sp-3); padding:var(--sp-3); border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,0.02); }
.equip-form-actions { display:flex; justify-content:flex-end; gap:var(--sp-2); margin-top:var(--sp-2_5); }
html.sched-light .equip-row, html.sched-light .equip-form { background:rgba(15,23,42,0.02); }

/* ═══════════════════════════════════════════════════════════════
   Records sections — Customers / Equipment / Reports list views
   + the customer profile drawer. Left-rail nav switches between
   these and the dispatch board.
   ═══════════════════════════════════════════════════════════════ */

.rec-section { padding-top: var(--sp-1); }
.rec-toolbar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.rec-toolbar-controls { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.rec-search {
  position: relative; display: inline-flex; align-items: center;
  min-width: 240px;
}
.rec-search > i {
  position: absolute; left: 11px; color: var(--text-muted); font-size: 15px; pointer-events: none;
}
.rec-search input {
  width: 100%; padding: var(--sp-2) var(--sp-3) var(--sp-2) 32px;
  border: 1px solid var(--border); border-radius: 10px;
  background: rgba(255,255,255,0.03); color: var(--text-primary);
  font-size: 13px;
}
.rec-search input::placeholder { color: var(--text-muted); }
.rec-search input:focus { outline: none; border-color: var(--accent); }

.rec-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.rec-count { font-size: 12px; color: var(--text-muted); margin-bottom: var(--sp-2); }

/* Generic record card (customer / equipment / report row) */
.rec-card {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3_5);
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--glass-bg, rgba(255,255,255,0.02));
  cursor: pointer; text-align: left; width: 100%;
  transition: border-color .12s, background .12s, transform .06s;
}
.rec-card:hover { border-color: var(--accent-border, rgba(59,130,246,0.4)); background: rgba(255,255,255,0.04); }
.rec-card:active { transform: translateY(1px); }
/* Item a finder pointed at (opened from the Equipment / Reports tab). */
.rec-card--hl { border-color: var(--accent); animation: recPulse 1.3s ease 1; }
@keyframes recPulse {
  0% { box-shadow: 0 0 0 0 rgba(59,130,246,0.0); }
  30% { box-shadow: 0 0 0 3px rgba(59,130,246,0.32); }
  100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.0); }
}
@media (prefers-reduced-motion: reduce) { .rec-card--hl { animation: none; } }
.rec-avatar {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--accent-soft, rgba(59,130,246,0.14)); color: var(--accent);
  font-size: 15px; font-weight: 700;
}
.rec-avatar i { font-size: 18px; }
.rec-main { flex: 1; min-width: 0; }
.rec-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.rec-sub { font-size: 12px; color: var(--text-muted); margin-top: var(--sp-0_5); display: flex; gap: var(--sp-2_5); flex-wrap: wrap; }
.rec-sub span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.rec-side { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.rec-chip {
  font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 20px;
  border: 1px solid var(--border); color: var(--text-secondary); white-space: nowrap;
}
/* Status/warranty chips share the one semantic --st-* family (see the token
   block) so every status reads the same colour everywhere. --_t is the chip's
   tone; the shared rule below tints border + background from it. */
.rec-chip.warr-in,
.rec-chip.st-signed     { --_t: var(--st-complete); }
.rec-chip.warr-expired  { --_t: var(--st-no_show); }
.rec-chip.st-completed  { --_t: var(--accent); }
.rec-chip.st-sent       { --_t: var(--st-invoiced); }
.rec-chip.st-attention  { --_t: var(--st-in_progress); }
.rec-chip.st-draft,
.rec-chip.warr-unknown  { --_t: var(--st-cancelled); }
.rec-chip.warr-in, .rec-chip.warr-expired,
.rec-chip.st-completed, .rec-chip.st-signed,
.rec-chip.st-sent, .rec-chip.st-attention, .rec-chip.st-draft {
  color: var(--_t);
  border-color: color-mix(in srgb, var(--_t) 35%, transparent);
  background: color-mix(in srgb, var(--_t) 9%, transparent);
}
.rec-chip.warr-unknown { color: var(--text-muted); }
.rec-empty { padding: var(--sp-12) var(--sp-4); text-align: center; color: var(--text-muted); }
.rec-empty i { font-size: 34px; display: block; margin-bottom: var(--sp-2_5); opacity: .5; }

/* ── Customer profile drawer ── */
.cust-drawer-backdrop {
  position: fixed; inset: 0; z-index: 58;   /* below the floating topbar (z 60) */
  background: rgba(2,6,23,0.5);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.cust-drawer {
  /* Sits behind the floating heading bar: starts below it and stacks under it
     (z 59 < topbar z 60), so the heading stays visible and undimmed. */
  position: fixed; top: calc(var(--topbar-h) + var(--float-gap) * 2); right: 0; bottom: 0; z-index: 59;
  width: 440px; max-width: 94vw;
  display: flex; flex-direction: column;
  background: var(--bg-elevated, var(--bg));
  border-left: 1px solid var(--border);
  box-shadow: -18px 0 48px rgba(0,0,0,0.35);
  animation: custDrawerIn .22s cubic-bezier(.22,1,.36,1);
}
@keyframes custDrawerIn { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .cust-drawer { animation: none; } }
.cust-drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: 16px 16px 12px;
}
.cust-drawer-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cust-drawer-avatar {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--accent-soft, rgba(59,130,246,0.16)); color: var(--accent);
  font-size: 17px; font-weight: 700;
}
.cust-drawer-name { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.cust-drawer-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.cust-drawer-actions { display: flex; gap: var(--sp-2); padding: 0 16px 12px; flex-wrap: wrap; }
.cust-drawer-tabs {
  display: flex; gap: 2px; padding: 0 12px;
  border-bottom: 1px solid var(--border);
}
.cust-tab {
  padding: 9px 12px; border: none; background: transparent;
  color: var(--text-secondary); font-size: 13px; font-weight: 500;
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.cust-tab:hover { color: var(--text-primary); }
.cust-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.cust-tab-n {
  font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 8px;
  background: rgba(255,255,255,0.07); color: var(--text-muted);
}
.cust-tab.active .cust-tab-n { background: var(--accent-soft, rgba(59,130,246,0.16)); color: var(--accent); }
.cust-drawer-body { flex: 1; overflow-y: auto; padding: 16px; }

/* Overview tab detail rows */
.cust-detail { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.cust-detail-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 600; }
.cust-detail-val { font-size: 14px; color: var(--text-primary); }
.cust-detail-val a { color: var(--accent); text-decoration: none; }
.cust-detail-val a:hover { text-decoration: underline; }
.cust-drawer-body .rec-card { margin-bottom: 8px; }
.cust-mini-empty { padding: 30px 12px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* NDIS plan-status banner (top of a participant's Overview). Tone comes from
   the shared --st-* family — green active, amber expiring, red expired. */
.cust-plan-banner {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 10px 12px; border-radius: 10px; margin-bottom: var(--sp-4);
  font-size: 13px; font-weight: 600;
  color: var(--_t, var(--text-secondary));
  border: 1px solid color-mix(in srgb, var(--_t, var(--border)) 35%, transparent);
  background: color-mix(in srgb, var(--_t, var(--border)) 9%, transparent);
}
.cust-plan-banner i { font-size: 17px; flex-shrink: 0; }
.cust-plan-banner.ok   { --_t: var(--st-complete); }
.cust-plan-banner.warn { --_t: var(--st-in_progress); }
.cust-plan-banner.over { --_t: var(--st-no_show); }

/* White cards + drawer in light mode. The drawer especially needs an OPAQUE
   surface — it floats over its own dark backdrop, so a translucent fill would
   let the backdrop bleed through and dim all the drawer content. */
html.sched-light .rec-card,
html.sched-light .cust-drawer { background: var(--surface, #fff); }
html.sched-light .rec-card:hover { background: var(--bg-card-hover, #eef2f7); }

/* ── Quick-job modal (Phase 1 — flag feature_sched_quickjob) ──────────────────
   All rules scoped under #jobModal.qj-on, so the flag-off modal is untouched.
   The quick-job UI is purely presentational: see js/scheduler/quickjob.js. */

/* 1.1 — Collapsible detail sections (On-site, Equipment) */
#jobModal.qj-on .qj-acc-head { cursor: pointer; user-select: none; }
#jobModal.qj-on .qj-acc-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
#jobModal.qj-on .qj-acc-cue {
  margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-2);
  text-transform: none; letter-spacing: 0;
}
#jobModal.qj-on .qj-acc-summary {
  display: none; font-size: 11px; font-weight: 500; color: var(--text-muted);
}
#jobModal.qj-on .qj-collapsed .qj-acc-summary { display: inline; }
#jobModal.qj-on .qj-acc-caret {
  color: var(--text-muted); font-size: 15px; transition: transform .18s var(--out, ease);
}
#jobModal.qj-on .qj-collapsed .qj-acc-caret { transform: rotate(-90deg); }
#jobModal.qj-on .qj-collapsed .sset-grid { display: none; }
#jobModal.qj-on .qj-collapsed .sset-sec-head { margin-bottom: 0; border-bottom-color: transparent; }

/* 1.2 — Customer search-or-create combobox */
#jobModal.qj-on #jobCustLinkGroup,
#jobModal.qj-on #jobCustNameGroup { display: none; }
.qj-combo-field { position: relative; }
.qj-combo-ico {
  position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: 15px; pointer-events: none;
}
.sched-app .sched-modal-body .qj-combo-field input[type="text"] { padding-left: 34px; padding-right: 34px; }
.qj-combo-clear {
  position: absolute; right: var(--sp-2); top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: 0; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--text-muted);
}
.qj-combo-clear:hover { background: var(--accent-soft); color: var(--accent); }
.qj-combo-menu {
  position: absolute; top: calc(100% + var(--sp-1)); left: 0; right: 0; z-index: 40;
  max-height: 240px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.32); padding: var(--sp-1);
}
.qj-combo-opt {
  width: 100%; display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2_5); border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--text-primary); font: inherit; text-align: left;
}
.qj-combo-opt:hover, .qj-combo-opt:focus-visible { background: var(--accent-soft); outline: none; }
.qj-combo-opt i { color: var(--text-muted); font-size: 15px; flex: none; }
.qj-combo-opt-main { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.qj-combo-opt-main { font-size: 13px; }
.qj-combo-opt-sub { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qj-combo-create { color: var(--accent); }
.qj-combo-create i { color: var(--accent); }
.qj-combo-empty { padding: var(--sp-2_5); font-size: 12px; color: var(--text-muted); }
.qj-combo-linked {
  display: flex; align-items: center; gap: var(--sp-1_5); margin-top: 7px;
  font-size: 12px; color: var(--st-complete);
  padding: var(--sp-1_5) var(--sp-2); border-radius: 7px;
  background: color-mix(in srgb, var(--st-complete) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--st-complete) 26%, transparent);
}
.qj-combo-linked strong { font-weight: 600; }
/* [hidden] must win over the display:flex above — otherwise the bar shows even
   when nothing is linked, and (sitting under the field) it hides the dropdown's
   "Create …" row. */
.qj-combo-linked[hidden] { display: none; }

/* 1.4 — Recurrence presets (raw controls hidden unless "Custom…") */
#jobModal.qj-on:not(.qj-recur-custom) #jobRecurGroup,
#jobModal.qj-on:not(.qj-recur-custom) #jobRecurOpts { display: none !important; }

/* ── Reports home (Phase 3 — flag feature_sched_reports_home) ─────────────────
   Segments the Reports section into Service reports + Analytics & timesheets.
   Injected by js/scheduler/reportshome.js; inert when the flag is off. */
.rh-seg { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.rh-seg-btn {
  display: inline-flex; align-items: center; gap: var(--sp-1_5);
  padding: var(--sp-2) var(--sp-3_5); border: 1px solid var(--border-strong); border-radius: 9px;
  background: var(--bg); color: var(--text-secondary); font: inherit; font-size: 13px;
  font-weight: 600; cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.rh-seg-btn i { font-size: 15px; }
.rh-seg-btn:hover { color: var(--text-primary); }
.rh-seg-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

.rh-analytics { display: none; }
#sec-reports.rh-analytics-on .rh-analytics { display: block; }
#sec-reports.rh-analytics-on #reportsList { display: none; }
#sec-reports.rh-analytics-on .rec-toolbar-controls { display: none; }

.rh-a-head { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: var(--sp-3); }
.rh-a-sub { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-left: var(--sp-2); }

/* 2.2 — clickable KPI cards */
.rh-kpi-link { cursor: pointer; transition: border-color .15s, transform .05s; }
.rh-kpi-link:hover { border-color: var(--accent); }
.rh-kpi-link:active { transform: translateY(1px); }
.rh-kpi-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rh-kpi-sublink { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.rh-kpi-sublink:hover { color: var(--bad, #ef4444); }

/* Bulk-bar danger button (the edit-actions rule is scoped elsewhere) */
.sched-bulkbar .sched-btn-danger { color: var(--bad, #ef4444); }

/* Timesheet date pickers stay compact — the generic modal input width:100% rule
   was stretching them full-width and breaking the Timesheets header row (both in
   the Stats modal and the Reports-home analytics segment). */
.sched-app .sched-modal-body .sched-timesheet-controls input[type="date"],
.sched-app #sec-reports .sched-timesheet-controls input[type="date"] { width: auto; min-width: 148px; }
.sched-timesheet-head { row-gap: var(--sp-2); }

/* Analytics section headings (Stats modal + Reports-home) — the per-tech table
   and Timesheets read as peer sections with matching uppercase labels + divider
   rules, instead of one labelled and one floating. */
.sched-a-subhead,
.sched-app .sched-timesheet-head { border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.sched-a-subhead {
  display: flex; align-items: center; gap: var(--sp-1_5);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); margin: 0 0 var(--sp-2);
}
.sched-a-subhead i,
.sched-app .sched-timesheet-head h4 i { color: var(--accent); font-size: 14px; }
.sched-app .sched-timesheet-head h4 {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); display: flex; align-items: center; gap: var(--sp-1_5);
}

/* Analytics cards: no resting shadow and no hover lift/glow in the scheduler
   (dashboard.css applies those globally; scope the removal to .sched-app so the
   main dashboard keeps its treatment). */
.sched-app .stat-card,
.sched-app .chart-card,
.sched-app .table-card { box-shadow: none; }
.sched-app .stat-card { transition: none; }
.sched-app .stat-card:hover { transform: none; box-shadow: none; }
.sched-app .stat-card:hover .si-blue,
.sched-app .stat-card:hover .si-purple,
.sched-app .stat-card:hover .si-green,
.sched-app .stat-card:hover .si-amber,
.sched-app .stat-card:hover .si-red { box-shadow: none; }

/* ── Board flow (Phase 2 — flag feature_sched_boardflow) ──────────────────────
   §1.5 loud conflict banner + §1.7 per-job status button/popover. */
.sched-conflict-banner {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-2_5) var(--sp-3); border-radius: 9px; font-size: 13px; line-height: 1.35;
}
.sched-conflict-banner strong { font-weight: 700; }
.sched-conflict-banner .scb-msg { flex: 1 1 auto; min-width: 150px; }
.sched-conflict-banner.is-warn  { color: var(--st-in_progress); background: color-mix(in srgb, var(--st-in_progress) 12%, transparent); border: 1px solid color-mix(in srgb, var(--st-in_progress) 34%, transparent); }
.sched-conflict-banner.is-block { color: var(--bad, #ef4444);     background: color-mix(in srgb, var(--bad, #ef4444) 12%, transparent);     border: 1px solid color-mix(in srgb, var(--bad, #ef4444) 36%, transparent); }
.sched-conflict-banner.is-ack   { color: var(--text-secondary);   background: var(--bg); border: 1px solid var(--border-strong); }
.scb-actions { display: flex; gap: var(--sp-1_5); flex: 0 0 auto; flex-wrap: wrap; }
.scb-btn {
  display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1_5) var(--sp-2_5);
  border-radius: 7px; border: 1px solid currentColor; background: transparent;
  color: inherit; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.scb-btn:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.scb-btn.scb-ghost { border-color: var(--border-strong); color: var(--text-secondary); }
.scb-btn.scb-ghost:hover { color: var(--text-primary); background: color-mix(in srgb, var(--text-primary) 8%, transparent); }

/* §1.7 — status trigger on list cards + popover (reuses .sched-qa-pop look) */
.sched-list-card .sched-st-btn { margin-left: auto; }
.sched-st-btn {
  flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--bg); color: var(--text-secondary); cursor: pointer;
}
.sched-st-btn:hover { border-color: var(--accent); color: var(--accent); }
.sched-st-btn i { font-size: 16px; }
.sched-st-pop .sched-st-row i { flex: 0 0 auto; width: 18px; text-align: center; font-size: 15px; }

/* ── Board notes/reports: glyph on chips+events (flag feature_board_notes) ── */
.sched-app .sched-nr-glyph {
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1;
  color: color-mix(in srgb, var(--text-primary) 62%, transparent);
  transition: color .12s, transform .12s;
}
.sched-app .sched-nr-glyph:hover { color: var(--accent); transform: scale(1.12); }
.sched-app .sched-nr-glyph.is-report { color: color-mix(in srgb, var(--accent) 78%, var(--text-primary)); }
/* Report status at a glance (flags still win the colour below). */
.sched-app .sched-nr-glyph.is-signed { color: var(--st-complete); }
.sched-app .sched-nr-glyph.is-sent { color: var(--accent); }
.sched-app .sched-nr-glyph.has-flags { color: var(--warn, #f59e0b); }
/* Chips (month / all-day / list): glyph rides at the end of the label. */
.sched-app .sched-chip > .sched-nr-glyph { margin-left: var(--sp-1); vertical-align: middle; }
/* Timed events are position:absolute — pin the glyph bottom-right, clear of the
   status dot that already sits top-right (::after). */
.sched-app .sched-event > .sched-nr-glyph,
.sched-app .sched-swim-event > .sched-nr-glyph {
  position: absolute; bottom: var(--sp-0_5); right: var(--sp-1);
  background: color-mix(in srgb, var(--card) 72%, transparent);
  border-radius: 4px; padding: 0 var(--sp-0_5);
}
.sched-app .sched-swim-chip > .sched-nr-glyph,
.sched-app .sched-list-card > .sched-nr-glyph { margin-left: var(--sp-1); vertical-align: middle; }
.sched-app .sched-nr-flagdot {
  margin-left: var(--sp-0_5); font-size: 9px; font-weight: 800;
  color: var(--warn, #f59e0b);
}

/* Read popover — anchored, read-only, no modal. */
.sched-nr-pop {
  position: fixed; z-index: 1200; width: min(320px, 92vw);
  background: var(--card); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 34px -8px rgba(0,0,0,.5);
  padding: var(--sp-3) var(--sp-3_5); font-size: 13px;
  animation: schedNrPop .12s ease-out;
}
@keyframes schedNrPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sched-nr-pop-head {
  display: flex; align-items: center; gap: var(--sp-2);
  font-weight: 700; font-size: 13.5px; margin-bottom: var(--sp-2);
}
.sched-nr-live, .sched-nrf-live {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ok, #16a34a);
  background: color-mix(in srgb, var(--ok, #16a34a) 14%, transparent);
  border-radius: 999px; padding: var(--sp-0_5) var(--sp-1_5);
}
.sched-nr-note {
  white-space: pre-wrap; line-height: 1.5;
  max-height: 220px; overflow: auto;
  color: color-mix(in srgb, var(--text-primary) 92%, transparent);
}
.sched-nr-empty { color: var(--text-muted); font-style: italic; }
.sched-nr-flags { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2); }
.sched-nr-flag {
  display: inline-flex; align-items: center; gap: var(--sp-0_5);
  font-size: 11px; font-weight: 600;
  color: var(--warn, #f59e0b);
  background: color-mix(in srgb, var(--warn, #f59e0b) 12%, transparent);
  border-radius: 6px; padding: var(--sp-0_5) var(--sp-2);
}
.sched-nr-flag.more { color: var(--text-muted); background: var(--bg-soft, rgba(0,0,0,.05)); }
.sched-nr-pop-actions { margin-top: var(--sp-3); display: flex; }
.sched-nr-pop-actions .btn { flex: 1; justify-content: center; }

/* "Notes & reports" rail card. */
.sched-app .sched-nrf-card {
  cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px;
  padding: var(--sp-2) var(--sp-2_5); margin-top: var(--sp-2);
  background: var(--card);
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.sched-app .sched-nrf-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(0,0,0,.35);
}
.sched-nrf-top { display: flex; align-items: center; gap: var(--sp-1_5); }
.sched-nrf-cust { font-weight: 700; font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-nrf-flag {
  display: inline-flex; align-items: center; gap: var(--sp-0_5); flex: 0 0 auto;
  font-size: 10.5px; font-weight: 700; color: var(--warn, #f59e0b);
}
.sched-nrf-meta { font-size: 11px; color: var(--text-muted); margin-top: var(--sp-0_5); }
.sched-nrf-rep { font-weight: 700; color: color-mix(in srgb, var(--accent) 80%, var(--text-primary)); }
.sched-nrf-snip {
  font-size: 12px; line-height: 1.4; margin-top: var(--sp-1);
  color: color-mix(in srgb, var(--text-primary) 82%, transparent);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sched-nrf-snip.is-muted { color: var(--text-muted); font-style: italic; }