/* ═══════════════════════════════════════════════════════════════════
   AuBurn CORE — components ("2a" direction)
   Requires tokens.css. Loads after it, before the icon fonts.

   Everything here is written against tokens only — no raw hex. If you need
   a colour that isn't a token, add a token; don't inline a hex.

   Class names are prefixed .core-* so they can live alongside the existing
   sb-admin / Bootstrap classes during migration. A screen is "migrated"
   when it uses only .core-* + layout utilities and none of the banned
   fixed-colour utilities listed in README.md.
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────
   1. APP SHELL — rail + panel + content
   Replaces #layoutSidenav / .sb-sidenav / .sb-topnav.
───────────────────────────────────────────────────────────────── */
.core-app { height: 100vh; display: flex; overflow: hidden; }

/* Icon rail: one entry per top-level section (8, down from 12 nav items) */
.core-rail {
  flex: 0 0 56px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 0;
  background: var(--core-chrome);
  border-right: 1px solid var(--core-chrome-line);
}
.core-rail__mark {
  width: 32px; height: 32px; margin-bottom: 8px;
  border-radius: var(--core-r-sm);
  background: var(--core-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font: 700 .75rem/1 var(--core-font);
}
.core-rail__mark svg { width: 24px; height: 24px; display: block; }
.core-rail__btn {
  position: relative;
  width: 38px; height: 38px;
  border: 0; border-radius: var(--core-r-sm);
  background: transparent; color: var(--core-chrome-ink-2);
  display: flex; align-items: center; justify-content: center;
  font-size: .9375rem; cursor: pointer;
  transition: background var(--core-ease), color var(--core-ease);
}
.core-rail__btn:hover        { background: rgba(255,255,255,.09); color: #fff; }
.core-rail__btn[aria-current="page"],
.core-rail__btn.active       { background: rgba(255,255,255,.11); color: #fff; }
.core-rail__dot {
  position: absolute; top: 6px; right: 6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--core-danger);
}
.core-rail__spacer { margin-top: auto; }

/* Nav panel: the links for whichever rail section is selected */
.core-panel {
  flex: 0 0 218px;
  display: flex; flex-direction: column;
  padding: 12px 10px;
  background: var(--core-chrome);
  border-right: 1px solid var(--core-chrome-line);
  overflow-y: auto;
}
.core-panel__heading {
  padding: 0 9px 8px;
  font: 600 .625rem/1.2 var(--core-font);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--core-chrome-ink-2);
}
.core-panel__link {
  display: flex; align-items: center; gap: 9px;
  min-height: 32px; padding: 6px 9px;
  border-radius: var(--core-r-sm);
  color: var(--core-chrome-ink-2);
  font-size: .8125rem; text-decoration: none;
  transition: background var(--core-ease), color var(--core-ease);
}
.core-panel__link:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.core-panel__link[aria-current="page"] { background: rgba(255,255,255,.11); color: #fff; font-weight: 600; }
.core-panel__link i { flex: 0 0 14px; text-align: center; font-size: .75rem; }
.core-panel__count { margin-left: auto; font: 600 .625rem/1 var(--core-font-mono); color: var(--core-accent-text); }
.core-panel__rule  { height: 1px; margin: 12px 4px; background: var(--core-chrome-line); }
.core-panel__foot  { margin-top: auto; padding: 10px 9px 2px; border-top: 1px solid var(--core-chrome-line); }
.core-panel__shift { font: 600 .59375rem/1.2 var(--core-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--core-chrome-ink-2); }
.core-panel__user  { margin-top: 2px; font-size: .75rem; color: var(--core-chrome-ink); }

/* Content column + sticky page header (replaces per-view <h1>/<h2> + <hr>) */
.core-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.core-topbar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  height: 56px; padding: 0 20px;
  background: var(--core-surface);
  border-bottom: 1px solid var(--core-line);
}
.core-topbar__title { margin: 0; font-size: 1.0625rem; font-weight: 650; letter-spacing: -.015em; }
.core-topbar__sub   { font-size: .78125rem; color: var(--core-ink-3); }
.core-topbar__tools { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.core-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 22px 28px; }

/* Command bar. Wire ⌘K / Ctrl-K to GlobalSearch/Suggest — the endpoint and
   the debounce/keyboard logic already exist in _Layout.cshtml; this is a
   restyle of that control, not new behaviour. */
.core-cmdk {
  display: flex; align-items: center; gap: 9px;
  min-width: 250px; height: 34px; padding: 0 12px;
  border: 1px solid var(--core-line); border-radius: var(--core-r-pill);
  background: var(--core-surface-2); color: var(--core-ink-3);
  font-size: .78125rem; cursor: text;
}
.core-cmdk kbd {
  margin-left: auto; padding: 0;
  background: none; color: inherit;
  font: 600 .625rem/1 var(--core-font-mono);
}

/* ─────────────────────────────────────────────────────────────────
   2. CARD — one header treatment for the whole app
   Replaces .card + .card-header.bg-primary/.bg-info/.bg-secondary/#1a7a7a.
   The header is a neutral surface; the ICON TILE carries the colour.
───────────────────────────────────────────────────────────────── */
.core-card {
  background: var(--core-surface);
  border: 1px solid var(--core-line);
  border-radius: var(--core-r);
  box-shadow: var(--core-shadow);
  overflow: hidden;
}
.core-card__head {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 14px 18px;
  background: var(--core-surface-2);
  border-bottom: 1px solid var(--core-line);
}
.core-card__icon {
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: var(--core-r-sm);
  background: var(--core-accent-quiet); color: var(--core-accent-text);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
}
.core-card__title { margin: 0; font-size: .90625rem; font-weight: 650; }
.core-card__body  { padding: 16px 18px 18px; }
.core-card__foot  {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  background: var(--core-surface-2);
  border-top: 1px solid var(--core-line);
}
.core-card--sm .core-card__head { padding: 12px 16px; }
.core-card--sm .core-card__icon { width: 26px; height: 26px; border-radius: var(--core-r-xs); font-size: .6875rem; }
.core-card--sm .core-card__title { font-size: .8125rem; }

/* Tone modifier — set on the card (or any ancestor) to recolour the icon
   tile, pills and bars inside it. Add tones here, never inline colours. */
[data-tone]            { --tone: var(--core-accent); --tone-quiet: var(--core-accent-quiet); }
[data-tone="ok"]       { --tone: var(--core-ok);     --tone-quiet: var(--core-ok-quiet); }
[data-tone="warn"]     { --tone: var(--core-warn);   --tone-quiet: var(--core-warn-quiet); }
[data-tone="danger"]   { --tone: var(--core-danger); --tone-quiet: var(--core-danger-quiet); }
[data-tone="info"]     { --tone: var(--core-info);   --tone-quiet: var(--core-info-quiet); }
[data-tone] .core-card__icon,
[data-tone] .core-kpi__icon { background: var(--tone-quiet); color: var(--tone); }

/* ─────────────────────────────────────────────────────────────────
   3. PILLS, CHIPS, KPI
───────────────────────────────────────────────────────────────── */
.core-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--core-r-pill);
  background: var(--core-surface-3); color: var(--core-ink-2);
  font-size: .71875rem; font-weight: 600; white-space: nowrap;
}
.core-pill--tone   { background: var(--tone-quiet); color: var(--tone); }
.core-pill--accent { background: var(--core-accent-quiet); color: var(--core-accent-text); }
.core-pill--solid  { background: var(--core-accent); color: var(--core-accent-ink); }
.core-pill__dot    { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.core-code {
  font: 600 .6875rem/1 var(--core-font-mono);
  padding: 3px 8px; border-radius: var(--core-r-xs);
  background: var(--core-accent-quiet); color: var(--core-accent-text);
}

.core-kpi {
  flex: 1 1 200px; min-width: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: var(--core-surface);
  border: 1px solid var(--core-line);
  border-radius: var(--core-r);
  box-shadow: var(--core-shadow);
}
.core-kpi__icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: .9375rem;
}
.core-kpi__label { font-size: .71875rem; color: var(--core-ink-3); white-space: nowrap; }
.core-kpi__value { font-size: 1.4375rem; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.core-kpi__delta { font-size: .71875rem; font-weight: 600; color: var(--tone); }

/* ─────────────────────────────────────────────────────────────────
   4. BUTTONS + FORM CONTROLS
   Keep Bootstrap's .btn for markup you haven't migrated; these are the
   target styles. Primary action = pill, secondary = square outline.
───────────────────────────────────────────────────────────────── */
.core-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px;
  border: 1px solid var(--core-line-strong); border-radius: var(--core-r-sm);
  background: var(--core-surface); color: var(--core-ink-2);
  font: 500 .78125rem/1 var(--core-font); cursor: pointer;
  transition: background var(--core-ease), color var(--core-ease), border-color var(--core-ease);
}
.core-btn:hover { background: var(--core-surface-3); color: var(--core-ink); }
.core-btn--primary {
  border: 0; border-radius: var(--core-r-pill);
  background: var(--core-accent); color: var(--core-accent-ink); font-weight: 650;
}
.core-btn--primary:hover { background: var(--core-ok); color: var(--core-accent-ink); }
.core-btn--danger  { color: var(--core-danger); }
.core-btn--pill    { border-radius: var(--core-r-pill); }
.core-btn--sm      { height: 30px; padding: 0 11px; font-size: .75rem; }
.core-btn--icon    { width: 28px; height: 28px; padding: 0; border-radius: var(--core-r-xs); background: transparent; color: var(--core-ink-3); }
.core-btn--icon:hover { background: var(--core-surface-3); color: var(--core-ink); }
.core-btn:disabled { opacity: .55; cursor: not-allowed; }

