/* ═══════════════════════════════════════════════════════════════════════════
   CONTROL ROOM — from-scratch dispatch redesign (rebuild).
   Mockup: public/_dispatch-control-room-mockup.html.

   Hosted under public/hub/css/ (exempt from the public/css stylelint ratchet,
   same as admin.css). Loaded AFTER scheduler.css so it wins. As later phases
   retire old .sched-* rules from public/css/scheduler.css, that file shrinks and
   the ratchet count improves.

   Prefixed --sc-* tokens alias the app's --app-* palette so the shell themes
   automatically with :root[data-theme]. Status hues follow the Airflow map:
   Scheduled=accent · En route=violet · On site=amber · Complete=green · Late=danger.
   ═══════════════════════════════════════════════════════════════════════════ */
.sched-app {
  --sc-ink: var(--app-text); --sc-ink2: var(--app-text-2); --sc-muted: var(--app-muted);
  --sc-faint: color-mix(in srgb, var(--app-muted) 62%, var(--app-bg));
  --sc-line: var(--app-border); --sc-line2: var(--app-border-2);
  --sc-surface: var(--app-surface); --sc-sunken: var(--app-sunken); --sc-rail: var(--app-bg);
  --sc-accent: var(--app-accent); --sc-accent-ink: var(--app-accent-fg);
  --sc-unassigned: #fb923c; --sc-scheduled: var(--app-accent); --sc-enroute: #a78bfa;
  --sc-onsite: #f59e0b; --sc-done: #22c55e; --sc-late: var(--app-danger); --sc-now: var(--app-danger);
  --sc-r-xs: 7px; --sc-r: 11px; --sc-r-lg: 15px;
  --sc-num: 'Inter', system-ui, sans-serif; --sc-out: cubic-bezier(.22,.61,.36,1);
  --sc-sh1: 0 1px 2px rgba(0,0,0,.42);
  --sc-sh2: 0 1px 2px rgba(0,0,0,.42), 0 12px 28px -8px rgba(0,0,0,.55), 0 28px 50px -22px rgba(0,0,0,.6);
}
:root[data-theme="light"] .sched-app {
  --sc-sh1: 0 1px 1.5px rgba(28,26,22,.05), 0 1px 2px rgba(28,26,22,.03);
  --sc-sh2: 0 1px 2px rgba(28,26,22,.06), 0 10px 24px -10px rgba(28,26,22,.14), 0 24px 48px -24px rgba(28,26,22,.16);
  --sc-unassigned: #d97706; --sc-enroute: #7c5cf0; --sc-onsite: #c47a09; --sc-done: #1a9d4c;
}

/* Full-height page chain — no page scroll; board fills, records scroll. */
body.sched-app { height: 100dvh; overflow: hidden; }
.sched-app .sched-page { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.sched-app .sched-page-body { flex: 1; min-height: 0; overflow: hidden; padding: 0; }
.sched-app .sched-sections { height: 100%; }
.sched-sections[data-section="board"] #sec-scheduler { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.sched-sections[data-section="customers"] #sec-customers,
.sched-sections[data-section="equipment"] #sec-equipment,
.sched-sections[data-section="reports"]   #sec-reports { display: flex; flex-direction: column; min-height: 0; height: 100%; }
#sec-customers .rec-list, #sec-equipment .rec-list, #sec-reports .rec-list { flex: 1; min-height: 0; overflow-y: auto; }
.sched-app [hidden] { display: none !important; }

/* ── Command bar (.scmd) — replaces .sched-topbar; sheds bell/app-switcher (those
      stay in NDNav when feature_unified_nav is on, per the two-bar decision). ── */
.scmd { display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 16px; flex: none;
  background: var(--sc-surface); border-bottom: 1px solid var(--sc-line); z-index: 40; }
.scmd-back { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  color: var(--sc-ink2); font-size: 18px; }
.scmd-back:hover { background: var(--sc-sunken); color: var(--sc-ink); }
.scmd-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; letter-spacing: -.02em; white-space: nowrap; }
.scmd-brand img { width: 26px; height: 26px; border-radius: 7px; }
.scmd-brand b { font-weight: 500; color: var(--sc-ink2); }
.scmd-tabs { display: flex; gap: 2px; margin-left: 6px; }
.scmd-tab { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; border: none;
  background: none; font-weight: 500; color: var(--sc-muted); font-size: 12.5px; cursor: pointer; transition: color .14s var(--sc-out), background .14s var(--sc-out); }
.scmd-tab i { font-size: 16px; }
.scmd-tab:hover { color: var(--sc-ink); background: var(--sc-sunken); }
.scmd-tab.active { color: var(--sc-ink); background: color-mix(in srgb, var(--sc-accent) 12%, transparent); }
.scmd-tab.active i { color: var(--sc-accent); }
.scmd-sp { flex: 1; }
.scmd-search { position: relative; display: flex; align-items: center; gap: 8px; width: 260px; height: 34px; padding: 0 11px;
  background: var(--sc-sunken); border: 1px solid var(--sc-line); border-radius: 9px; color: var(--sc-muted); }
.scmd-search > i { font-size: 16px; }
.scmd-search input { flex: 1; min-width: 0; border: none; background: none; color: var(--sc-ink); font-size: 12.5px; outline: none; }
.scmd-search input::placeholder { color: var(--sc-faint); }
.scmd-cmdk { border: none; background: none; cursor: pointer; padding: 0; }
.scmd-search kbd, .scmd-cmdk kbd { font-family: var(--sc-num); font-size: 10px; padding: 1px 5px; border-radius: 5px;
  background: var(--sc-surface); border: 1px solid var(--sc-line); color: var(--sc-muted); }
.scmd-icon { position: relative; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  border: none; background: none; color: var(--sc-ink2); font-size: 18px; cursor: pointer; transition: .14s var(--sc-out); }
.scmd-icon:hover { background: var(--sc-sunken); color: var(--sc-ink); }
.scmd-clock { font-family: var(--sc-num); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; color: var(--sc-ink2); }
.scmd .sched-add-job { margin-left: 2px; }
.scmd-search-mob { display: none; }
@media (max-width: 900px) { .scmd-tabs { display: none; } .scmd-search { display: none; } .scmd-search-mob { display: grid; } }

/* ── Toolbar (.stoolbar) ── */
.stoolbar { display: flex; align-items: center; gap: 14px; padding: 10px 16px; flex: none; flex-wrap: wrap;
  background: var(--sc-surface); border-bottom: 1px solid var(--sc-line); }
