/* =============================================================================
   Night mode: html[data-theme="dark"], chosen per browser in the menu under the name
   (js/motion.js). For a screen on the floor through a night shift, or a dim office.

   Off unless chosen: the day colours are the plant's, and nothing here changes them. The
   product colours of the Gantt bars are kept as they are -- they are how a job is told apart
   at a glance; a bar white text does not read on takes dark text, or is drawn a shade deeper,
   by day and by night (barColours() in js/gantt.js). Everything else is
   restated on a navy scale, checked for WCAG AA contrast: body text #e3ecf7 on the panel
   #12213a is about 13:1, muted text #9fb2c8 on it about 7:1.
   ============================================================================= */

html[data-theme="dark"] {
  --navy: #071f3e; --blue: #4aa3ff; --blue-dark: #2f8fe8; --blue-light: #16304f;
  --ink: #e3ecf7; --muted: #9fb2c8; --line: #263a55; --bg: #0a1424; --surface: #12213a;
  --shadow: 0 12px 32px rgba(0, 0, 0, .35);
  --n-surface-2: #172a45; --n-surface-3: #1d3352; --n-input: #0f1d33; --n-head: #15263f; --n-ink-strong: #f2f7fd;
  --st-running: #5fd99a; --st-running-bg: rgba(46, 180, 110, .18);
  --st-idle: #a9b9cc; --st-idle-bg: rgba(160, 180, 205, .14);
  --st-blocked: #ff8a93; --st-blocked-bg: rgba(230, 70, 85, .2);
  --st-offline: #8e9db0; --st-offline-bg: rgba(140, 155, 175, .14);
  --ring-track: #24395a;
  color-scheme: dark;
  background: var(--bg);
  color: var(--ink);
}
html[data-theme="dark"] body { background: radial-gradient(circle at 78% 0, #10284a 0, transparent 30%), var(--bg); color: var(--ink); }

/* --- surfaces ------------------------------------------------------------------- */
html[data-theme="dark"] .panel,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .ps-tile { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
html[data-theme="dark"] .topbar { background: rgba(10, 20, 36, .82); border-bottom-color: var(--line); }
html[data-theme="dark"] .topbar-brand span,
html[data-theme="dark"] .wb-step-head h2,
html[data-theme="dark"] .panel h3,
html[data-theme="dark"] .panel-title h3,
html[data-theme="dark"] h2, html[data-theme="dark"] h3 { color: var(--n-ink-strong); }
html[data-theme="dark"] .muted,
html[data-theme="dark"] .subtle,
html[data-theme="dark"] .panel-title p { color: var(--muted); }
html[data-theme="dark"] .panel-icon { background: #18365c; color: #8cc4ff; }
html[data-theme="dark"] .wb-step-empty { background: var(--n-surface-2); border-color: var(--line); color: var(--muted); }
html[data-theme="dark"] .order-entry-form input[readonly] { background: var(--n-surface-2); color: var(--muted); }
html[data-theme="dark"] .wb-stepper.is-stuck { background: rgba(10, 20, 36, .9); }
html[data-theme="dark"] .wb-stepper-step:hover { border-color: #47658a; }
html[data-theme="dark"] .wb-stepper-num { background: #2f8fe8; color: #fff; }
html[data-theme="dark"] .wb-stepper-name { color: var(--n-ink-strong); }
html[data-theme="dark"] .wb-stepper-step.is-attention { border-color: rgba(240, 190, 100, .55); }
html[data-theme="dark"] .wb-stepper-step[aria-current="step"].is-attention { border-color: var(--blue); }
html[data-theme="dark"] .wb-stepper-step.is-attention .wb-stepper-num { background: #da8c06; color: #10192a; }
html[data-theme="dark"] .wb-stepper-step.is-attention .wb-stepper-status { color: #f0be64; }
html[data-theme="dark"] .wb-stepper-link { background: #3a5272; }
html[data-theme="dark"] .wb-stepper-link::after { border-left-color: #3a5272; }

/* --- controls ------------------------------------------------------------------- */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { background: var(--n-input); border-color: #2c4362; color: var(--ink); }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #7187a1; }
html[data-theme="dark"] .secondary,
html[data-theme="dark"] .mini-button.secondary { background: var(--n-surface-2); border-color: #2f5684; color: #9fd0ff; }
html[data-theme="dark"] .secondary:hover,
html[data-theme="dark"] .mini-button.secondary:hover { background: var(--n-surface-3); }
html[data-theme="dark"] .mini-button.ghost { background: var(--n-surface-2); border-color: #2c4362; color: #c3d2e3; }
html[data-theme="dark"] .mini-button.danger { background: rgba(230, 70, 85, .14); border-color: rgba(255, 138, 147, .35); color: #ff9aa2; }
html[data-theme="dark"] .text-button { color: #8cc4ff; }
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .sections-trigger,
html[data-theme="dark"] .topbar .user-control-trigger { background: var(--n-surface-2); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .user-control #userName,
html[data-theme="dark"] .sections-trigger { color: var(--n-ink-strong); }
html[data-theme="dark"] .avatar,
html[data-theme="dark"] .user-control #userInitial { background: #18365c; border-color: #2f5684; color: #a9d4ff; }
html[data-theme="dark"] .segmented { background: #0f1d33; }
html[data-theme="dark"] .segmented button { color: #a9bcd2; }
html[data-theme="dark"] .segmented > button:not(.active):hover { color: #d5e5f6; }
html[data-theme="dark"] .segmented button.active { color: #fff; }
html[data-theme="dark"] .segmented > .seg-ind { background: #2b77c8; }
html[data-theme="dark"] .scheduler-toolbar { background: var(--n-head); border-color: var(--line); }
html[data-theme="dark"] .dashboard-toolbar select,
html[data-theme="dark"] .scheduler-toolbar select { background: var(--n-input); border-color: #2c4362; color: var(--ink); }
html[data-theme="dark"] .date-controls b,
html[data-theme="dark"] .zoom-controls > span { color: var(--ink); }

/* --- menus, the bell, tooltips ---------------------------------------------------- */
html[data-theme="dark"] .sections-menu,
html[data-theme="dark"] .user-menu,
html[data-theme="dark"] .notifications-panel,
html[data-theme="dark"] .gantt-tooltip { background: var(--surface); border-color: var(--line); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); color: var(--ink); }
html[data-theme="dark"] .nav-item { color: var(--ink); }
html[data-theme="dark"] .nav-item:hover { background: var(--n-surface-3); }
html[data-theme="dark"] .plant-chip { background: var(--n-surface-2); border-color: var(--line); color: var(--muted); }
html[data-theme="dark"] .user-menu #topbarChangePassword { color: var(--ink); }
html[data-theme="dark"] .user-menu #topbarChangePassword:hover,
html[data-theme="dark"] .menu-toggle:hover { background: var(--n-surface-3); }
html[data-theme="dark"] .user-menu button { color: #ff9aa2; }
html[data-theme="dark"] .user-menu button:hover { background: rgba(230, 70, 85, .14); }
html[data-theme="dark"] .menu-toggle { color: var(--ink); }
html[data-theme="dark"] .menu-toggle input { background: #2c4362; }
html[data-theme="dark"] .menu-toggle input:checked { background: #2f8fe8; }
html[data-theme="dark"] .notification { border-bottom-color: var(--line); }
html[data-theme="dark"] .notification b { color: var(--n-ink-strong); }
html[data-theme="dark"] .notification p,
html[data-theme="dark"] .notification time { color: var(--muted); }

/* --- tables and lists -------------------------------------------------------------- */
html[data-theme="dark"] th { color: #a9bcd2; }
html[data-theme="dark"] td, html[data-theme="dark"] th { border-bottom-color: var(--line); }
html[data-theme="dark"] .table-wrap { border-color: var(--line); }
html[data-theme="dark"] .table-wrap thead th { background: var(--n-head); }
html[data-theme="dark"] .table-wrap tbody tr:nth-child(even) { background: rgba(255, 255, 255, .025); }
html[data-theme="dark"] .table-wrap tbody tr:hover { background: var(--n-surface-3); }
html[data-theme="dark"] .empty,
html[data-theme="dark"] .status-clear,
html[data-theme="dark"] .queue-empty { background: var(--n-surface-2); color: var(--muted); }
html[data-theme="dark"] .pill,
html[data-theme="dark"] .priority { background: #16304f; color: #8cc4ff; }
html[data-theme="dark"] .pill.running,
html[data-theme="dark"] .pill.scheduled,
html[data-theme="dark"] .pill.completed,
html[data-theme="dark"] .pill.resolved,
html[data-theme="dark"] .pill.pass { background: var(--st-running-bg); color: var(--st-running); }
html[data-theme="dark"] .pill.fail { background: var(--st-blocked-bg); color: var(--st-blocked); }

/* --- the order book ----------------------------------------------------------------- */
html[data-theme="dark"] .order-ref { background: var(--n-surface-2); border-color: var(--line); color: #c3d2e3; }
html[data-theme="dark"] .order-bulk-bar { background: var(--n-head); border-color: var(--line); }
html[data-theme="dark"] .order-bulk-bar > span,
html[data-theme="dark"] .order-bulk-bar > label { color: var(--muted); }
html[data-theme="dark"] .layout-btn { background: var(--n-surface-2); border-color: var(--line); color: #a9bcd2; }
html[data-theme="dark"] .ord-row-head { background: var(--surface); }
html[data-theme="dark"] .ord-row-head .ord-row-in { color: #8fa4bd; }
html[data-theme="dark"] .ord-card,
html[data-theme="dark"] .ord-card.ord-row { background: var(--n-surface-2); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .ord-card.ord-row:hover { background: var(--n-surface-3); border-color: #335a88; }
html[data-theme="dark"] .ord-row-ref b,
html[data-theme="dark"] .ord-row-in .ord-row-product { color: var(--n-ink-strong); }
html[data-theme="dark"] .ord-row-product,
html[data-theme="dark"] .ord-row-in .ord-row-customer { color: #c3d2e3; }
html[data-theme="dark"] .ord-batch-head b { color: #8cc4ff; }
html[data-theme="dark"] .ord-batch-head span,
html[data-theme="dark"] .ord-batch-head small { color: var(--muted); }
html[data-theme="dark"] .batch-row { background: var(--n-surface-2); border-color: var(--line); }
html[data-theme="dark"] .batch-row.is-reviewing { background: #16304f; border-color: #2f5684; }
html[data-theme="dark"] .batch-row-name b { color: var(--n-ink-strong); }
html[data-theme="dark"] .batch-row-facts { color: #c3d2e3; }
html[data-theme="dark"] .batch-panel.is-empty .batch-count { background: var(--n-surface-2); color: #7187a1; }

/* --- the timeline ---------------------------------------------------------------------- */
html[data-theme="dark"] .live-gantt-head { border-bottom-color: var(--line); }
html[data-theme="dark"] .live-gantt-corner { background: var(--n-head); border-right-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .live-gantt-corner span { color: var(--muted); }
html[data-theme="dark"] .live-gantt-axis { background: #0f1d33; }
html[data-theme="dark"] .live-gantt-axis i { border-left-color: #22364f; color: #9fb2c8; }
html[data-theme="dark"] .live-gantt-axis i.day-start { border-left-color: #3a5577; color: #d5e5f6; }
html[data-theme="dark"] .live-line-label { background: var(--surface); border-bottom-color: var(--line); border-right-color: var(--line); }
html[data-theme="dark"] .line-name,
html[data-theme="dark"] .live-line-identity b { color: var(--n-ink-strong); }
html[data-theme="dark"] .line-use span,
html[data-theme="dark"] .line-crew { color: #b7c7d9; }
html[data-theme="dark"] .line-use b { color: var(--n-ink-strong); }
html[data-theme="dark"] .line-use i { background: #24395a; }
html[data-theme="dark"] .line-state.running { background: var(--st-running-bg); color: var(--st-running); }
html[data-theme="dark"] .line-state.idle { background: var(--st-idle-bg); color: var(--st-idle); }
html[data-theme="dark"] .line-state.blocked { background: var(--st-blocked-bg); color: var(--st-blocked); }
html[data-theme="dark"] .line-state.offline { background: var(--st-offline-bg); color: var(--st-offline); }
html[data-theme="dark"] .live-track {
  background: repeating-linear-gradient(to right, #0f1d33 0, #0f1d33 calc(var(--grid-step) - 1px), #1b2d47 calc(var(--grid-step) - 1px), #1b2d47 var(--grid-step));
  border-bottom-color: var(--line);
}
html[data-theme="dark"] .idle-track { color: #7187a1; }
html[data-theme="dark"] .live-elapsed-region { background: rgba(74, 163, 255, .1); border-right-color: rgba(74, 163, 255, .3); }
html[data-theme="dark"] .block-flag { background: var(--n-surface-2); color: var(--ink); }
html[data-theme="dark"] .block-flag small { color: var(--muted); }
html[data-theme="dark"] .dashboard-legend,
html[data-theme="dark"] .gantt-legend { color: var(--muted); }
html[data-theme="dark"] .legend.idle { background: #2c4362; }
html[data-theme="dark"] .gantt-plan-banner,
html[data-theme="dark"] .gantt-planned-note { background: #16304f; border-color: #2f5684; color: #cfe3f8; }
html[data-theme="dark"] .live-track.drop-target { background-color: #16304f; }
html[data-theme="dark"] .ps-ring { background: radial-gradient(closest-side, var(--surface) 76%, transparent 78% 100%), conic-gradient(var(--ps-ring, #4aa3ff) calc(var(--p) * 1%), var(--ring-track) 0); }
html[data-theme="dark"] .ps-ring span { color: var(--n-ink-strong); }
html[data-theme="dark"] .ps-head b { color: var(--n-ink-strong); }
html[data-theme="dark"] .ps-now { color: #d5e5f6; }
html[data-theme="dark"] .ps-text small { color: var(--muted); }
html[data-theme="dark"] .wb-timeline.is-maximized { background: var(--bg); }

/* --- dialogs ------------------------------------------------------------------------------ */
html[data-theme="dark"] .dialog,
html[data-theme="dark"] .palette-dialog { background: var(--surface); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .dialog::backdrop { background: rgba(2, 8, 18, .66); }
html[data-theme="dark"] .dialog label { color: #b7c7d9; }
html[data-theme="dark"] .dialog-title h2 { color: var(--n-ink-strong); }
html[data-theme="dark"] .dialog-note { background: var(--n-surface-2); border-left-color: #2f5684; color: #b7c7d9; }
html[data-theme="dark"] .dialog-actions { background: var(--surface); }
html[data-theme="dark"] .reschedule-compare { background: var(--n-surface-2); border-color: var(--line); }

/* --- the command palette -------------------------------------------------------------------- */
html[data-theme="dark"] .palette-input-wrap,
html[data-theme="dark"] .palette-foot { border-color: var(--line); }
html[data-theme="dark"] .palette-item b { color: var(--n-ink-strong); }
html[data-theme="dark"] .palette-item.active { background: #16304f; box-shadow: inset 3px 0 0 #4aa3ff; }
html[data-theme="dark"] .palette-foot kbd { background: var(--n-surface-2); border-color: #2c4362; color: var(--ink); }

/* --- loading ------------------------------------------------------------------------------ */
html[data-theme="dark"] #dashboardGantt:empty,
html[data-theme="dark"] #ordersBoard:empty,
html[data-theme="dark"] #batchFigures:empty,
html[data-theme="dark"] #maintenanceLines:empty,
html[data-theme="dark"] .report-result.preview-loading .report-preview {
  background: linear-gradient(100deg, #132540 30%, #1b3152 50%, #132540 70%); background-size: 260% 100%;
}

/* --- second pass: the surfaces app.css paints in literal colours ---------------------------- */
html[data-theme="dark"] label,
html[data-theme="dark"] .order-entry-form label { color: #b7c7d9; }
html[data-theme="dark"] .panel-title,
html[data-theme="dark"] .order-entry-head { border-bottom-color: var(--line); }
html[data-theme="dark"] .order-title-row input[type="search"] { background: var(--n-input); border-color: #2c4362; color: var(--ink); }
html[data-theme="dark"] .order-ref { background: var(--n-surface-2); border-color: #2c4362; color: #9fd0ff; }
html[data-theme="dark"] .order-entry.is-editing .order-ref { background: rgba(240, 170, 60, .16); border-color: rgba(240, 190, 100, .4); color: #ffcf7a; }
html[data-theme="dark"] .priority-normal { background: rgba(74, 163, 255, .16); color: #8cc4ff; }
html[data-theme="dark"] .priority-urgent { background: rgba(230, 70, 85, .2); color: #ff9aa2; }
html[data-theme="dark"] .priority-high { background: rgba(240, 170, 60, .18); color: #ffc76b; }
html[data-theme="dark"] .priority-low { background: rgba(160, 180, 205, .14); color: #b7c7d9; }
html[data-theme="dark"] .ord-row-head .ord-row-in { border-bottom-color: var(--line); color: #8fa4bd; }
html[data-theme="dark"] .ord-row-head .ord-row-in > * { color: inherit; }
html[data-theme="dark"] .layout-btn.active { background: #2b77c8; border-color: #2b77c8; color: #fff; }
html[data-theme="dark"] .overdue-button b { background: #24395a; color: #d5e5f6; }
html[data-theme="dark"] .overdue-button.has-overdue b { background: #e0433d; color: #fff; }
html[data-theme="dark"] .overdue-best { background: #17382a; color: #7ddba5; }

/* Maintenance */
html[data-theme="dark"] .mt-line { background: var(--n-surface-2); border-color: var(--line); border-left-color: #3a5577; }
html[data-theme="dark"] .mt-line.due { border-left-color: #e8a33d; }
html[data-theme="dark"] .mt-line.over { border-left-color: #ff6b76; }
html[data-theme="dark"] .mt-line.ok { border-left-color: #3ccf82; }
html[data-theme="dark"] .mt-head b,
html[data-theme="dark"] .mt-facts b { color: var(--n-ink-strong); }
html[data-theme="dark"] .mt-facts > div,
html[data-theme="dark"] .mt-report { background: var(--n-input); border-color: var(--line); }
html[data-theme="dark"] .mt-report.due { background: rgba(240, 170, 60, .08); }
html[data-theme="dark"] .mt-report.over { background: rgba(230, 70, 85, .1); }
html[data-theme="dark"] .mt-report { color: #c3d2e3; }
html[data-theme="dark"] .mt-state.ok { background: var(--st-running-bg); color: var(--st-running); }
html[data-theme="dark"] .mt-state.due { background: rgba(240, 170, 60, .18); color: #ffc76b; }
html[data-theme="dark"] .mt-state.over { background: var(--st-blocked-bg); color: var(--st-blocked); }
html[data-theme="dark"] .mt-state.none { background: var(--st-idle-bg); color: var(--st-idle); }

/* Reports */
html[data-theme="dark"] .report-choice b { color: var(--n-ink-strong); }
html[data-theme="dark"] .report-choice:hover { background: var(--n-surface-3); }
html[data-theme="dark"] .report-choice.active { background: #16304f; border-color: #2f5684; }
html[data-theme="dark"] .report-choice.active b { color: #9fd0ff; }
html[data-theme="dark"] .report-chip { background: var(--n-surface-2); color: #c3d2e3; }
html[data-theme="dark"] .report-chip.strong { background: #2b77c8; color: #fff; }
html[data-theme="dark"] .report-pick > summary { background: var(--n-input); border-color: #2c4362; color: #c3d2e3; }
html[data-theme="dark"] .report-pick > summary b { color: var(--ink); }
html[data-theme="dark"] .report-empty b { color: var(--n-ink-strong); }
html[data-theme="dark"] #orderReferencePreview { background: var(--n-surface-2); border-color: #2c4362; color: #9fd0ff; }
html[data-theme="dark"] .order-entry.is-editing #orderReferencePreview { background: rgba(240, 170, 60, .16); color: #ffcf7a; }
html[data-theme="dark"] .ord-batch-head { border-bottom-color: var(--line); }
html[data-theme="dark"] .ord-batch-head span { color: #b7c7d9; }
html[data-theme="dark"] .mt-report p { color: #d5e5f6; }
html[data-theme="dark"] .mt-report b { color: var(--n-ink-strong); }

/* Dialog contents: the summary boxes, the build options and the bulk check. */
html[data-theme="dark"] .confirm-summary > div,
html[data-theme="dark"] .bulk-confirmation > div { background: var(--n-surface-2); border-color: var(--line); }
html[data-theme="dark"] .bulk-confirmation { border-color: var(--line); }
html[data-theme="dark"] .confirm-summary b,
html[data-theme="dark"] .bulk-confirmation b { color: var(--n-ink-strong); }
html[data-theme="dark"] .bulk-confirmation span { color: var(--muted); }
html[data-theme="dark"] .complete-summary > .is-key { background: #16304f; border-color: #2f5684; }
html[data-theme="dark"] .build-option,
html[data-theme="dark"] .rule-option { background: var(--n-surface-2); border-color: #2c4362; }
html[data-theme="dark"] .build-option:hover,
html[data-theme="dark"] .rule-option:hover { background: var(--n-surface-3); border-color: #3a6597; }
html[data-theme="dark"] .build-option:has(input:checked),
html[data-theme="dark"] .rule-option.selected { background: #16304f; border-color: #4aa3ff; }
html[data-theme="dark"] .build-option b { color: var(--n-ink-strong); }

/* The bell's rows. */
html[data-theme="dark"] .notification.unread { background: #16304f; }
html[data-theme="dark"] .notification:hover { background: var(--n-surface-3); }
html[data-theme="dark"] .notification > span { background: #18365c; color: #8cc4ff; }
html[data-theme="dark"] .notification.success > span { background: var(--st-running-bg); color: var(--st-running); }
html[data-theme="dark"] .notification.critical > span { background: var(--st-blocked-bg); color: var(--st-blocked); }
html[data-theme="dark"] .notification.warning > span { background: rgba(240, 170, 60, .18); color: #ffc76b; }
html[data-theme="dark"] .notif-head h3 { color: var(--n-ink-strong); }

/* --- tables, and the Access Control Center ---------------------------------------------------- */
/* .table-wrap paints its own white card in app.css; every table on every page sits in one. */
html[data-theme="dark"] .table-wrap { background: var(--surface); border-color: var(--line); box-shadow: none; }
html[data-theme="dark"] .table-wrap tbody td { border-bottom-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .table-wrap tbody tr:hover { background: var(--n-surface-3); }
html[data-theme="dark"] .table-wrap td b { color: var(--n-ink-strong); }
html[data-theme="dark"] .table-wrap thead th { background: var(--n-head); border-bottom-color: var(--line); color: #a9bcd2; }
html[data-theme="dark"] #reportTable thead th { background: #0f1d33; color: #d5e5f6; }
html[data-theme="dark"] #reportTable tbody tr:nth-child(even) { background: rgba(255, 255, 255, .03); }
html[data-theme="dark"] #reportTable tbody tr:hover { background: var(--n-surface-3); }
html[data-theme="dark"] .review-lines-table thead th { background: var(--n-head); color: #a9bcd2; }
html[data-theme="dark"] .review-lines-table tfoot th,
html[data-theme="dark"] .review-lines-table tfoot td { background: var(--n-surface-2); }
html[data-theme="dark"] .account-row { border-color: var(--line); }
html[data-theme="dark"] .account-row:hover { background: var(--n-surface-3); border-color: #335a88; }
html[data-theme="dark"] .account-avatar { background: #18365c; border-color: #2f5684; color: #a9d4ff; }
html[data-theme="dark"] .account-identity b,
html[data-theme="dark"] .reset-queue-head b,
html[data-theme="dark"] .reset-card-head b { color: var(--n-ink-strong); }
html[data-theme="dark"] .account-identity b em,
html[data-theme="dark"] .account-meta small { color: var(--muted); }
html[data-theme="dark"] .account-flag.warn { background: rgba(240, 170, 60, .18); color: #ffc76b; }
html[data-theme="dark"] .account-flag.off { background: var(--st-idle-bg); color: var(--st-idle); }
html[data-theme="dark"] .account-flag.mfa-on { background: var(--st-running-bg); color: var(--st-running); }
html[data-theme="dark"] .account-flag.danger { background: var(--st-blocked-bg); color: var(--st-blocked); }
html[data-theme="dark"] .reset-card { background: rgba(240, 170, 60, .08); border-color: rgba(240, 190, 100, .3); }
html[data-theme="dark"] .reset-note { background: var(--n-input); border-color: var(--line); color: #c3d2e3; }
html[data-theme="dark"] .approval-card.is-delete { background: rgba(230, 90, 80, .1); border-color: rgba(240, 130, 120, .35); }
html[data-theme="dark"] .approvals-history summary,
html[data-theme="dark"] .approval-decided b { color: var(--n-ink-strong); }
html[data-theme="dark"] .approval-decided.is-approved b { color: #5fd6a4; }
html[data-theme="dark"] .approval-decided.is-rejected b { color: #ff9d94; }
html[data-theme="dark"] .approval-decided span { color: #c3d2e3; }
html[data-theme="dark"] .waiting-tag { background: rgba(240, 170, 60, .18); color: #ffc877; }
html[data-theme="dark"] .waiting-tag.is-delete { background: rgba(230, 90, 80, .2); color: #ff9d94; }
html[data-theme="dark"] .form-error { color: #ff9d94; }
html[data-theme="dark"] .settings-form { background: var(--n-input); border-color: var(--line); }
html[data-theme="dark"] .settings-waiting { color: #ffc877; }
html[data-theme="dark"] .temp-password { background: #0a1424; border: 1px solid var(--line); }
html[data-theme="dark"] .notification-dot.zero { background: #2c4362; color: #b7c7d9; }

/* --- the plan under review ------------------------------------------------------------------------ */
html[data-theme="dark"] .review-banner { border-color: var(--line); }
html[data-theme="dark"] .review-banner b { color: var(--n-ink-strong); }
html[data-theme="dark"] .review-banner p,
html[data-theme="dark"] .review-banner small { color: #b7c7d9; }
html[data-theme="dark"] .review-banner.draft { background: rgba(240, 170, 60, .08); }
html[data-theme="dark"] .review-banner.draft > span { background: rgba(240, 170, 60, .2); color: #ffc76b; }
html[data-theme="dark"] .review-banner.active { background: rgba(46, 180, 110, .08); }
html[data-theme="dark"] .review-banner.active > span { background: var(--st-running-bg); color: var(--st-running); }
html[data-theme="dark"] .review-banner.neutral { background: var(--n-surface-2); }
html[data-theme="dark"] .review-banner.blocked { background: rgba(230, 70, 85, .08); }
html[data-theme="dark"] .review-banner.blocked > span { background: var(--st-blocked-bg); color: var(--st-blocked); }
html[data-theme="dark"] .review-banner > span { background: var(--n-surface-2); color: #c3d2e3; }
html[data-theme="dark"] .review-lines { border-color: var(--line); }
html[data-theme="dark"] .review-lines-table th,
html[data-theme="dark"] .review-lines-table td { border-bottom-color: var(--line); }
html[data-theme="dark"] .review-lines-table tbody th,
html[data-theme="dark"] .review-lines-table tfoot th { color: var(--n-ink-strong); }
html[data-theme="dark"] .review-lines-table td { color: #d5e5f6; }
html[data-theme="dark"] .ap-card { background: var(--n-surface-2); border-color: var(--line); }
html[data-theme="dark"] .ap-card.blocked { background: rgba(230, 70, 85, .08); }
html[data-theme="dark"] .ap-conflict { background: rgba(230, 70, 85, .12); color: #ffb1b7; }
html[data-theme="dark"] .ap-reco,
html[data-theme="dark"] .ap-selectall { color: #b7c7d9; }
html[data-theme="dark"] .urgent-order { background: rgba(230, 70, 85, .06); border-color: rgba(255, 138, 147, .25); }
html[data-theme="dark"] .urgent-order-head b,
html[data-theme="dark"] .urgent-facts dd,
html[data-theme="dark"] .urgent-section h4,
html[data-theme="dark"] .urgent-summary b,
html[data-theme="dark"] .urgent-options tbody th { color: var(--n-ink-strong); }
html[data-theme="dark"] .urgent-facts dd.good,
html[data-theme="dark"] .urgent-impact li.good,
html[data-theme="dark"] .urgent-impact li.good::before,
html[data-theme="dark"] .urgent-summary b.good,
html[data-theme="dark"] .urgent-options tr.chosen th { color: var(--st-running); }
html[data-theme="dark"] .urgent-facts dd.bad,
html[data-theme="dark"] .urgent-impact li.warn,
html[data-theme="dark"] .urgent-impact li.warn::before,
html[data-theme="dark"] .urgent-summary b.bad,
html[data-theme="dark"] .urgent-moved-row.late span:last-child,
html[data-theme="dark"] .urgent-preview-error { color: var(--st-blocked); }
html[data-theme="dark"] .urgent-impact li { color: #d5e5f6; }
html[data-theme="dark"] .urgent-answer.agreed { background: var(--st-running-bg); color: var(--st-running); }
html[data-theme="dark"] .urgent-answer.placed { background: #16304f; color: #9fd0ff; }
html[data-theme="dark"] .urgent-answer.excluded { background: var(--n-surface-2); }
html[data-theme="dark"] .urgent-detail > summary { color: #8cc4ff; }
html[data-theme="dark"] .urgent-moved { border-color: var(--line); }
html[data-theme="dark"] .urgent-moved-row + .urgent-moved-row { border-top-color: var(--line); }
html[data-theme="dark"] .urgent-moved-row.head { background: var(--n-head); }
html[data-theme="dark"] .urgent-summary > div { background: var(--n-surface-2); border-color: rgba(255, 138, 147, .2); }
html[data-theme="dark"] .urgent-summary span,
html[data-theme="dark"] .urgent-options thead th { color: #c9a9ad; }
html[data-theme="dark"] .urgent-options th,
html[data-theme="dark"] .urgent-options td { border-bottom-color: var(--line); }
html[data-theme="dark"] .urgent-options tr.chosen { background: rgba(46, 180, 110, .1); }
/* The review section's own amber-edged card (.wb-review): its banner and table rows are see-through,
   so this is the colour behind all of them. The amber edge stays: a decision is waiting. */
html[data-theme="dark"] .wb-review { background: #131f33; border-color: rgba(240, 190, 100, .28); border-left-color: #da8c06; }
html[data-theme="dark"] .review-banner { border-color: rgba(240, 190, 100, .22); }
html[data-theme="dark"] .review-lines-table tbody tr:hover { background: rgba(255, 255, 255, .03); }
html[data-theme="dark"] .rl-refs i { background: #1d3352; color: #cfe3f8; }
html[data-theme="dark"] .urgent-options td.good { color: var(--st-running); }
html[data-theme="dark"] .urgent-options td.bad { color: var(--st-blocked); }

/* --- the week and month's day lists, and the notes under bars ----------------------------------- */
html[data-theme="dark"] .block-flag { border-color: #2c4362; box-shadow: none; }
html[data-theme="dark"] .block-flag b { color: var(--n-ink-strong); }
html[data-theme="dark"] .block-flag span { color: #a9c0d8; }
html[data-theme="dark"] .block-flag small { color: #b7c7d9; }
html[data-theme="dark"] .block-flag i { background: #24395a; color: #cfe3f8; }
html[data-theme="dark"] .live-gantt.is-multi-day .block-flag.in-day {
  background: var(--n-surface-2); background: color-mix(in srgb, var(--flag-colour, #5d7288) 12%, #13223a);
  border-color: #2c4362;
}
html[data-theme="dark"] .live-gantt.is-multi-day .block-flag.in-day span { color: #a9c0d8; }
html[data-theme="dark"] .live-gantt.is-multi-day .block-flag.in-day small { color: #c3d2e3; }
html[data-theme="dark"] .live-gantt.is-multi-day .block-flag.in-day:hover { border-color: #4a78ad; }
html[data-theme="dark"] .day-band.is-today { background: rgba(74, 163, 255, .07); box-shadow: inset 2px 0 0 rgba(74, 163, 255, .4); }
html[data-theme="dark"] .live-gantt-axis i.is-today { color: #8cc4ff; }

/* --- Reports ------------------------------------------------------------------------------------------
   The in-page table stands in for the PDF where a browser cannot show one (a phone). Its rules are keyed
   on its id in app.css, which outranks the table rules above, so it is restated here by id. */
html[data-theme="dark"] .report-table-wrap { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] #reportTable thead th { background: #0f1d33; border-bottom: 1px solid var(--line); color: #d5e5f6; }
html[data-theme="dark"] #reportTable tbody td { border-bottom-color: var(--line); color: #d5e5f6; }
html[data-theme="dark"] #reportTable tbody td:first-child { color: #9fd0ff; }
html[data-theme="dark"] #reportTable tbody tr:nth-child(even) { background: rgba(255, 255, 255, .035); }
html[data-theme="dark"] #reportTable tbody tr:hover { background: var(--n-surface-3); }
html[data-theme="dark"] #reportTable .queue-empty { background: transparent; }
/* The FMF logo behind the result is multiplied onto the page, which on a dark page is nothing at all:
   screened instead, faintly, so it still reads as a watermark. */
html[data-theme="dark"] .report-result::after { filter: grayscale(1) invert(1); mix-blend-mode: screen; opacity: .045; }
html[data-theme="dark"] .report-group-label { color: #8fa9c4; }
html[data-theme="dark"] .report-choice span { color: var(--muted); }
html[data-theme="dark"] .report-filters { border-bottom-color: var(--line); }
html[data-theme="dark"] .report-show { border-color: #2c4362; }
html[data-theme="dark"] .report-show legend { color: var(--muted); }
html[data-theme="dark"] .report-meta { color: var(--muted); }
html[data-theme="dark"] .report-pick[open] > summary { border-color: #4a78ad; }
html[data-theme="dark"] .report-pick-panel { background: var(--surface); border-color: var(--line); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .report-pick-list .checkbox { color: #d5e5f6; }
html[data-theme="dark"] .check-filter > summary::after { color: var(--muted); }
html[data-theme="dark"] .report-date-error { color: #ff8a93; }
html[data-theme="dark"] .report-filters input[aria-invalid="true"] { border-color: #ff8a93; box-shadow: 0 0 0 1px #ff8a93; }
html[data-theme="dark"] .report-empty p { color: var(--muted); }
/* Baseline vs actual, drawn in the page where the PDF cannot be. */
html[data-theme="dark"] .comparison-head,
html[data-theme="dark"] .tl-key,
html[data-theme="dark"] .tl-axis,
html[data-theme="dark"] .comparison-empty { color: var(--muted); }
html[data-theme="dark"] .comparison-tiles > div { background: var(--n-surface-2); border-left-color: #4aa3ff; }
html[data-theme="dark"] .comparison-tiles b,
html[data-theme="dark"] .tl-day h4,
html[data-theme="dark"] .tl-name,
html[data-theme="dark"] .tl-label b { color: var(--n-ink-strong); }
html[data-theme="dark"] .comparison-tiles span,
html[data-theme="dark"] .tl-key > b { color: var(--muted); }
html[data-theme="dark"] .tl-day { border-top-color: var(--line); }
html[data-theme="dark"] .tl-track { background: #0f1d33; }
html[data-theme="dark"] .tl-ghost { background: color-mix(in srgb, var(--bar) 30%, #12213a); color: #e3ecf7; }
html[data-theme="dark"] .tl-service-ghost { background: color-mix(in srgb, var(--bar) 28%, #12213a); color: #e3ecf7; }
html[data-theme="dark"] .tl-context::before { background: #34465f; }
html[data-theme="dark"] .tl-missed { background: rgba(230, 70, 85, .2); color: #ffb3b9; }

/* --- orders from a CSV file: the page's line and the import wizard ----------------------------- */
html[data-theme="dark"] .order-confirm-bar { background: rgba(140, 100, 230, .16); border-color: #4a3a7a; color: #cdb8ff; }
html[data-theme="dark"] .import-steps li { background: var(--n-surface-2); border-color: var(--line); color: var(--muted); }
html[data-theme="dark"] .import-steps li::before { background: var(--n-surface-3); color: #c9d6e6; }
html[data-theme="dark"] .import-steps li.is-done { background: rgba(46, 180, 110, .14); border-color: #285c42; color: #7fdcaa; }
html[data-theme="dark"] .import-steps li.is-done::before { background: #2a9d63; color: #fff; }
html[data-theme="dark"] .import-steps li.is-current { background: #2b77c8; border-color: #2b77c8; color: #fff; }
html[data-theme="dark"] .import-steps li.is-current::before { background: #fff; color: #2b77c8; }
html[data-theme="dark"] .dialog .import-drop { background: var(--n-surface-2); border-color: #34557d; color: #b7c7d9; }
html[data-theme="dark"] .dialog .import-drop:hover,
html[data-theme="dark"] .dialog .import-drop.is-dragging { background: var(--n-surface-3); border-color: var(--blue); }
html[data-theme="dark"] .import-drop-icon { color: var(--blue); }
html[data-theme="dark"] .import-drop b,
html[data-theme="dark"] .import-file-line b,
html[data-theme="dark"] .import-created-row b,
html[data-theme="dark"] .import-working { color: var(--n-ink-strong); }
html[data-theme="dark"] .import-done-head span { color: #b7c7d9; }
html[data-theme="dark"] .import-table code { background: var(--n-surface-3); color: #9cc9ff; }
html[data-theme="dark"] .import-spinner { border-color: #24395a; border-top-color: var(--blue); }
html[data-theme="dark"] .import-verdict.is-ok,
html[data-theme="dark"] .import-status.is-ok,
html[data-theme="dark"] .import-table small.import-match.is-existing { background: rgba(46, 180, 110, .16); color: #7fdcaa; }
html[data-theme="dark"] .import-verdict.is-warning,
html[data-theme="dark"] .import-status.is-warning { background: rgba(217, 160, 60, .16); color: #f2c46d; }
html[data-theme="dark"] .import-verdict.is-error,
html[data-theme="dark"] .import-status.is-error,
html[data-theme="dark"] .import-error { background: rgba(230, 70, 85, .18); color: #ff9aa2; }
html[data-theme="dark"] .import-table small.import-match.is-new { background: rgba(140, 100, 230, .2); color: #cdb8ff; }
html[data-theme="dark"] .import-summary > div.is-error { background: rgba(230, 70, 85, .14); border-color: #6a2a33; }
html[data-theme="dark"] .import-summary > div.is-error b { color: #ff9aa2; }
html[data-theme="dark"] .import-summary > div.is-warning { background: rgba(217, 160, 60, .14); border-color: #6b5124; }
html[data-theme="dark"] .import-summary > div.is-warning b { color: #f2c46d; }
html[data-theme="dark"] .import-file-errors li.is-error { background: rgba(230, 70, 85, .14); color: #ffb3b9; }
html[data-theme="dark"] .import-file-errors li.is-warning { background: rgba(217, 160, 60, .14); color: #f2c46d; }
html[data-theme="dark"] .import-file-errors li.is-info { background: var(--n-surface-2); color: #b7c7d9; }
html[data-theme="dark"] .import-filter button { background: var(--n-input); border-color: var(--line); color: #b7c7d9; }
html[data-theme="dark"] .import-filter button.active { background: #2b77c8; border-color: #2b77c8; color: #fff; }
html[data-theme="dark"] .import-raw,
html[data-theme="dark"] .import-issues li.is-error { color: #ff9aa2; }
html[data-theme="dark"] .import-issues li.is-warning { color: #f2c46d; }
html[data-theme="dark"] .import-issues li.is-error .import-issue-kind { background: rgba(230, 70, 85, .22); color: #ff9aa2; }
html[data-theme="dark"] .import-issues li.is-warning .import-issue-kind { background: rgba(217, 160, 60, .2); color: #f2c46d; }
html[data-theme="dark"] .import-table-wrap tbody th { border-bottom-color: var(--line); color: var(--n-ink-strong); }
/* A row and the line of problems under it read as one: no zebra stripe between them. */
html[data-theme="dark"] .import-table-wrap tbody tr:nth-child(even) { background: transparent; }
html[data-theme="dark"] .import-table-wrap tbody tr.import-row { border-top-color: var(--line); }
html[data-theme="dark"] .dialog .import-ack { background: rgba(217, 160, 60, .12); border-color: #6b5124; color: #f2c46d; }
html[data-theme="dark"] .import-done-head b { color: #7fdcaa; }
html[data-theme="dark"] .import-created { border-color: var(--line); }
html[data-theme="dark"] .dialog .import-created-row { border-bottom-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .import-created-row .import-created-state { background: rgba(140, 100, 230, .2); color: #cdb8ff; }
html[data-theme="dark"] .import-created-row.is-confirmed .import-created-state { background: rgba(46, 180, 110, .16); color: #7fdcaa; }
html[data-theme="dark"] #fitDashboardZoom.active { background: #2b77c8; border-color: #2b77c8; color: #fff; }
html[data-theme="dark"] .ord-row-in .ord-reject, html[data-theme="dark"] .ord-foot .ord-reject { color: #ff8a92; }
/* The three shifts on the timeline, and the fields added with them. */
html[data-theme="dark"] .shift-cell { border-bottom-color: #263a55; border-left-color: #5b7699; color: #e3ecf7; }
html[data-theme="dark"] .shift-cell.shift-1 { background: #16304f; }
html[data-theme="dark"] .shift-cell.shift-2 { background: #3a2f17; }
html[data-theme="dark"] .shift-cell.shift-3 { background: #2a2550; }
html[data-theme="dark"] .shift-zone { border-left-color: #3b5272; }
html[data-theme="dark"] .day-mark { color: #cfe0f5; }
html[data-theme="dark"] .day-mark.is-midnight { border-left-color: #8f7be0; color: #c4b5ff; }
html[data-theme="dark"] .midnight-line { border-left-color: rgba(143, 123, 224, .6); }
html[data-theme="dark"] .order-notes { color: #9fb2c8; }
html[data-theme="dark"] .order-notes b { color: #e3ecf7; }
html[data-theme="dark"] .feature-ticks label { color: #cfe0f5; }
html[data-theme="dark"] .order-entry-form textarea, html[data-theme="dark"] .line-person-cell select { background: #0f1d33; border-color: #263a55; color: #e3ecf7; }
html[data-theme="dark"] .line-people-table th, html[data-theme="dark"] .line-people-table td { border-color: #263a55; }
html[data-theme="dark"] .line-people-table thead th, html[data-theme="dark"] .line-people-table thead small { color: #9fb2c8; }
html[data-theme="dark"] .line-people-table tbody th, html[data-theme="dark"] .line-person { color: #e3ecf7; }
html[data-theme="dark"] .line-person.is-nobody { color: #f7b267; }
html[data-theme="dark"] .line-person-chip { background: #15263f; border-color: #263a55; color: #e3ecf7; }
html[data-theme="dark"] .line-person-chip small, html[data-theme="dark"] .line-person-chip button { color: #9fb2c8; }
html[data-theme="dark"] .line-person-chip.cannot-run { background: #3a2c12; border-color: #6a5220; }

/* The accessibility audit (2026-11-08): white on the night blue of an active switch read 4.1:1, and is
   now on a shade deeper (#2b77c8, 4.6:1); a service due read 3.6:1 on the panel, and a lighter amber
   reads 4.9:1. */
html[data-theme="dark"] .line-service.due { color: #c77e0a; }

/* The accessibility audit's second run (2026-11-08): Take offline and Bring online read 3.1:1 on the
   panel in their day colours; night's own blue and green read 6.1:1 and 8.4:1. */
html[data-theme="dark"] .line-switch { color: var(--blue); }
html[data-theme="dark"] .line-switch.is-offline { color: var(--st-running); }