.core-field {
  width: 100%; height: 36px; padding: 0 11px;
  border: 1px solid var(--core-line-strong); border-radius: var(--core-r-sm);
  background: var(--core-surface); color: var(--core-ink);
  font: 400 .84375rem/1 var(--core-font);
}
.core-field:focus { outline: none; border-color: var(--core-accent); box-shadow: var(--core-focus); }
.core-field::placeholder { color: var(--core-ink-3); }
select.core-field { appearance: none; padding-right: 30px; }
textarea.core-field { height: auto; min-height: 84px; padding: 9px 11px; line-height: 1.45; }
.core-field[readonly] { background: var(--core-surface-2); color: var(--core-ink-2); }
.core-label { display: block; margin-bottom: 6px; font-size: .75rem; font-weight: 600; color: var(--core-ink-2); }
.core-hint  { margin-top: 5px; font-size: .6875rem; color: var(--core-ink-3); }

/* Destructive confirm. --core-accent-ink is "ink on a bright fill": white in
   light, near-black in dark — correct on both danger ramps. */
.core-btn--danger-solid {
  border: 0; border-radius: var(--core-r-pill);
  background: var(--core-danger); color: var(--core-accent-ink); font-weight: 650;
}
.core-btn--danger-solid:hover { background: var(--core-danger); color: var(--core-accent-ink); filter: brightness(1.08); }