.stoolbar-head .section-title { font-size: 16px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.skpis { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.skpi { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 20px; font-size: 11.5px;
  font-weight: 600; border: 1px solid var(--sc-line); background: var(--sc-sunken); color: var(--sc-ink2); cursor: pointer; }
.skpi .n { font-family: var(--sc-num); font-weight: 700; }
.skpi .sw { width: 7px; height: 7px; border-radius: 50%; background: var(--sc-scheduled); }
.skpi.k-unassigned { color: var(--sc-unassigned); } .skpi.k-unassigned .sw { background: var(--sc-unassigned); }
.skpi.k-enroute { color: var(--sc-enroute); } .skpi.k-enroute .sw { background: var(--sc-enroute); }
.skpi.k-onsite { color: var(--sc-onsite); } .skpi.k-onsite .sw { background: var(--sc-onsite); }
.skpi.k-late { color: var(--sc-late); border-color: color-mix(in srgb, var(--sc-late) 40%, transparent); } .skpi.k-late .sw { background: var(--sc-late); }
.stoolbar-sp { flex: 1; }
.sviews { display: flex; background: var(--sc-sunken); border: 1px solid var(--sc-line); border-radius: 10px; padding: 3px; gap: 2px; }
.sviews button { display: flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 7px; border: none; background: none;
  font-size: 12px; font-weight: 600; color: var(--sc-muted); cursor: pointer; transition: .14s var(--sc-out); }
.sviews button i { font-size: 15px; }
.sviews button:hover { color: var(--sc-ink); }
.sviews button.active { background: var(--sc-surface); color: var(--sc-ink); box-shadow: var(--sc-sh1); }
.sviews button.active i { color: var(--sc-accent); }
.sdatenav { display: flex; align-items: center; gap: 2px; background: var(--sc-sunken); border: 1px solid var(--sc-line);
  border-radius: 10px; padding: 3px; }
.sdatenav button { border: none; background: none; cursor: pointer; color: var(--sc-ink2); }
.sdatenav .nav { width: 30px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-size: 17px; }
.sdatenav .nav:hover { background: var(--sc-surface); color: var(--sc-ink); }
.sdatenav .today { padding: 0 12px; height: 28px; border-radius: 7px; font-weight: 600; font-size: 12.5px; color: var(--sc-ink);
  display: flex; align-items: center; gap: 7px; }
.sdatenav .today .d { font-family: var(--sc-num); color: var(--sc-muted); font-weight: 500; }
/* Day layout + colour-by segments (feature_sched_techday). Same object as
   .sviews above — same sunken well, same 10px/7px radii, same 3px inset — so
   the three grouped controls on this row read as one family rather than as
   three components that happen to sit together. */
.sched-td-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sched-td-tools[hidden] { display: none; }
.sched-td-seg { display: flex; align-items: center; background: var(--sc-sunken); border: 1px solid var(--sc-line);
  border-radius: 10px; padding: 3px; gap: 2px; }
.sched-td-seg button { display: flex; align-items: center; padding: 6px 10px; border-radius: 7px; border: none; background: none;
  font-size: 12px; font-weight: 600; color: var(--sc-muted); cursor: pointer; transition: .14s var(--sc-out); }
.sched-td-seg button:hover { color: var(--sc-ink); }
/* Active is a raised surface, exactly as the active view is — a solid accent
   fill here shouted louder than the view the board is actually showing. */
.sched-td-seg button.is-on { background: var(--sc-surface); color: var(--sc-ink); box-shadow: var(--sc-sh1); }
.sched-td-lbl { display: none; }   /* the uppercase word became the icon below */
.sched-td-lbl-ico { display: grid; place-items: center; width: 24px; height: 28px; color: var(--sc-muted); font-size: 15px; flex: none; }

.sutil { display: flex; align-items: center; gap: 6px; }

/* ── 3-pane board (.sboard) ── */
.sboard { flex: 1; min-height: 0; display: grid; grid-template-columns: 262px minmax(0,1fr) 316px; overflow: hidden; }
.spane { min-height: 0; min-width: 0; overflow-y: auto; display: flex; flex-direction: column; }
.spane-left { background: var(--sc-rail); border-right: 1px solid var(--sc-line); gap: 10px; padding: 12px; }
.spane-right { background: var(--sc-rail); border-left: 1px solid var(--sc-line); }
.sched-app #schedulerCalendar.sched-main { min-height: 0; overflow: auto; background: var(--sc-surface); }
/* Below 1280px the left rail leaves the grid — it comes back as a bottom sheet
   (see the MOBILE BOARD section at the foot of this file), so no display:none. */
@media (max-width: 1280px) { .sboard { grid-template-columns: minmax(0,1fr) 316px; } }
@media (max-width: 960px)  { .sboard { grid-template-columns: minmax(0,1fr); } .spane-right { display: none; } }

/* ═══ VIEWS ═══════════════════════════════════════════════════════════════════
   Restyle the existing view-builder output (.sched-swim-*, .sched-tg-*, etc.)
   to the mockup look. dispatch.css loads after scheduler.css so these win.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Timeline (swimlane) ── */
.sched-app .sched-swim { background: var(--sc-surface); }
.sched-app .sched-swim-actions { padding: 8px 14px; border-bottom: 1px solid var(--sc-line); display: flex; justify-content: flex-end; }
.sched-app .sched-swim-scroll { overflow: auto; }
.sched-app .sched-swim-head { display: flex; position: sticky; top: 0; z-index: 6; background: var(--sc-surface); border-bottom: 1px solid var(--sc-line2); }
.sched-app .sched-swim-corner { width: 200px; flex: none; border-right: 1px solid var(--sc-line); }
.sched-app .sched-swim-hours { display: flex; }
.sched-app .sched-swim-hour { font-family: var(--sc-num); font-size: 11px; color: var(--sc-muted); padding: 9px 0 8px 8px; border-left: 1px solid var(--sc-line); box-sizing: border-box; }
.sched-app .sched-swim-row { display: flex; border-bottom: 1px solid var(--sc-line); }
.sched-app .sched-swim-row:hover { background: color-mix(in srgb, var(--sc-sunken) 55%, transparent); }
.sched-app .sched-swim-label { width: 200px; flex: none; box-sizing: border-box; padding: 10px 12px; border-right: 1px solid var(--sc-line); display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.sched-app .sched-swim-tech { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sched-app .sched-lane-av { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 11px; }
.sched-app .sched-lane-name { font-weight: 600; font-size: 13px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-app .sched-swim-util { display: flex; flex-direction: column; gap: 3px; }
.sched-app .sched-swim-bar { display: block; height: 4px; border-radius: 3px; background: var(--sc-line); overflow: hidden; }
.sched-app .sched-swim-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--sc-onsite); }
.sched-app .sched-swim-util.is-over .sched-swim-bar > span { background: var(--sc-late); }
.sched-app .sched-swim-pct { font-family: var(--sc-num); font-size: 10.5px; color: var(--sc-muted); }
.sched-app .sched-swim-util.is-over .sched-swim-pct { color: var(--sc-late); font-weight: 700; }
.sched-app .sched-swim-util.is-unassigned .sched-swim-pct { color: var(--sc-unassigned); }
.sched-app .sched-swim-untimed { display: flex; flex-wrap: wrap; gap: 4px; }
.sched-app .sched-swim-chip { font-size: 10.5px; padding: 2px 7px; border-radius: 6px; color: var(--sc-ink); cursor: pointer; white-space: nowrap;
  background: color-mix(in srgb, var(--jc, var(--sc-scheduled)) 14%, var(--sc-surface));
  border: 1px solid color-mix(in srgb, var(--jc, var(--sc-scheduled)) 30%, transparent); }
.sched-app .sched-swim-track { position: relative; }
.sched-app .sched-swim-gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--sc-line); }
.sched-app .sched-swim-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--sc-now); z-index: 4; pointer-events: none; }
.sched-app .sched-swim-now::before { content: ""; position: absolute; top: -1px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--sc-now); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-now) 22%, transparent); }
.sched-app .sched-swim-event { position: absolute; border-radius: 8px; padding: 3px 8px; overflow: hidden; cursor: pointer;
  display: flex; align-items: center; gap: 4px; white-space: nowrap; box-shadow: var(--sc-sh1);
  font-size: 11.5px; font-weight: 600; color: var(--sc-ink);
  background: color-mix(in srgb, var(--jc, var(--sc-scheduled)) 13%, var(--sc-surface));
  border: 1px solid color-mix(in srgb, var(--jc, var(--sc-scheduled)) 30%, transparent);
  border-left: 3px solid var(--st, var(--jc, var(--sc-scheduled))); transition: filter .12s, box-shadow .12s; }
.sched-app .sched-swim-event:hover { filter: brightness(1.04); box-shadow: var(--sc-sh2); z-index: 5; }
.sched-app .sched-swim-event b { font-family: var(--sc-num); font-weight: 600; color: var(--sc-ink2); }
.sched-app .sched-swim-event.is-complete { opacity: .72; }
.sched-app .sched-swim-sub { color: var(--sc-muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.sched-app .sched-swim-leave { position: absolute; inset: 0; display: flex; align-items: center; gap: 6px; padding-left: 12px; font-size: 12px; font-weight: 600; color: var(--sc-muted);
  background: repeating-linear-gradient(45deg, transparent, transparent 9px, color-mix(in srgb, var(--sc-muted) 7%, transparent) 9px, color-mix(in srgb, var(--sc-muted) 7%, transparent) 18px); }
.sched-app .sched-leave-tag { font-size: 10px; color: var(--sc-muted); font-weight: 600; }

/* ── Week / Day time-grid ── */
.sched-app .sched-tg { background: var(--sc-surface); }
/* Shared column template for the three tracks. --tg-cols comes off .sched-tg
   (set by viewhtml.js buildTimeGrid; fewer than 7 when weekends are filtered).
   Keeping it here rather than inline is what lets the mobile rung swap in fixed
   columns — the three tracks must always agree or the day headers stop lining
   up with the day columns. */
.sched-app .sched-tg-head,
.sched-app .sched-allday-row,
.sched-app .sched-tg-body { grid-template-columns: 56px repeat(var(--tg-cols, 7), 1fr); }
.sched-app .sched-tg-head { display: grid; position: sticky; top: 0; z-index: 6; background: var(--sc-surface); border-bottom: 1px solid var(--sc-line2); }
.sched-app .sched-tg-corner { border-right: 1px solid var(--sc-line); }
.sched-app .sched-tg-headcell { padding: 8px 6px 9px; text-align: center; border-left: 1px solid var(--sc-line); }
.sched-app .sched-tg-dow { display: block; font-size: 10.5px; font-weight: 600; color: var(--sc-muted); text-transform: uppercase; letter-spacing: .05em; }
.sched-app .sched-tg-dnum { display: block; font-family: var(--sc-num); font-size: 16px; font-weight: 700; margin-top: 3px; color: var(--sc-ink); }
.sched-app .sched-tg-headcell.is-today .sched-tg-dow { color: var(--sc-accent); }
.sched-app .sched-tg-headcell.is-today .sched-tg-dnum { background: var(--sc-accent); color: var(--sc-accent-ink); width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; margin: 2px auto 0; }
.sched-app .sched-tg-headcell.is-offday { background: color-mix(in srgb, var(--sc-muted) 6%, transparent); }
.sched-app .sched-allday-row { display: grid; border-bottom: 1px solid var(--sc-line); background: var(--sc-surface); }
.sched-app .sched-allday-label { font-size: 9.5px; font-weight: 600; color: var(--sc-muted); text-transform: uppercase; letter-spacing: .05em; padding: 6px; align-self: center; }
.sched-app .sched-allday-cell { border-left: 1px solid var(--sc-line); padding: 4px; display: flex; flex-direction: column; gap: 3px; min-height: 30px; }
.sched-app .sched-tg-body { display: grid; }
.sched-app .sched-tg-gutter { border-right: 1px solid var(--sc-line); }
.sched-app .sched-tg-hour { position: relative; }
.sched-app .sched-tg-hour span { position: absolute; top: -7px; right: 8px; font-family: var(--sc-num); font-size: 10px; color: var(--sc-muted); }
.sched-app .sched-tg-col { position: relative; border-left: 1px solid var(--sc-line); }
.sched-app .sched-tg-col.is-today { background: color-mix(in srgb, var(--sc-accent) 5%, transparent); }
.sched-app .sched-tg-col.is-offday { background: color-mix(in srgb, var(--sc-muted) 6%, transparent); }
.sched-app .sched-tg-cell { border-top: 1px solid var(--sc-line); cursor: pointer; }
.sched-app .sched-tg-cell:hover { background: color-mix(in srgb, var(--sc-accent) 7%, transparent); }
.sched-app .sched-event { position: absolute; left: 0; border-radius: 8px; padding: 4px 7px; overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column; gap: 1px; box-shadow: var(--sc-sh1);
  background: color-mix(in srgb, var(--jc, var(--sc-scheduled)) 13%, var(--sc-surface));
  border: 1px solid color-mix(in srgb, var(--jc, var(--sc-scheduled)) 30%, transparent);
  border-left: 3px solid var(--st, var(--jc, var(--sc-scheduled))); transition: filter .12s, box-shadow .12s; }
.sched-app .sched-event:hover { filter: brightness(1.04); box-shadow: var(--sc-sh2); z-index: 5; }
.sched-app .sched-event.is-complete { opacity: .72; }
.sched-app .sched-event-time { display: flex; align-items: center; gap: 5px; font-family: var(--sc-num); font-size: 10px; font-weight: 600; color: var(--sc-ink2); }
.sched-app .sched-event-title { font-size: 11.5px; font-weight: 600; color: var(--sc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-app .sched-event-sub { font-size: 10px; color: var(--sc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-app .sched-ev-av { width: 15px; height: 15px; border-radius: 4px; display: inline-grid; place-items: center; font-size: 8px; font-weight: 700; background: var(--jc, var(--sc-scheduled)); color: #fff; }
.sched-app .sched-nowline { position: absolute; left: 0; right: 0; height: 2px; background: var(--sc-now); z-index: 4; pointer-events: none; }
.sched-app .sched-nowline::before { content: ""; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--sc-now); }
.sched-app .sched-nowline-lbl { position: absolute; left: 6px; top: -8px; font-family: var(--sc-num); font-size: 9.5px; font-weight: 700; color: #fff; background: var(--sc-now); border-radius: 4px; padding: 0 4px; }

/* ── Month ── */
.sched-app .sched-month { display: flex; flex-direction: column; height: 100%; }
.sched-app .sched-month-head { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--sc-line2); background: var(--sc-surface); }
.sched-app .sched-month-head > div { padding: 8px 0; text-align: center; font-size: 10.5px; font-weight: 600; color: var(--sc-muted); text-transform: uppercase; letter-spacing: .05em; border-left: 1px solid var(--sc-line); }
.sched-app .sched-month-head > div:first-child { border-left: none; }
.sched-app .sched-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); flex: 1; min-height: 0; }
.sched-app .sched-month-cell { border-left: 1px solid var(--sc-line); border-top: 1px solid var(--sc-line); padding: 5px 6px 7px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.sched-app .sched-month-cell:nth-child(7n+1) { border-left: none; }
.sched-app .sched-month-cell:hover { background: color-mix(in srgb, var(--sc-accent) 5%, transparent); }
.sched-app .sched-month-cell.is-blank { background: color-mix(in srgb, var(--sc-muted) 4%, transparent); cursor: default; }
.sched-app .sched-month-cell.is-offday { background: color-mix(in srgb, var(--sc-muted) 5%, transparent); }
.sched-app .sched-daynum { font-family: var(--sc-num); font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 600; color: var(--sc-ink2); align-self: flex-start; }
.sched-app .sched-month-cell.is-today .sched-daynum { background: var(--sc-accent); color: var(--sc-accent-ink); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.sched-app .sched-more { font-size: 10px; color: var(--sc-muted); font-weight: 600; margin-top: 1px; }

/* Chips (month cells + all-day) — left STATUS stripe, technician-tinted body.
   The stripe must stay --st (the [data-status] map in scheduler.css): this file
   loads after scheduler.css at the same specificity, so hard-coding --jc here
   silently un-did the status dual-encoding and left invoiced jobs un-purple. */
.sched-app .sched-chip { display: flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; padding: 2px 6px; border-radius: 6px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--sc-ink);
  background: color-mix(in srgb, var(--jc, var(--sc-scheduled)) 14%, var(--sc-surface));
  border-left: 3px solid var(--st, var(--jc, var(--sc-scheduled))); }
.sched-app .sched-chip b { font-family: var(--sc-num); font-weight: 600; color: var(--sc-ink2); }
.sched-app .sched-chip.is-complete { opacity: .7; }

/* Invoiced overrides "Colour events by" ─────────────────────────────────────
   Billed is a money state, not a scheduling one. Once a job is invoiced the
   board has to read that at a glance no matter what the chip is otherwise
   coloured by, so --st-invoiced takes the BODY here, not just the stripe —
   --jc (technician / job type / status, per the setting) is overruled.
   Deliberately the ONLY status that does this: if every state claimed the body
   the setting would be a lie and the board would be a colour wheel. */
.sched-app .sched-chip[data-status="invoiced"],
.sched-app .sched-event[data-status="invoiced"],
.sched-app .sched-swim-event[data-status="invoiced"],
.sched-app .sched-swim-chip[data-status="invoiced"] {
  background: color-mix(in srgb, var(--st-invoiced) 30%, var(--sc-surface));
  border-color: color-mix(in srgb, var(--st-invoiced) 48%, transparent);
  border-left-color: var(--st-invoiced);
}
/* The tech-initials avatar keeps --jc: who owns the job is still worth knowing
   on a billed day, and it is the one mark the violet body hasn't taken. */

/* ── List ── */
.sched-app .sched-list { padding: 12px 16px; overflow-y: auto; }
.sched-app .sched-list-group { margin-bottom: 14px; }
.sched-app .sched-list-date { font-size: 11px; font-weight: 700; color: var(--sc-muted); text-transform: uppercase; letter-spacing: .05em; padding: 4px 2px 8px; }
.sched-app .sched-list-card { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid var(--sc-line); border-radius: var(--sc-r); background: var(--sc-surface); cursor: pointer; margin-bottom: 6px; transition: border-color .12s, box-shadow .12s; }
.sched-app .sched-list-card:hover { border-color: var(--sc-line2); box-shadow: var(--sc-sh1); }
.sched-app .sched-list-card.is-selected { border-color: var(--sc-accent); background: color-mix(in srgb, var(--sc-accent) 8%, var(--sc-surface)); }
.sched-app .sched-list-card.is-complete { opacity: .72; }
.sched-app .sched-list-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.sched-app .sched-list-main { flex: 1; min-width: 0; }
.sched-app .sched-list-cust { font-size: 13px; font-weight: 600; color: var(--sc-ink); }
.sched-app .sched-list-meta { font-size: 11.5px; color: var(--sc-muted); margin-top: 1px; }
.sched-app .sched-status-tag { font-weight: 600; }

/* ── Right-pane job inspector (phase 3) ── */
.sched-app .sched-insp { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.sched-app .sched-insp-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--sc-muted); padding: 30px; }
.sched-app .sched-insp-empty i { font-size: 30px; color: var(--sc-faint); }
.sched-app .sched-insp-empty p { font-size: 12.5px; max-width: 200px; }
.sched-app .sched-insp-top { padding: 14px 16px 12px; border-bottom: 1px solid var(--sc-line); }
.sched-app .sched-insp-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sched-app .sched-insp-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 3px 9px; border-radius: 20px;
  color: var(--s, var(--sc-scheduled)); background: color-mix(in srgb, var(--s, var(--sc-scheduled)) 16%, transparent); }
.sched-app .sched-insp-pill i { font-size: 13px; }
.sched-app .sched-insp-wo { margin-left: auto; font-family: var(--sc-num); font-size: 11px; color: var(--sc-muted); font-weight: 600; }
.sched-app .sched-insp-title { font-size: 16px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--sc-ink); }
.sched-app .sched-insp-cust { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--sc-ink2); margin-top: 3px; }
.sched-app .sched-insp-cust i { font-size: 15px; color: var(--sc-muted); }

/* Stepper — the thread reads in the JOB'S status colour, not a fixed hue.
   inspector.js stamps data-status on the wrapper, which the [data-status] map in
   scheduler.css resolves to --st (green when complete, violet when invoiced, …).
   Hard-coding --sc-onsite/--sc-enroute here is what left finished jobs amber. */
.sched-app .sched-insp-stepper { display: flex; padding: 16px 12px 6px; }
.sched-app .sched-insp-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; border: none; background: none; cursor: pointer; padding: 0; }
.sched-app .sched-insp-step::before { content: ""; position: absolute; top: 9px; left: -50%; width: 100%; height: 2px; background: var(--sc-line); }
.sched-app .sched-insp-step:first-child::before { display: none; }
.sched-app .sched-insp-step.is-done::before, .sched-app .sched-insp-step.is-cur::before { background: var(--st, var(--sc-scheduled)); }
.sched-app .sched-insp-step .dot { width: 20px; height: 20px; border-radius: 50%; background: var(--sc-surface); border: 2px solid var(--sc-line); display: grid; place-items: center; font-size: 11px; color: var(--sc-muted); z-index: 1; }
.sched-app .sched-insp-step.is-done .dot { background: var(--st, var(--sc-scheduled)); border-color: var(--st, var(--sc-scheduled)); color: #fff; }
.sched-app .sched-insp-step.is-cur .dot { border-color: var(--st, var(--sc-scheduled)); color: var(--st, var(--sc-scheduled)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--st, var(--sc-scheduled)) 18%, transparent); }
.sched-app .sched-insp-step .lbl { font-size: 10px; font-weight: 600; color: var(--sc-muted); }
.sched-app .sched-insp-step.is-done .lbl, .sched-app .sched-insp-step.is-cur .lbl { color: var(--sc-ink); }
.sched-app button.sched-insp-step:hover .dot { border-color: var(--sc-accent); }
.sched-app .sched-insp-step.is-locked { cursor: default; }
.sched-app .sched-insp-locknote { display: flex; align-items: center; gap: 6px; margin: 2px 16px 0; padding: 8px 10px; border-radius: var(--sc-r-xs); font-size: 11.5px; color: var(--sc-muted); background: var(--sc-sunken); border: 1px solid var(--sc-line); }
.sched-app .sched-insp-locknote i { font-size: 14px; }