/* Form pages read better in a column than stretched across a 1920 monitor */
.core-form       { max-width: 720px; }
.core-form--wide { max-width: 1040px; }

/* Invalid state for a core field, plus the message that goes under it. Added for
   the assignee picker's "pick someone first" check, but deliberately generic — any
   form in the app can reach for the same pair. */
.core-field.is-invalid { border-color: var(--core-danger); }
.core-field.is-invalid:focus {
  border-color: var(--core-danger);
  box-shadow: 0 0 0 3px var(--core-danger-quiet);
}
.core-hint--danger { color: var(--core-danger); }

/* A select still showing its placeholder is displaying a prompt, not a value, and
   should read like one. The italic lives on the select rather than the <option>
   because option styling is honoured inconsistently across browsers; a class
   toggled on the select works everywhere. */
.core-field--placeholder { font-style: italic; color: var(--core-ink-3); }

/* Remove button inside a chip — the assignee list. Inherits the pill's colour so
   it works on every tone without a rule per tone. */
.core-pill__remove {
  border: 0; background: none; padding: 0; margin-left: 2px;
  color: inherit; opacity: .6; cursor: pointer;
  line-height: 1; font-size: .625rem;
}
.core-pill__remove:hover, .core-pill__remove:focus-visible { opacity: 1; }

/* Detail / confirm pages: label column + value column */
.core-dl { display: grid; grid-template-columns: minmax(140px, 210px) 1fr; gap: 10px 18px; margin: 0; }
.core-dl dt {
  font: 600 .6875rem/1.4 var(--core-font);
  letter-spacing: .06em; text-transform: uppercase; color: var(--core-ink-3);
}
.core-dl dd { margin: 0; font-size: .84375rem; color: var(--core-ink); }
@media (max-width: 575.98px) {
  .core-dl { grid-template-columns: 1fr; gap: 3px; }
  .core-dl dd { margin-bottom: 10px; }
}

/* Quiet select — the Driver Schedule grid. Invisible until you touch it,
   so 210 dropdowns don't read as 210 boxes. */
.core-qsel {
  width: 100%; padding: 4px 6px;
  appearance: none; border: 1px solid transparent; border-radius: var(--core-r-xs);
  background: transparent; color: var(--core-ink);
  font: 500 .75rem/1.3 var(--core-font); cursor: pointer;
}
.core-qsel:hover { border-color: var(--core-line-strong); background: var(--core-surface); }
.core-qsel:focus { outline: none; border-color: var(--core-accent); box-shadow: var(--core-focus); background: var(--core-surface); }

/* ─────────────────────────────────────────────────────────────────
   5. TABLES (incl. DataTables)
   Header is not a colour bar — it's uppercase micro-label ink on surface.
   ALWAYS keep the table inside .core-tablewrap: without the scroller the
   last columns are unreachable on a 1366×768 workstation.
───────────────────────────────────────────────────────────────── */
.core-tablewrap { overflow-x: auto; }
.core-table { width: 100%; min-width: 940px; border-collapse: collapse; }
.core-table th {
  padding: 9px 14px; text-align: left; white-space: nowrap;
  background: var(--core-surface);
  border-bottom: 1px solid var(--core-line);
  font: 600 .65625rem/1.2 var(--core-font);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--core-ink-3);
}
.core-table td { padding: 11px 14px; border-bottom: 1px solid var(--core-line); }
.core-table tbody tr:nth-child(even) { background: var(--core-surface-2); }
.core-table tbody tr:hover           { background: var(--core-accent-quiet); }

/* Totals rows: a tfoot <th> is a figure, not a column label — undo the
   uppercase micro-label treatment the thead rule applies. */
.core-table tfoot th,
.core-table tfoot td {
  padding: 11px 14px;
  background: var(--core-surface-2);
  border-top: 1px solid var(--core-line-strong);
  border-bottom: 0;
  font: 650 .84375rem/1.4 var(--core-font);
  letter-spacing: 0; text-transform: none;
  color: var(--core-ink);
}
.core-table tfoot .num { font-variant-numeric: tabular-nums; }
.core-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.core-table .actions { text-align: right; }
.core-table .actions > div { display: inline-flex; gap: 4px; }