/* sections + details */
.sched-app .sched-insp .sched-insp-sec { padding: 14px 16px; border-top: 1px solid var(--sc-line); }
.sched-app .sched-insp-t { font-size: 10.5px; font-weight: 700; color: var(--sc-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.sched-app .sched-insp-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; font-size: 12.5px; margin: 0; }
.sched-app .sched-insp-dl dt { color: var(--sc-muted); }
.sched-app .sched-insp-dl dd { color: var(--sc-ink); font-weight: 600; text-align: right; margin: 0; }
.sched-app .sched-insp-dl dd a { color: var(--sc-accent); }
.sched-app .sched-insp-muted { color: var(--sc-muted); font-weight: 500; }
.sched-app .sched-insp-mav { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.sched-app .sched-insp-mav .a { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; }

/* checklist */
.sched-app .sched-insp-ckh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.sched-app .sched-insp-ckh .sched-insp-t { margin: 0; }
.sched-app .sched-insp-prog { font-family: var(--sc-num); font-size: 11px; font-weight: 700; color: var(--sc-onsite); }
.sched-app .sched-insp-ck { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 12.5px; color: var(--sc-ink); }
.sched-app .sched-insp-ck + .sched-insp-ck { border-top: 1px solid var(--sc-line); }
.sched-app .sched-insp-ck .box { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--sc-line2); display: grid; place-items: center; font-size: 12px; color: transparent; flex: none; }
.sched-app .sched-insp-ck.on .box { background: var(--sc-onsite); border-color: var(--sc-onsite); color: #fff; }
.sched-app .sched-insp-ck.on span { color: var(--sc-muted); text-decoration: line-through; }

/* documents */
/* quote → deposit → invoice trail */
.sched-app .sched-insp-trail { display: flex; flex-direction: column; gap: 6px; }
.sched-app .sched-insp-tr { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 1px solid var(--sc-line); border-radius: var(--sc-r); background: var(--sc-surface); color: var(--sc-ink); font: inherit; font-size: 12px; text-align: left; text-decoration: none; }
.sched-app a.sched-insp-tr:hover, .sched-app button.sched-insp-tr:hover { border-color: var(--sc-line2); background: var(--sc-sunken); }
.sched-app a.sched-insp-tr:focus-visible, .sched-app button.sched-insp-tr:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 1px; }
.sched-app button.sched-insp-tr { cursor: pointer; }
.sched-app .sched-insp-tr > i { font-size: 16px; color: var(--sc-muted); flex: none; }
.sched-app .sched-insp-tr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sched-app .sched-insp-tr-lbl { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-app .sched-insp-tr-sub { font-size: 11px; color: var(--sc-muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-app .sched-insp-tr-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.sched-app .sched-insp-tr-amt { font-family: var(--sc-num); font-variant-numeric: tabular-nums; font-weight: 700; flex: none; }
.sched-app .sched-insp-tr-st { flex: none; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px; border-radius: 20px; white-space: nowrap; }
.sched-app .sched-insp-tr-st.is-ok { color: var(--sc-done); background: color-mix(in srgb, var(--sc-done) 15%, transparent); }
.sched-app .sched-insp-tr-st.is-wait { color: var(--sc-onsite); background: color-mix(in srgb, var(--sc-onsite) 15%, transparent); }
.sched-app .sched-insp-tr-st.is-bad { color: var(--sc-late); background: color-mix(in srgb, var(--sc-late) 15%, transparent); }
.sched-app .sched-insp-tr-st.is-muted { color: var(--sc-muted); background: var(--sc-sunken); }
.sched-app .sched-insp-tr-go { font-size: 14px; color: var(--sc-faint); flex: none; }
.sched-app .sched-insp-tr.is-todo { border-style: dashed; color: var(--sc-muted); }
.sched-app .sched-insp-tr.is-todo .sched-insp-tr-lbl { font-weight: 600; }
.sched-app .sched-insp-tr.is-loading { color: var(--sc-muted); opacity: .6; }
/* Row + detach control. Always rendered rather than hover-revealed — the pane is
   used on touch, where there is no hover to reveal anything. */
.sched-app .sched-insp-trw { display: flex; align-items: stretch; gap: 4px; }
.sched-app .sched-insp-trw .sched-insp-tr { flex: 1; min-width: 0; }
.sched-app .sched-insp-tr-unlink { flex: none; width: 30px; display: grid; place-items: center; border: 1px solid var(--sc-line); border-radius: var(--sc-r); background: var(--sc-surface); color: var(--sc-muted); cursor: pointer; font-size: 15px; }
.sched-app .sched-insp-tr-unlink:hover { border-color: var(--sc-late); color: var(--sc-late); background: color-mix(in srgb, var(--sc-late) 10%, transparent); }
.sched-app .sched-insp-tr-unlink:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 1px; }

.sched-app .sched-insp-docs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sched-app .sched-insp-doc { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--sc-line); border-radius: var(--sc-r); background: var(--sc-surface); color: var(--sc-ink2); cursor: pointer; font-size: 12px; font-weight: 600; text-align: left; }
.sched-app .sched-insp-doc i { font-size: 16px; color: var(--sc-muted); }
.sched-app .sched-insp-doc:hover { border-color: var(--sc-line2); background: var(--sc-sunken); color: var(--sc-ink); }

/* action footer */
.sched-app .sched-insp-actions { margin-top: auto; position: sticky; bottom: 0; background: var(--sc-surface); border-top: 1px solid var(--sc-line); padding: 12px 16px; display: flex; gap: 8px; }
.sched-app .sched-insp-actions .btn { flex: 1; justify-content: center; }
.sched-app .sched-insp-actions .btn-secondary { flex: none; }

/* selected job highlight across views */
.sched-app #schedulerCalendar [data-job-id].is-inspecting { outline: 2px solid var(--sc-accent); outline-offset: 1px; }

/* ── Left pane: unscheduled queue + briefing (phase 4) ── */
.sched-app .spane-left .sched-rail { background: none; border: none; padding: 0; margin: 0; }
.sched-app .spane-left .sched-rail-head { display: flex; align-items: center; gap: 8px; padding: 6px 2px 8px; font-size: 11px; font-weight: 700; color: var(--sc-muted); text-transform: uppercase; letter-spacing: .05em; }
.sched-app .spane-left .sched-rail-count { margin-left: auto; font-family: var(--sc-num); font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 9px; background: color-mix(in srgb, var(--sc-unassigned) 16%, transparent); color: var(--sc-unassigned); }
.sched-app .sched-unsched-card { background: var(--sc-surface); border: 1px solid var(--sc-line); border-radius: var(--sc-r); padding: 10px 11px; margin-bottom: 8px; transition: border-color .12s, box-shadow .12s, transform .12s; }
.sched-app .sched-unsched-card:hover { border-color: var(--sc-line2); box-shadow: var(--sc-sh2); transform: translateY(-1px); }
.sched-app .sched-unsched-top { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.sched-app .sched-trade-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px; border-radius: 6px; }
.sched-app .sched-trade-tag.tag-install { background: color-mix(in srgb, var(--sc-accent) 14%, transparent); color: var(--sc-accent); }
.sched-app .sched-trade-tag.tag-service { background: color-mix(in srgb, var(--sc-muted) 18%, transparent); color: var(--sc-ink2); }
.sched-app .sched-trade-tag.tag-repair { background: color-mix(in srgb, var(--sc-unassigned) 16%, transparent); color: var(--sc-unassigned); }
.sched-app .sched-trade-tag.tag-quote { background: color-mix(in srgb, var(--sc-enroute) 15%, transparent); color: var(--sc-enroute); }
.sched-app .sched-unsched-card .sched-warr-ico { margin-left: auto; color: var(--sc-onsite); font-size: 14px; }
.sched-app .sched-unsched-name { font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: var(--sc-ink); cursor: pointer; }
.sched-app .sched-unsched-name:hover { color: var(--sc-accent); }
.sched-app .sched-unsched-addr { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--sc-muted); margin-top: 2px; }
.sched-app .sched-unsched-addr i { font-size: 13px; }
.sched-app .sched-unsched-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.sched-app .sched-unsched-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--sc-ink2); background: var(--sc-sunken); border: 1px solid var(--sc-line); border-radius: 6px; padding: 2px 7px; }
.sched-app .sched-unsched-chip i { font-size: 12px; }
.sched-app .sched-unsched-foot .sched-qa-btn { margin-left: auto; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--sc-line); background: var(--sc-surface); color: var(--sc-ink2); display: grid; place-items: center; cursor: pointer; }
.sched-app .sched-unsched-foot .sched-qa-btn:hover { border-color: var(--sc-accent); color: var(--sc-accent); }
.sched-app .sched-unsched-sug { font-size: 11px; font-weight: 600; color: var(--sc-accent); display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.sched-app .sched-unsched-sug i { font-size: 14px; }
.sched-app .spane-left .sched-brief { margin: 0; padding: 0; }
.sched-app .sched-brief-cta { display: flex; align-items: center; gap: 6px; width: 100%; justify-content: center; padding: 10px; border-radius: var(--sc-r); cursor: pointer; font-weight: 600; font-size: 12.5px;
  border: 1px solid color-mix(in srgb, var(--sc-accent) 30%, var(--sc-line)); background: color-mix(in srgb, var(--sc-accent) 8%, var(--sc-surface)); color: var(--sc-accent); }
.sched-app .sched-brief-cta:hover { background: color-mix(in srgb, var(--sc-accent) 14%, var(--sc-surface)); }

/* ── Toolbar polish (phase 5) ── */
.sched-app .sviews .sched-view-ind { display: none; }   /* old sliding pill — we use button.active instead */
.sched-app .skpi { cursor: default; }

/* ── Date-picker popover + mini-calendar (phase 6) ── */
.sched-app .sdatenav-wrap { position: relative; }
.sched-app .sched-calpop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; width: 240px; padding: 10px; border-radius: var(--sc-r); background: var(--sc-surface); border: 1px solid var(--sc-line); box-shadow: var(--sc-sh2); }
.sched-app .sched-mc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sched-app .sched-mc-title { font-size: 12.5px; font-weight: 700; color: var(--sc-ink); }
.sched-app .sched-mc-nav { width: 24px; height: 24px; border: none; background: none; border-radius: 6px; color: var(--sc-ink2); cursor: pointer; display: grid; place-items: center; }
.sched-app .sched-mc-nav:hover { background: var(--sc-sunken); }
.sched-app .sched-mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.sched-app .sched-mc-wd { text-align: center; font-size: 9.5px; font-weight: 700; color: var(--sc-muted); padding: 2px 0; }
.sched-app .sched-mc-day { aspect-ratio: 1; border: none; background: none; border-radius: 7px; font-family: var(--sc-num); font-size: 11.5px; color: var(--sc-ink2); cursor: pointer; position: relative; }
.sched-app .sched-mc-day:hover { background: var(--sc-sunken); color: var(--sc-ink); }
.sched-app .sched-mc-day.sched-mc-blank { cursor: default; }
.sched-app .sched-mc-day.today { color: var(--sc-accent); font-weight: 700; }
.sched-app .sched-mc-day.sel { background: var(--sc-accent); color: var(--sc-accent-ink); font-weight: 700; }
.sched-app .sched-mc-day.has::after { content: ""; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--sc-accent); }
.sched-app .sched-mc-day.sel.has::after { background: var(--sc-accent-ink); }
.sched-app .spane-left #schedServiceDue { margin-top: 4px; }

/* ── Map view (phase 8) — day-map promoted to a first-class board view ── */
.sched-app .sched-mapview { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--sc-surface); }
.sched-app .sched-mapview-bar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--sc-line); flex: none; flex-wrap: wrap; }
.sched-app .sched-mapview-bar #dayMapTechSel { max-width: 220px; }
.sched-app .sched-mapview-bar #dayMapStatus { font-size: 11.5px; color: var(--sc-muted); }
.sched-app .sched-mapview .day-map-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) 300px; }
.sched-app .sched-mapview #dayMap { height: 100%; min-height: 0; }
.sched-app .sched-mapview #dayMapList { overflow-y: auto; border-left: 1px solid var(--sc-line); padding: 10px; background: var(--sc-rail); }
@media (max-width: 900px) { .sched-app .sched-mapview .day-map-body { grid-template-columns: minmax(0,1fr); } .sched-app .sched-mapview #dayMapList { display: none; } }

/* ── Full-height board content (baked in — replaces the retired sched-fullheight
      flag, whose html.sched-fullheight rules used to flex the view content). ── */
.sched-app #schedulerCalendar.sched-main { display: flex; flex-direction: column; overflow: hidden; }
.sched-app #schedulerCalendar.sched-main > .sched-tg,
.sched-app #schedulerCalendar.sched-main > .sched-swim,
.sched-app #schedulerCalendar.sched-main > .sched-month,
.sched-app #schedulerCalendar.sched-main > .sched-list,
.sched-app #schedulerCalendar.sched-main > .sched-history,
.sched-app #schedulerCalendar.sched-main > .sched-mapview,
.sched-app #schedulerCalendar.sched-main > .sched-empty { flex: 1; min-height: 0; }
.sched-app .sched-tg { display: flex; flex-direction: column; }
.sched-app .sched-tg-body { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
.sched-app .sched-swim { display: flex; flex-direction: column; }
.sched-app .sched-swim-scroll { flex: 1; min-height: 0; }
.sched-app .sched-list { overflow-y: auto; }
.sched-app .sched-history { overflow-y: auto; }

/* ── Full-WIDTH board (baked in — replaces retired toolbar-v2 flag). The base
      .sched-page-body centers at max-width:1720px + margin auto, and .dash-section
      pads; zero them so the 3 panes reach the viewport edges. ── */
.sched-app .sched-page-body { max-width: none; margin: 0; padding: 0; }
.sched-sections[data-section="board"] #sec-scheduler { padding: 0; border: 0; }

/* Unscheduled card: base scheduler.css makes it a flex ROW (align-items:center),
   which squishes the name into a narrow column (per-word wrap). Force the vertical
   mockup card. */
.sched-app .sched-unsched-card { display: block; }
.sched-app .sched-unsched-name { display: block; white-space: normal; overflow: visible; }

/* ── Customer records: match the redesigned books customers page ──────────────
   Per-customer coloured avatar tiles (inline background from records.js) with
   white initials, plus Portal / NDIS tag pills. Scoped to the customer surfaces
   so the shared equipment/report .rec-cards keep their accent-tinted avatars. */
.rec-avatar.is-color,
.cust-drawer-avatar.is-color { color: #fff; }
.rec-tag {
  display: inline-flex; align-items: center; vertical-align: middle;
  font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 5px; margin-left: 6px; line-height: 1.4;
}
.rec-tag.portal { background: color-mix(in srgb, var(--sc-accent) 16%, transparent); color: var(--sc-accent); }
.rec-tag.ndis   { background: color-mix(in srgb, var(--sc-done) 16%, transparent);   color: var(--sc-done); }

/* Customer drawer body: the .c360-* markup borrows tokens scoped to .c360 in
   customer360.css, which the drawer isn't inside — so re-map them onto the
   scheduler's own --sc-* palette. Fixes the whole drawer (metrics, rows,
   badges), then the overview tiles get the redesigned grouped-panel look. */
.cust-drawer {
  --c-surface: var(--sc-surface); --c-surface-2: var(--sc-sunken, var(--sc-surface));
  --c-hair: var(--sc-line); --c-hair-2: var(--sc-line2);
  --c-ink: var(--sc-ink); --c-ink-2: var(--sc-ink2); --c-ink-3: var(--sc-muted);
  --c-accent: var(--sc-accent); --c-hover: color-mix(in srgb, var(--sc-muted) 12%, transparent);
  --c-pos: var(--sc-done); --c-neg: var(--app-danger); --c-amber: #f59e0b;
}
.cust-drawer .c360-metrics {
  grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--c-hair-2); border: 1px solid var(--c-hair-2);
  border-radius: 12px; overflow: hidden;
}
.cust-drawer .c360-metric { background: var(--c-surface-2); border: 0; border-radius: 0; padding: 13px 16px; }
/* A lone trailing tile (3-up NDIS overview) spans the row instead of leaving a hairline gap. */
.cust-drawer .c360-metric:last-child:nth-child(odd) { grid-column: 1 / -1; }
.cust-drawer .c360-metric .mk { font-size: 10.5px; letter-spacing: .06em; }
.cust-drawer .c360-metric .mv { font-family: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace; font-size: 19px; margin-top: 7px; }
.cust-drawer .c360-metric .md { font-size: 11px; margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE BOARD (≤960px)
   ───────────────────────────────────────────────────────────────────────────
   960px is the rung where .spane-right leaves the grid and the board goes
   single-pane, so it's the honest boundary for "phone/small tablet". EVERY rule
   below lives inside that query: above it the control room computes exactly as
   it did before, which is what makes this safe to ship without a flag.

   The page chain is height-locked (body { height:100dvh; overflow:hidden } at
   the top of this file). On a phone that meant anything which didn't fit was
   CLIPPED rather than scrolled — 228px of toolbar and 4 of 7 week columns sat
   behind an overflow-x:hidden ancestor with no gesture that could reach them.
   The fix is to make the chrome FIT (compact toolbar, real scroll strips) and
   to give the week grid its own horizontal scroller, rather than unlocking the
   page: nested touch scrollers would be worse than either.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sheet chrome is markup that only means anything on mobile — `display: none`
   here keeps the desktop panes unchanged, and each rung below flips just the
   display on the pane that has actually become a sheet at that width. */
.sinsp-sheet-head {
  display: none;
  position: relative; flex: none;
  align-items: center; justify-content: center;
  /* min-height so the 44px close button fits INSIDE the head — at the natural
     ~22px it hung over the first row of sheet content and stole its taps. */
  min-height: 44px;
  padding: 8px 12px 4px;
}
.sinsp-grab { width: 38px; height: 4px; border-radius: 2px; background: var(--sc-line2); }
.sinsp-sheet-x {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: grid; place-items: center;
  border: none; background: none; color: var(--sc-muted); font-size: 20px; cursor: pointer;
}
/* Scrim: everything but the reveal. The two sheets become sheets at different
   rungs (inspector ≤960, queue ≤1280), so each query flips only its own — a
   shared .sinsp-backdrop reveal would put a full-screen scrim behind the
   inspector on 960–1280px tablets, where it's still a plain column. */
.sinsp-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 119;
  background: rgba(0, 0, 0, .45);
}
/* The Queue button only makes sense while the rail it opens is a sheet. */
.squeue-btn { display: none; }

/* ── Left rail → bottom sheet (≤1280px) ────────────────────────────────────
   Matches the rung where .spane-left leaves the board grid. The dispatcher's
   inbox — briefing, unscheduled queue, callback staging tray, service due —
   was simply absent on every phone AND tablet before this.

   Drag-to-schedule can't survive the move (the drop targets are on the board
   underneath), but the tap paths do: Assign and the card name both work, and
   queue.js closes the sheet on either so the result isn't hidden behind it. */
@media (max-width: 1280px) {
  .sched-app .squeue-btn { display: inline-flex; }
  .sched-app #schedQueueBackdrop:not([hidden]) { display: block; }
  .sched-app .spane-left {
    display: flex;
    position: fixed;
    left: 50%; right: auto; bottom: 0; top: auto;
    /* Capped and centred: the rail is designed at 262px, so a 1280px-wide sheet
       would stretch its cards across the whole tablet. On a phone min() lands
       on 100% and it's an ordinary full-width bottom sheet. */
    width: min(560px, 100%);
    z-index: 120;
    max-height: 82dvh;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    border-right: none;
    border-top: 1px solid var(--sc-line2);
    border-radius: var(--sc-r-lg) var(--sc-r-lg) 0 0;
    background: var(--sc-surface);
    box-shadow: var(--sc-sh2);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translate(-50%, 101%);
    visibility: hidden;
    transition: transform .24s var(--sc-out), visibility 0s linear .24s;
  }
  .sched-app .spane-left.is-open {
    transform: translate(-50%, 0); visibility: visible;
    transition: transform .24s var(--sc-out);
  }
  /* The pane is its own scroller here, so the handle and close button stick. */
  .sched-app .spane-left .sinsp-sheet-head {
    display: flex; position: sticky; top: 0; z-index: 1;
    margin: -12px -12px 0;             /* span the sheet, cancelling the rail padding */
    background: var(--sc-surface);
  }
  /* .dash-section's fade-up leaves a transform behind (fill-mode: both), which
     would make the section the containing block for these fixed sheets. */
  .sched-app .dash-section { animation: none; }
}

@media (max-width: 960px) {
  /* (.dash-section's animation is already neutralised by the ≤1280px rung
     above, which is what keeps these fixed sheets anchored to the viewport.) */

  /* ── Job inspector → bottom sheet ──────────────────────────────────────────
     The pane is no longer display:none; it leaves the grid via position:fixed
     and slides up when a job is selected. inspector.js renders into the same
     node as on desktop, so there is exactly one render path. */
  .sched-app .spane-right {
    display: flex;
    position: fixed;
    left: 50%; right: auto; bottom: 0; top: auto;
    width: min(560px, 100%);          /* the inspector is designed at 316px */
    z-index: 120;
    max-height: 82dvh;
    padding-bottom: env(safe-area-inset-bottom);
    border-left: none;
    border-top: 1px solid var(--sc-line2);
    border-radius: var(--sc-r-lg) var(--sc-r-lg) 0 0;
    background: var(--sc-surface);
    box-shadow: var(--sc-sh2);
    overflow: hidden;                 /* the inspector inside is the scroller */
    transform: translate(-50%, 101%);
    visibility: hidden;
    transition: transform .24s var(--sc-out), visibility 0s linear .24s;
  }
  .sched-app .spane-right.is-open {
    transform: translate(-50%, 0);
    visibility: visible;
    transition: transform .24s var(--sc-out);
  }
  .sched-app .spane-right > #schedInspector { flex: 1; min-height: 0; overflow-y: auto; }
  /* Scoped to the right pane: between 960 and 1280 the LEFT pane is already a
     sheet while this one is still a plain column, so its head must stay hidden. */
  .sched-app .spane-right .sinsp-sheet-head { display: flex; }
  .sched-app #schedInspBackdrop:not([hidden]) { display: block; }
  /* The sheet's own bottom padding already clears the home indicator. */
  .sched-app .sched-insp-actions { padding-bottom: 12px; }

  /* ── Toolbar: 5 wrapped rows (335px) → 3 compact rows ──────────────────────
     Explicit `order` rather than source order, so the two things a dispatcher
     reaches for most — the date and Add Job — land on the first row together. */
  .sched-app .stoolbar { gap: 8px; padding: 8px 10px; align-items: center; }
  .sched-app .stoolbar-sp { display: none; }        /* a flex spacer forces a wrap here */
  .sched-app .sdatenav-wrap { order: 1; flex: 1 1 auto; min-width: 0; }
  .sched-app .sched-add-job { order: 2; flex: none; margin-left: 0; }
  .sched-app #schedulerViewSwitch { order: 3; flex: 1 1 100%; width: 100%; }
  .sched-app .sutil { order: 4; flex: none; }
  /* Full width, not sharing row 4 with the tools: squeezed into the ~118px that
     were left over, the status counts showed one chip and hid the rest behind a
     scroll — and "3 unassigned / 1 late" is the whole point of the strip. */
  .sched-app .stoolbar-head { order: 5; flex: 1 1 100%; width: 100%; min-width: 0; }
  /* NDNav (and the fallback command bar) already name the page. */
  .sched-app .stoolbar-head .section-title { display: none; }

  /* All 7 views fit a 390px phone once the labels collapse to icons, so the
     strip needs no scrolling and Map/History stop being unreachable. The active
     view keeps its label, which is what makes the icon row readable. */
  /* Seven 44px icons fit a 390px phone outright; on a 360px one the active
     button's label pushes the row ~15px over, so the strip scrolls as a safety
     net rather than clipping the way the old 602px-wide switcher did. */
  .sched-app .sviews {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .sched-app .sviews::-webkit-scrollbar { display: none; }
  .sched-app .sviews button { flex: none; min-height: 44px; min-width: 44px; padding: 0 8px; justify-content: center; }
  .sched-app .sviews button .sview-lbl { display: none; }
  .sched-app .sviews button.active .sview-lbl { display: inline; }
  .sched-app .sviews button i { font-size: 17px; }

  /* Tools go icon-only for the same reason — every one stays a single tap away
     (their titles/aria-labels already carry the names). */
  .sched-app .sutil .btn { min-height: 44px; min-width: 44px; justify-content: center; }
  .sched-app .sutil .sbtn-lbl { display: none; }

  /* "Send update" KEEPS its words here, unlike the tools beside it: it is the one
     control whose meaning an icon can't carry, and it is only on screen when
     there is genuinely something unsent. Same 44px tap target as the tools. */
  .sched-app .sched-sendupd .btn { min-height: 44px; }

  /* KPI chips share row 3 with the tools and scroll rather than wrap. */
  .sched-app .skpis {
    margin-top: 0; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .sched-app .skpis::-webkit-scrollbar { display: none; }
  .sched-app .skpi { flex: none; }

  /* ── Week grid gets a real horizontal scroller ─────────────────────────────
     7×1fr floors at min-content, so the grid rendered 640px wide inside a 364px
     overflow:hidden box and Thu–Sun were simply gone. Fixed columns + one
     scroller on the root keeps head, all-day and body in lockstep. */
  .sched-app .sched-tg-week { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
  .sched-app .sched-tg-week > .sched-tg-head,
  .sched-app .sched-tg-week > .sched-allday-row,
  .sched-app .sched-tg-week > .sched-tg-body {
    grid-template-columns: 48px repeat(var(--tg-cols, 7), 112px);
    min-width: max-content;           /* so x-scrolling happens on the root only */
  }

  /* Month: 6 rows crushed into ~370px left room for the day number and nothing
     else. Give the rows a floor and let the grid scroll. */
  .sched-app .sched-month { overflow-y: auto; }
  .sched-app .sched-month-grid { flex: none; grid-auto-rows: minmax(88px, auto); }

  /* Timeline: a 200px lane label ate half the screen. */
  .sched-app .sched-swim-corner,
  .sched-app .sched-swim-label { width: 124px; }

  /* Map: the route list was display:none below 900px, which left no way to read
     the stop order. Put it under the map as a scrollable strip instead. */
  .sched-app .sched-mapview .day-map-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .sched-app .sched-mapview #dayMapList {
    display: block; max-height: 34dvh;
    border-left: none; border-top: 1px solid var(--sc-line);
  }

  /* ── Touch targets. flex:none matters — these are flex items in a bar that
        runs out of room, so without it they get shrunk back under 44px. ── */
  .sched-app .scmd-icon, .sched-app .scmd-back { flex: none; width: 44px; height: 44px; }
  .sched-app .sdatenav .nav { flex: none; width: 44px; height: 40px; }
  .sched-app .sdatenav .today { flex: none; height: 40px; }
  .sched-app .sched-mc-day { min-height: 34px; }

  /* ── Safety valve ──────────────────────────────────────────────────────────
     Short screens and landscape phones can still leave the board with almost no
     height. A floor on .sboard lets #sec-scheduler (already overflow-y:auto)
     actually scroll in that case, instead of crushing the board toward zero. */
  .sched-app .sboard { min-height: 340px; padding-bottom: env(safe-area-inset-bottom); }

  /* ── Records tabs: 194–241px of chrome above the list ── */
  .sched-app .rec-toolbar { gap: 8px; padding: 10px 12px; }
  .sched-app .rec-toolbar .section-subtitle { display: none; }
  .sched-app .rec-toolbar-controls { width: 100%; flex-wrap: wrap; }
  .sched-app .rec-search { flex: 1 1 100%; }
}

/* Phones proper. The date stepper plus a labelled primary button is ~374px, so
   on a 360–390px screen it wraps to a fourth row; the label goes and Add Job
   keeps its accent + aria-label. */
@media (max-width: 520px) {
  .sched-app .sched-add-job { min-width: 44px; padding-left: 12px; padding-right: 12px; }
  .sched-app .sched-add-job [data-term] { display: none; }
}