/* DataTables chrome, re-skinned. Move length/search into .core-card__head
   and .core-card__foot with dom: '<"..."lf>rt<"..."ip>' instead of letting
   DataTables inject its own rows. */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  height: 36px; padding: 0 11px;
  border: 1px solid var(--core-line-strong); border-radius: var(--core-r-sm);
  background: var(--core-surface); color: var(--core-ink);
}
.dataTables_wrapper .dataTables_info { color: var(--core-ink-3); font-size: .78125rem; }
.dataTables_wrapper .paginate_button { border-radius: var(--core-r-xs) !important; }
.dataTables_wrapper .paginate_button.current {
  background: var(--core-accent) !important; border-color: var(--core-accent) !important;
  color: var(--core-accent-ink) !important;
}
table.dataTable thead th { border-bottom: 1px solid var(--core-line); }

/* Footer bar generated by core-tables.js: length · info · pager */
.core-dt-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 18px;
  background: var(--core-surface-2);
  border-top: 1px solid var(--core-line);
}
.core-dt-foot .dataTables_length label { display: flex; align-items: center; gap: 7px; margin: 0; font-size: .78125rem; color: var(--core-ink-3); }
.core-dt-foot .dataTables_length select { height: 30px; padding: 0 26px 0 9px; }
.core-dt-foot .dataTables_paginate { margin-left: auto; }
.core-dt-foot .dataTables_paginate .pagination { margin: 0; }
/* The generated .core-tablewrap sits flush inside the card */
.core-card .core-tablewrap { border-radius: 0; }
/* Card-header toolbar field widths */
.core-card__head .core-field--search { width: 320px; max-width: 100%; }
.core-card__head select.core-field { width: auto; }

/* ─────────────────────────────────────────────────────────────────
   6. CALENDAR CELLS — Rx count + cycle badges
───────────────────────────────────────────────────────────────── */
.core-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));  /* minmax(0,…), NOT 1fr:
     1fr floors at the content's intrinsic width and the grid overflows its
     card on narrow screens. This was the bug in the first prototype pass. */
  gap: 6px;
}
.core-cal__dow { padding-bottom: 2px; text-align: center; font-size: .6875rem; font-weight: 600; color: var(--core-ink-3); }
.core-cal__cell {
  min-width: 0; min-height: 56px; padding: 7px 8px; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--core-surface);
  border: 1px solid var(--core-line);
  border-radius: var(--core-r-sm);
}
.core-cal__cell--today { background: var(--core-accent-quiet); border-color: var(--core-accent); }
.core-cal__cell--out   { background: var(--core-surface-2); color: var(--core-ink-3); }
.core-cal__day   { font-size: .65625rem; color: var(--core-ink-3); }
.core-cal__count { font-size: .8125rem; font-weight: 650; font-variant-numeric: tabular-nums; }

/* One rule per department × type, driven by data-cycle instead of six
   .rx-badge-* classes. Values match Views + CycleOccurrence.BadgeCssClass. */
.core-cycle {
  display: block; padding: 2px 5px; border-radius: var(--core-r-pill);
  font-size: .59375rem; font-weight: 600; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: color-mix(in oklab, var(--cyc) 14%, transparent);
  color: var(--cyc);
}
.core-cycle[data-cycle="facility-start"]    { --cyc: var(--core-cyc-facility-start); }
.core-cycle[data-cycle="facility-delivery"] { --cyc: var(--core-cyc-facility-delivery); }
.core-cycle[data-cycle="control-start"]     { --cyc: var(--core-cyc-control-start); }
.core-cycle[data-cycle="control-delivery"]  { --cyc: var(--core-cyc-control-delivery); }
.core-cycle[data-cycle="strip-start"]       { --cyc: var(--core-cyc-strip-start); }
.core-cycle[data-cycle="strip-delivery"]    { --cyc: var(--core-cyc-strip-delivery); }

/* ─────────────────────────────────────────────────────────────────
   7. WORKFLOW STEPS
   auto-fill + minmax so ten chips wrap instead of clipping at any card
   width — same reasoning as the existing .workflow-step-grid.
───────────────────────────────────────────────────────────────── */
.core-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 9px; }
.core-step {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 11px;
  border: 1px solid var(--core-line-strong); border-radius: var(--core-r-sm);
  background: transparent; color: var(--core-ink-2);
  font-size: .75rem; font-weight: 600;
}
.core-step--done {
  background: var(--core-accent); border-color: var(--core-accent);
  color: var(--core-accent-ink);
}
.core-step__at { margin-left: auto; font: 400 .59375rem/1 var(--core-font-mono); opacity: .7; }
.core-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--core-r-sm);
  background: var(--core-accent-quiet); color: var(--core-accent-text);
  font-size: .8125rem; font-weight: 600;
}
.core-progress { height: 8px; border-radius: var(--core-r-pill); background: var(--core-surface-3); overflow: hidden; }
.core-progress > div { height: 100%; border-radius: var(--core-r-pill); background: var(--core-accent); transition: width .35s ease; }

/* ─────────────────────────────────────────────────────────────────
   8. KANBAN — colour as status, not decoration
   Column colour comes from TicketBoardColumn.ColorHex, so it stays an
   inline style; bind it to --col and let these rules place it.
───────────────────────────────────────────────────────────────── */
.core-board { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }
.core-col {
  flex: 0 0 316px; max-width: 316px;
  background: var(--core-surface);
  border: 1px solid var(--core-line); border-radius: var(--core-r);
  box-shadow: var(--core-shadow); overflow: hidden;
}
.core-col__head {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px;
  background: var(--core-surface-2);
  border-bottom: 1px solid var(--core-line);
  font-size: .8125rem; font-weight: 650;
}
.core-col__swatch { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--col, var(--core-accent)); }
.core-col__count  { padding: 2px 8px; border-radius: var(--core-r-pill); background: var(--core-surface-3); color: var(--core-ink-2); font: 600 .6875rem/1.5 var(--core-font-mono); }
.core-col__cards  { padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 120px; background: var(--core-surface-2); }
.core-col__cards.dragover { outline: 2px dashed var(--core-accent); outline-offset: -4px; background: var(--core-accent-quiet); }

.core-ticket {
  padding: 11px 12px;
  background: var(--core-surface);
  border: 1px solid var(--core-line);
  border-top: 3px solid var(--col, var(--core-accent));
  border-radius: var(--core-r-sm);
  box-shadow: var(--core-shadow-sm);
  cursor: grab;
  transition: box-shadow var(--core-ease), transform var(--core-ease);
}
.core-ticket:hover    { box-shadow: var(--core-shadow); transform: translateY(-1px); }
.core-ticket.dragging { opacity: .45; transform: rotate(1.5deg); }
.core-ticket--emergency { border-top-color: var(--core-danger); }
.core-ticket__no    { font: 600 .6875rem/1 var(--core-font-mono); color: var(--core-ink-2); }
.core-ticket__title { font-size: .8125rem; font-weight: 600; line-height: 1.35; }
.core-ticket__foot  { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--core-line); }
.core-avatar {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--core-accent-quiet); color: var(--core-accent-text);
  display: flex; align-items: center; justify-content: center;
  font: 600 .59375rem/1 var(--core-font);
}

/* ─────────────────────────────────────────────────────────────────
   9. DRIVER SCHEDULE GRID
───────────────────────────────────────────────────────────────── */
.core-sched { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1000px; }
.core-sched__day {
  padding: 8px 6px 7px; text-align: center;
  background: var(--core-surface); border: 1px solid var(--core-line); border-bottom: 0;
  border-radius: var(--core-r-sm) var(--core-r-sm) 0 0;
}
.core-sched__day--today { background: var(--core-accent-quiet); border-color: var(--core-accent); }
.core-sched__name { font-size: .78125rem; font-weight: 650; }
.core-sched__date { margin-top: 1px; font: 400 .65625rem/1 var(--core-font-mono); color: var(--core-ink-3); }
.core-sched__slot {
  padding: 5px 4px; text-align: center;
  background: var(--tone-quiet); color: var(--tone);
  border: 1px solid var(--core-line); border-top: 0;
  font: 600 .59375rem/1.2 var(--core-font);
  letter-spacing: .08em; text-transform: uppercase;
}
.core-sched td { padding: 1px 2px; border: 1px solid var(--core-line); border-top: 0; }
.core-sched tbody tr:nth-child(even) td { background: var(--core-surface-2); }

/* ─────────────────────────────────────────────────────────────────
   10. LOGIN — split layout, no animated gradient
───────────────────────────────────────────────────────────────── */
.core-login { min-height: 100vh; display: flex; background: var(--core-canvas); }
.core-login__form  { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 40px; }
.core-login__inner { width: 100%; max-width: 400px; }
.core-login__brand { flex: 0 0 46%; display: flex; flex-direction: column; justify-content: center; padding: 56px; background: var(--core-chrome); color: var(--core-chrome-ink); }
.core-login__plate { align-self: flex-start; margin-bottom: 34px; padding: 18px 22px; border-radius: 14px; background: #fff; }
.core-login__plate img { display: block; width: 230px; height: auto; }
.core-login__wordmark {
  margin-bottom: 20px;
  font-size: 2.75rem; font-weight: 650; line-height: 1.1; letter-spacing: -.025em;
  color: #fff;
}
.core-login__line  { max-width: 420px; font-size: 1.375rem; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
@media (max-width: 900px) {
  .core-login__brand { display: none; }
}
@media (max-width: 1200px) {
  .core-login__wordmark { font-size: 2.25rem; }
}

/* ─────────────────────────────────────────────────────────────────
   11. RESPONSIVE — 1366×768 workstations are the floor
───────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .core-panel { flex-basis: 190px; }
  .core-scroll { padding: 16px 16px 24px; }
}
@media (max-width: 991.98px) {
  /* Panel collapses to an overlay; the rail stays. A scrim behind the open
     panel dims the page and gives the outside-click handler a target. */
  .core-panel { position: fixed; inset: 0 auto 0 56px; z-index: 1040; transform: translateX(-100%); }
  .core-app.panel-open .core-panel { transform: translateX(0); }
  .core-app::before {
    content: ""; position: fixed; inset: 0; z-index: 1039;
    background: var(--core-scrim);
    opacity: 0; pointer-events: none;
    transition: opacity var(--core-ease);
  }
  .core-app.panel-open::before { opacity: 1; pointer-events: auto; }
  .core-topbar__sub { display: none; }
  .core-cmdk { min-width: 0; }
}
@media (max-width: 767.98px) {
  /* Phones: the rail hides too, so the nav takes no width at all until the
     topbar toggle opens rail + panel together as one overlay. */
  .core-rail { position: fixed; inset: 0 auto 0 0; width: 56px; z-index: 1041; transform: translateX(-100%); transition: transform var(--core-ease); }
  .core-app.panel-open .core-rail { transform: translateX(0); }
  /* Anchor the panel at 0 while closed - anchored at 56px (the rail's slot)
     a -100% slide still leaves a 56px sliver on screen. Opening moves it to
     sit beside the rail. */
  .core-panel { inset: 0 auto 0 0; }
  .core-app.panel-open .core-panel { transform: translateX(56px); }
  .core-topbar { padding: 0 12px; }
  .core-scroll { padding: 12px 12px 20px; }
}

/* ─────────────────────────────────────────────────────────────────
   11b. SHELL EXTRAS — production wiring around the section-1 shell
   (panel rows with pin buttons, command-bar input, topbar controls)
───────────────────────────────────────────────────────────────── */
/* Collapsing the nav panel down to just the rail.
   The class sits on <html>, not .core-app, so the inline script in _Layout's <head> can
   restore it before first paint — on .core-app it would flash open on every page load.
   Below 992px the panel is already an overlay, so collapse applies at desktop widths only. */
.core-panel { transition: flex-basis var(--core-ease), padding var(--core-ease), transform var(--core-ease); }

@media (min-width: 992px) {
  html.panel-collapsed .core-panel {
    flex-basis: 0;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
    border-right-width: 0;
  }
}

.core-topbar__toggle {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-right: 2px;
  border: 0; border-radius: var(--core-r-sm);
  background: transparent; color: var(--core-ink-2);
  cursor: pointer;
  transition: background var(--core-ease), color var(--core-ease);
}
.core-topbar__toggle:hover { background: var(--core-surface-3); color: var(--core-ink); }

/* A panel row = link + pin button side by side (a <button> may not nest in <a>) */
.core-panel__row { display: flex; align-items: center; }
.core-panel__row .core-panel__link { flex: 1 1 auto; min-width: 0; }
.core-panel__row .core-panel__link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.core-pin {
  flex: 0 0 auto;
  width: 24px; height: 24px; margin-left: 2px;
  border: 0; border-radius: var(--core-r-xs);
  background: transparent; color: var(--core-chrome-ink-2);
  font-size: .6875rem; cursor: pointer;
  opacity: 0; transition: opacity var(--core-ease), color var(--core-ease);
}
.core-panel__row:hover .core-pin, .core-pin:focus-visible { opacity: 1; }
.core-pin:hover { color: #fff; }
.core-pin.pinned { opacity: 1; color: var(--core-accent-text); }

/* Command bar as a working form control */
.core-cmdk-form { position: relative; }
.core-cmdk__input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent; outline: none;
  color: var(--core-ink); font-size: .8125rem;
}
.core-cmdk__input::placeholder { color: var(--core-ink-3); }
.core-cmdk:focus-within { border-color: var(--core-accent); box-shadow: var(--core-focus); }

/* Topbar controls (bell, theme, user) — previously styled under .sb-topnav */
.core-topbar .navbar-nav { flex-direction: row; align-items: center; gap: 2px; margin: 0; }
.core-topbar .topnav-control {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border-radius: var(--core-r-sm);
  color: var(--core-ink-2);
}
.core-topbar .topnav-control:hover { background: var(--core-surface-3); color: var(--core-ink); }
.core-topbar .topnav-control > i { font-size: 1.05rem; line-height: 1; }
.core-topbar .topnav-control.dropdown-toggle::after { margin-left: .3rem; }

/* Slim footer at the end of the scroll area */
.core-footer {
  margin-top: 28px; padding-top: 12px;
  border-top: 1px solid var(--core-line);
  display: flex; justify-content: space-between;
  font-size: .75rem; color: var(--core-ink-3);
}

/* ─────────────────────────────────────────────────────────────────
   12. PRINT — Driver Schedule and the pay sheets
   Keep the existing @media print rules for #printArea; add these so the
   new chrome and card shells drop out.
───────────────────────────────────────────────────────────────── */
@media print {
  .core-rail, .core-panel, .core-topbar, .core-btn, .core-cmdk { display: none !important; }
  .core-app, .core-main, .core-scroll { display: block; height: auto; overflow: visible; padding: 0; }
  .core-card { box-shadow: none; border: 0; }
  .core-card__head { background: transparent; }
  .core-sched__day, .core-sched__slot, .core-cal__cell--today { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ─────────────────────────────────────────────────────────────────
   Rich text editor (Quill)

   Quill's snow theme ships hardcoded light colours — #ccc borders, black
   text, a white toolbar. Dropped into this app unchanged it is unreadable
   in dark mode, so every colour it paints is re-pointed at a --core-* token
   here. This is the only place Quill's class names appear in our CSS; the
   editor's own stylesheet is loaded unmodified.
   ───────────────────────────────────────────────────────────────── */
.core-editor .ql-toolbar.ql-snow,
.core-editor .ql-container.ql-snow {
  border-color: var(--core-line);
}

.core-editor .ql-toolbar.ql-snow {
  background: var(--core-surface-2);
  border-radius: var(--core-r-sm) var(--core-r-sm) 0 0;
}

.core-editor .ql-container.ql-snow {
  background: var(--core-surface);
  color: var(--core-ink);
  border-radius: 0 0 var(--core-r-sm) var(--core-r-sm);
  font-family: inherit;
  font-size: 1rem;
}

/* The editor is given a height and scrolls its own content, rather than growing
   with it. That is what lets the page fit a laptop screen: a note can be any
   length, so an editor that grows can never guarantee a page that does not
   scroll. Quill's core CSS already sets overflow-y:auto on .ql-editor, so
   sizing the container is all that is needed.

   clamp() rather than a fixed height: 42vh gives a tall monitor a generous
   surface and a 768px laptop a short one, with a floor that stays usable and a
   ceiling that stops the toolbar drifting away from the text on a large
   display. */
.core-editor .ql-container.ql-snow {
  height: clamp(11rem, 42vh, 30rem);
}

.core-editor .ql-editor.ql-blank::before {
  color: var(--core-ink-3);
  font-style: normal;
}

/* Toolbar glyphs are SVG strokes and fills, not text, so they need colouring
   directly — inheriting currentColor is not enough. */
.core-editor .ql-snow .ql-stroke { stroke: var(--core-ink-2); }
.core-editor .ql-snow .ql-fill   { fill: var(--core-ink-2); }
.core-editor .ql-snow .ql-picker { color: var(--core-ink-2); }

.core-editor .ql-snow .ql-active .ql-stroke,
.core-editor .ql-snow button:hover .ql-stroke { stroke: var(--core-accent); }
.core-editor .ql-snow .ql-active .ql-fill,
.core-editor .ql-snow button:hover .ql-fill   { fill: var(--core-accent); }
.core-editor .ql-snow .ql-picker-item:hover,
.core-editor .ql-snow .ql-picker-label:hover  { color: var(--core-accent); }

/* The heading dropdown renders as an absolutely positioned panel, which would
   otherwise inherit the page ground and read as transparent over the text. */
.core-editor .ql-snow .ql-picker-options {
  background: var(--core-surface);
  border-color: var(--core-line);
}

.core-editor .ql-snow a { color: var(--core-accent); }

.core-editor .ql-editor blockquote {
  border-left: 3px solid var(--core-line);
  color: var(--core-ink-2);
}

.core-editor .ql-editor pre.ql-syntax {
  background: var(--core-surface-3);
  color: var(--core-ink);
  border-radius: var(--core-r-sm);
}

/* Compact screenshot tile used in the note editor's sidebar, and by the script
   that previews files before they are uploaded, so the sidebar does not change
   shape between "about to upload" and "uploaded". */
.core-note-thumb {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 64px;
  border: 1px solid var(--core-line);
  border-radius: var(--core-r-sm);
  overflow: hidden;
  background: var(--core-surface-2);
}

.core-note-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The remove button sits on the tile. It is a real submit button targeting a
   form elsewhere on the page, not a link, so removal survives with JS off. */
.core-note-thumb__x {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  line-height: 1;
  font-size: .75rem;
  cursor: pointer;
  color: var(--core-danger);
  background: var(--core-surface);
  box-shadow: 0 0 0 1px var(--core-line);
}

.core-note-thumb__x:hover {
  color: var(--core-surface);
  background: var(--core-danger);
}

/* ─────────────────────────────────────────────────────────────────
   Notes, read in full (list page)

   .core-note-body renders the sanitized Quill HTML outside the editor. Quill's
   own stylesheet only styles these classes under .ql-editor, so the indent,
   alignment and code-block classes the sanitizer lets through are re-declared
   here — that stylesheet is not loaded on the list page and should not be.
   ───────────────────────────────────────────────────────────────── */
.core-note-body { font-size: .9375rem; line-height: 1.55; color: var(--core-ink); overflow-wrap: anywhere; }
.core-note-body > :last-child { margin-bottom: 0; }
.core-note-body p, .core-note-body ul, .core-note-body ol,
.core-note-body blockquote, .core-note-body pre { margin: 0 0 .5em; }
.core-note-body h1, .core-note-body h2, .core-note-body h3,
.core-note-body h4, .core-note-body h5, .core-note-body h6 { margin: .6em 0 .3em; font-weight: 650; line-height: 1.25; }
.core-note-body h1 { font-size: 1.375rem; }
.core-note-body h2 { font-size: 1.1875rem; }
.core-note-body h3 { font-size: 1.0625rem; }
.core-note-body h4, .core-note-body h5, .core-note-body h6 { font-size: .9375rem; }
.core-note-body ul, .core-note-body ol { padding-left: 1.5em; }
.core-note-body a { color: var(--core-accent-text); }
.core-note-body blockquote { border-left: 3px solid var(--core-line-strong); padding-left: .9em; color: var(--core-ink-2); }
.core-note-body pre.ql-syntax, .core-note-body .ql-code-block-container {
  background: var(--core-surface-3); color: var(--core-ink);
  border-radius: var(--core-r-sm); padding: .6em .8em;
  font: .8125rem/1.5 var(--core-font-mono); white-space: pre-wrap;
}
.core-note-body code { font-family: var(--core-font-mono); font-size: .875em; background: var(--core-surface-3); padding: .05em .3em; border-radius: var(--core-r-xs); }
.core-note-body hr { border: 0; border-top: 1px solid var(--core-line); margin: .75em 0; }
.core-note-body .ql-align-center  { text-align: center; }
.core-note-body .ql-align-right   { text-align: right; }
.core-note-body .ql-align-justify { text-align: justify; }
.core-note-body .ql-indent-1 { padding-left: 3em; }
.core-note-body .ql-indent-2 { padding-left: 6em; }
.core-note-body .ql-indent-3 { padding-left: 9em; }
.core-note-body .ql-indent-4 { padding-left: 12em; }
.core-note-body .ql-indent-5 { padding-left: 15em; }
.core-note-body .ql-indent-6 { padding-left: 18em; }
.core-note-body .ql-indent-7 { padding-left: 21em; }
.core-note-body .ql-indent-8 { padding-left: 24em; }
.core-note-body li.ql-indent-1 { padding-left: 1.5em; margin-left: 1.5em; }
.core-note-body li.ql-indent-2 { padding-left: 1.5em; margin-left: 4.5em; }
.core-note-body li.ql-indent-3 { padding-left: 1.5em; margin-left: 7.5em; }

/* Screenshots after the body, reusing the editor's 64px tile. */
.core-note-images { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.core-note-images .core-note-thumb { cursor: zoom-in; }

/* Pinned cards above the notes table: a 12-column grid the user arranges.
   Each card carries its span as an inline --span (4 = a third, 6 = half,
   12 = full), and everything goes full width under 992px, where a third of
   the screen cannot show prose. */
.core-pinned {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
/* Masonry packing: once the script has measured the cards it switches the grid
   to 8px rows and gives every card a row span matching its height, so a short
   card leaves room and the next card that fits slides up underneath it rather
   than starting a new row. Cards keep their left-to-right order; the auto-
   placement cursor simply fills the first gap at or after the previous card.
   The class is added by the script so that, before it runs, cards sit in
   ordinary rows instead of overlapping in 8px ones. The row and gap sizes are
   mirrored in the script — change both together. */
.core-pinned--masonry { grid-auto-rows: 8px; grid-auto-flow: row; }
.core-pinned__card { display: flex; flex-direction: column; grid-column: span var(--span, 6); min-width: 0; }
.core-pinned__card--dragging { opacity: .45; }
.core-pinned__card .core-card__head { flex-wrap: nowrap; gap: 6px; padding-left: 10px; }
.core-pinned__card .core-card__head .core-card__icon { margin-right: 4px; }
.core-pinned__grip { color: var(--core-ink-3); cursor: grab; padding: 4px 2px; touch-action: none; }
.core-pinned__grip:active { cursor: grabbing; }
.core-card__head select.core-pinned__size { height: 28px; padding: 0 26px 0 8px; font-size: .75rem; }
@media (max-width: 991.98px) {
  .core-pinned__card { grid-column: span 12; }
  .core-pinned__grip, .core-pinned__card [data-pinned-move] { display: none; }
}

/* The card body is as tall as its note up to a cap, so short notes make short
   cards and the masonry has gaps to fill; past the cap it scrolls, like the
   editor. The height is the user's to drag — resize:vertical gives a native
   handle in the corner — and once dragged (or loaded with a saved --h) the
   --sized modifier swaps the cap for that explicit height, which is what lets
   a drag go beyond the cap. The --fit modifier lets the card grow to the note. */
.core-note-clamp {
  max-height: 15rem;
  min-height: 3rem;
  overflow: auto;
  resize: vertical;
}
.core-note-clamp--sized { height: var(--h); max-height: none; }
.core-note-clamp--fit { height: auto; max-height: none; resize: none; overflow: visible; }

/* A row expanded in place: the fragment sits in a DataTables child row. */
.core-table tr.core-table__row--open > td { border-bottom-color: transparent; }
.core-table td.core-note-expand__cell { padding: 0 !important; background: var(--core-surface-2); }
.core-note-expand { padding: 14px 18px 16px 48px; border-bottom: 1px solid var(--core-line); }