/* Shared theme tokens. Light pages keep their existing styles. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 9px; flex: 0 0 auto;
  border: 1px solid var(--border-strong, #d6d6d6); border-radius: 50%;
  background: var(--bg, #fff); color: var(--fg-strong, #222);
  cursor: pointer; transition: background-color .15s, border-color .15s;
}
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle:hover { background: var(--bg-muted, #f5f4f1); border-color: var(--gold, #B79B58); }
.theme-toggle:focus-visible { outline: 3px solid var(--gold, #B79B58); outline-offset: 3px; }
.theme-toggle-floating { position: fixed; top: 20px; right: 20px; z-index: 500; width: 44px; height: 44px; }

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #191c21; --bg-soft: #111419; --bg-muted: #232830;
  --white: #191c21; --warm-white: #111419; --off-white: #232830;
  --fg: #e3e6ec; --fg-strong: #f6f7fa; --fg-muted: #b7bfcb; --fg-faint: #b0bac8;
  --fg-inverse: #fff; --bg-inverse: #090b0e;
  --border: rgba(203,213,228,.13); --border-strong: #7d899a;
  --gold: #d1b773; --gold-light: #e1ce98; --gold-dark: #c8ad67;
  --accent: var(--gold); --accent-hover: var(--gold-light);
  --gold-subtle: rgba(209,183,115,.12); --gold-glow: rgba(209,183,115,.21);
  --shadow-subtle: 0 1px 3px rgba(0,0,0,.25);
  --shadow-card: 0 4px 24px rgba(0,0,0,.3);
  --shadow-elevated: 0 12px 48px rgba(0,0,0,.5);
  --theme-success: #80d7a5; --theme-success-bg: #19352b;
  --theme-danger: #ff9993; --theme-danger-bg: #382323;
  --theme-warning: #ebc477; --theme-warning-bg: #342c1d;
  --theme-info: #93baff; --theme-info-bg: #202f46;
  --theme-purple: #c8aaff; --theme-purple-bg: #30263f;
  --fuel-ok: var(--theme-success); --fuel-ok-bg: var(--theme-success-bg);
  --fuel-bad: var(--theme-danger); --fuel-bad-bg: var(--theme-danger-bg);
  --fuel-warn: var(--theme-warning); --fuel-warn-bg: var(--theme-warning-bg);
  --fuel-info: var(--theme-info); --fuel-info-bg: var(--theme-info-bg);
  --fuel-purple: var(--theme-purple); --fuel-purple-bg: var(--theme-purple-bg);
  --fuel-gray: var(--fg-muted); --fuel-gray-bg: var(--bg-muted);
}
html[data-theme="dark"] nav.main { background: rgba(25,28,33,.98); }
html[data-theme="dark"] :is(input, select, textarea) { color-scheme: dark; }
html[data-theme="dark"] :is(input, textarea)::placeholder { color: var(--fg-faint); opacity: 1; }
html[data-theme="dark"] :is(input, select, textarea):focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
html[data-theme="dark"] ::selection { background: var(--gold); color: #111419; }

/* Legacy page components use the same surface and status tokens. */
html[data-theme="dark"] .cc-subtabs,
html[data-theme="dark"] .cc-toolbar,
html[data-theme="dark"] .hs-toolbar,
html[data-theme="dark"] .hs-table thead th,
html[data-theme="dark"] .hs-table tbody td,
html[data-theme="dark"] .dh-hs-table thead th,
html[data-theme="dark"] .dh-hs-table tbody td,
html[data-theme="dark"] .gse-form-section,
html[data-theme="dark"] .gse-subtabs,
html[data-theme="dark"] .notif-panel-head,
html[data-theme="dark"] .notif-item { border-bottom: 1px solid var(--border-strong); }
html[data-theme="dark"] .cc-subtab,
html[data-theme="dark"] .cc-pill-na,
html[data-theme="dark"] .cc-pill-done,
html[data-theme="dark"] .cc-card-foot,
html[data-theme="dark"] .cc-section-head,
html[data-theme="dark"] .cc-section-n,
html[data-theme="dark"] .cc-row-veh,
html[data-theme="dark"] .cc-row-sub,
html[data-theme="dark"] .cc-row-note,
html[data-theme="dark"] .cc-row-photos,
html[data-theme="dark"] .cc-d-sub,
html[data-theme="dark"] .cc-d-photo-doc,
html[data-theme="dark"] .cc-form-note,
html[data-theme="dark"] .cc-yn-opt span,
html[data-theme="dark"] .cc-thumb-doc,
html[data-theme="dark"] .cc-an-note,
html[data-theme="dark"] .dh-cc-meta,
html[data-theme="dark"] .todo-subtab,
html[data-theme="dark"] .hs-subtab,
html[data-theme="dark"] .hs-pill-na,
html[data-theme="dark"] .hs-section-head,
html[data-theme="dark"] .hs-section-n,
html[data-theme="dark"] .hs-form-meta,
html[data-theme="dark"] .hs-form-note,
html[data-theme="dark"] .hs-an-note,
html[data-theme="dark"] .dh-hs-due-note,
html[data-theme="dark"] .gse-soon,
html[data-theme="dark"] .gse-seg,
html[data-theme="dark"] .gse-status-head,
html[data-theme="dark"] .gse-row-sub,
html[data-theme="dark"] .gse-date-meta,
html[data-theme="dark"] .gse-reg-head,
html[data-theme="dark"] .gse-history-head,
html[data-theme="dark"] .gse-reg-date,
html[data-theme="dark"] .gse-reg-state,
html[data-theme="dark"] .gse-ev-body,
html[data-theme="dark"] .gse-form-section,
html[data-theme="dark"] .gse-tag.paused,
html[data-theme="dark"] .gse-ev-note,
html[data-theme="dark"] .gse-subtab,
html[data-theme="dark"] .gse-kan-head,
html[data-theme="dark"] .gse-kan-meta,
html[data-theme="dark"] .gse-toggle,
html[data-theme="dark"] .gse-reg-note,
html[data-theme="dark"] .dh-dnu-meta,
html[data-theme="dark"] .notif-empty,
html[data-theme="dark"] .notif-item-snippet { color: var(--fg-muted); }
html[data-theme="dark"] .cc-subtab:hover,
html[data-theme="dark"] .cc-pill-na,
html[data-theme="dark"] .cc-card,
html[data-theme="dark"] .cc-chip,
html[data-theme="dark"] .cc-section-n,
html[data-theme="dark"] .cc-row,
html[data-theme="dark"] .cc-d-fact,
html[data-theme="dark"] .cc-d-checks,
html[data-theme="dark"] .cc-d-check,
html[data-theme="dark"] .cc-d-photo,
html[data-theme="dark"] .cc-yn-opt span,
html[data-theme="dark"] .cc-thumb,
html[data-theme="dark"] .fuel-lightbox img,
html[data-theme="dark"] .op-card,
html[data-theme="dark"] .op-field input:focus,
html[data-theme="dark"] .op-field manual-email:focus-within,
html[data-theme="dark"] .column,
html[data-theme="dark"] .res-card,
html[data-theme="dark"] .line-tail-card,
html[data-theme="dark"] .not-flying-stage-btn,
html[data-theme="dark"] .not-flying-mx-btn,
html[data-theme="dark"] .col-line .res-card,
html[data-theme="dark"] .stat-pill,
html[data-theme="dark"] .not-flying-card,
html[data-theme="dark"] .at-mx-card,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .cancel-reason,
html[data-theme="dark"] .cancel-notes,
html[data-theme="dark"] .todo-subtab:hover,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .field input:focus,
html[data-theme="dark"] .field manual-email:focus-within,
html[data-theme="dark"] .hs-subtab:hover,
html[data-theme="dark"] .hs-pill-na,
html[data-theme="dark"] .hs-section-n,
html[data-theme="dark"] .hs-table,
html[data-theme="dark"] .hs-row:hover,
html[data-theme="dark"] .dh-hs-table,
html[data-theme="dark"] .gse-soon,
html[data-theme="dark"] .gse-seg,
html[data-theme="dark"] .gse-status-n,
html[data-theme="dark"] .gse-row,
html[data-theme="dark"] .gse-reg-row,
html[data-theme="dark"] .gse-subtab:hover,
html[data-theme="dark"] .gse-kan-col,
html[data-theme="dark"] .gse-kan-card,
html[data-theme="dark"] .combobox-list,
html[data-theme="dark"] .notif-panel,
html[data-theme="dark"] .section-tab,
html[data-theme="dark"] .picker-row,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .criteria-card,
html[data-theme="dark"] .report-table tr.ns-group-row td { background: var(--bg); }
html[data-theme="dark"] .cc-subtab:hover,
html[data-theme="dark"] .cc-card-name,
html[data-theme="dark"] .cc-chip,
html[data-theme="dark"] .cc-row-name,
html[data-theme="dark"] .cc-d-fact,
html[data-theme="dark"] .cc-d-check-q,
html[data-theme="dark"] .cc-d-note,
html[data-theme="dark"] .cc-yn-label,
html[data-theme="dark"] .dh-cc-name,
html[data-theme="dark"] .op-brand-word,
html[data-theme="dark"] .op-title,
html[data-theme="dark"] .op-key,
html[data-theme="dark"] .op-field input,
html[data-theme="dark"] .op-field manual-email,
html[data-theme="dark"] .brand-word,
html[data-theme="dark"] .clock,
html[data-theme="dark"] .todo-subtab:hover,
html[data-theme="dark"] .login-brand .brand-word,
html[data-theme="dark"] .login-title,
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field manual-email,
html[data-theme="dark"] .hs-subtab:hover,
html[data-theme="dark"] .hs-table tbody td,
html[data-theme="dark"] .hs-renter-name,
html[data-theme="dark"] .hs-confirm-body,
html[data-theme="dark"] .dh-hs-table tbody td,
html[data-theme="dark"] .dh-hs-name,
html[data-theme="dark"] .dh-hs-due-at,
html[data-theme="dark"] .hs-num,
html[data-theme="dark"] .dh-hs-ids,
html[data-theme="dark"] .gse-name,
html[data-theme="dark"] .gse-detail-v,
html[data-theme="dark"] .gse-detail-note p,
html[data-theme="dark"] .gse-reg-label,
html[data-theme="dark"] .gse-ev-who,
html[data-theme="dark"] .gse-ev-chg,
html[data-theme="dark"] .gse-radio label,
html[data-theme="dark"] .gse-asset-squawk,
html[data-theme="dark"] .gse-howto,
html[data-theme="dark"] .gse-subtab:hover,
html[data-theme="dark"] .gse-kan-title,
html[data-theme="dark"] .combobox-option,
html[data-theme="dark"] .combobox-option.active,
html[data-theme="dark"] .combobox-option:hover,
html[data-theme="dark"] .dh-dnu-name,
html[data-theme="dark"] .notif-panel,
html[data-theme="dark"] .notif-item-title,
html[data-theme="dark"] .badge.cancelled { color: var(--fg-strong); }
html[data-theme="dark"] .cc-subtab.active,
html[data-theme="dark"] .cc-yn-opt input:checked + span,
html[data-theme="dark"] .notes-group-count,
html[data-theme="dark"] .flight-mode-solo,
html[data-theme="dark"] .action-disabled,
html[data-theme="dark"] .action-disabled:hover,
html[data-theme="dark"] .todo-subtab.active,
html[data-theme="dark"] .hs-subtab.active,
html[data-theme="dark"] .gse-seg.active,
html[data-theme="dark"] .gse-subtab.active,
html[data-theme="dark"] .dh-notes-group-count,
html[data-theme="dark"] .mq-tl-day.weekend,
html[data-theme="dark"] .mq-tl-weekend-bg,
html[data-theme="dark"] .badge.missing,
html[data-theme="dark"] .badge.cancelled { background: var(--bg-muted); }
html[data-theme="dark"] .cc-pill-ok,
html[data-theme="dark"] .hs-pill-ok,
html[data-theme="dark"] .inv-ev-badge.ontime,
html[data-theme="dark"] .gse-st-ok,
html[data-theme="dark"] .gse-st-squawks,
html[data-theme="dark"] .gse-kan-col.gse-st-ok      .gse-kan-card,
html[data-theme="dark"] .gse-kan-col.gse-st-squawks .gse-kan-card,
html[data-theme="dark"] .gse-kan-col.gse-sq-done     .gse-kan-card,
html[data-theme="dark"] .gse-kan-col.gse-st-squawks,
html[data-theme="dark"] .gse-kan-col.gse-st-ok,
html[data-theme="dark"] .gse-kan-col.gse-sq-done,
html[data-theme="dark"] .gse-reg-row.gse-rate-sat,
html[data-theme="dark"] .dh-todo-check:hover { background: var(--theme-success-bg); }
html[data-theme="dark"] .cc-pill-ok,
html[data-theme="dark"] .cc-d-check-a,
html[data-theme="dark"] .todo-complete:hover .todo-check,
html[data-theme="dark"] .todo-ontime,
html[data-theme="dark"] .hs-pill-ok,
html[data-theme="dark"] .inv-ev-badge.ontime,
html[data-theme="dark"] .gse-st-ok,
html[data-theme="dark"] .gse-st-squawks,
html[data-theme="dark"] .gse-rate-sat   .gse-reg-state,
html[data-theme="dark"] .cl-item-meta .who,
html[data-theme="dark"] .dh-dnu-flag-ok,
html[data-theme="dark"] .dh-todo-check:hover,
html[data-theme="dark"] .mq-variance.early,
html[data-theme="dark"] .mq-bay-badge,
html[data-theme="dark"] .mq-an-stat.early,
html[data-theme="dark"] .mq-ov-clear,
html[data-theme="dark"] .mq-ov-to .mq-ov-tail { color: var(--theme-success); }
html[data-theme="dark"] .cc-pill-inop,
html[data-theme="dark"] .cc-card-inop,
html[data-theme="dark"] .cc-row-overdue,
html[data-theme="dark"] .cc-badge-inop,
html[data-theme="dark"] .cc-d-check.is-bad,
html[data-theme="dark"] .dh-cc-card,
html[data-theme="dark"] .urgency-red,
html[data-theme="dark"] .urgency-pulse,
html[data-theme="dark"] .urgency-flash,
html[data-theme="dark"] .line-tail-card--not-flying,
html[data-theme="dark"] .not-flying,
html[data-theme="dark"] .hs-pill-inop,
html[data-theme="dark"] .hs-danger:hover,
html[data-theme="dark"] .inv-tag.reorder,
html[data-theme="dark"] .inv-ev-badge.late,
html[data-theme="dark"] .gse-st-inop,
html[data-theme="dark"] .gse-tag.overdue,
html[data-theme="dark"] .gse-tag.date-danger,
html[data-theme="dark"] .gse-row.gse-date-danger,
html[data-theme="dark"] .gse-reg-row.gse-reg-overdue,
html[data-theme="dark"] .gse-reg-row.gse-reg-critical,
html[data-theme="dark"] .gse-asset-squawk,
html[data-theme="dark"] .gse-asset-squawk:hover,
html[data-theme="dark"] .gse-kan-col.gse-st-inop    .gse-kan-card,
html[data-theme="dark"] .gse-kan-col.gse-sq-needs    .gse-kan-card,
html[data-theme="dark"] .gse-kan-col .gse-kan-card.gse-date-danger,
html[data-theme="dark"] .gse-kan-col.gse-st-inop,
html[data-theme="dark"] .gse-kan-col.gse-sq-needs,
html[data-theme="dark"] .gse-reg-row.gse-rate-unsat,
html[data-theme="dark"] .dh-dnu-card,
html[data-theme="dark"] .mq-ov-red-slow,
html[data-theme="dark"] .mq-ov-red-fast,
html[data-theme="dark"] .offschedule-tail { background: var(--theme-danger-bg); }
html[data-theme="dark"] .cc-pill-inop,
html[data-theme="dark"] .cc-badge-inop,
html[data-theme="dark"] .cc-d-check-note,
html[data-theme="dark"] .cc-d-check.is-bad .cc-d-check-q,
html[data-theme="dark"] .cc-d-check.is-bad .cc-d-check-a,
html[data-theme="dark"] .dh-cc-status,
html[data-theme="dark"] .dash-tab-alert:not(.active),
html[data-theme="dark"] .dash-tab-alert:not(.active):hover,
html[data-theme="dark"] .note-act.danger:hover,
html[data-theme="dark"] .attach-remove:hover,
html[data-theme="dark"] .comment-delete:hover,
html[data-theme="dark"] .fuel-x1-cell.is-bad b,
html[data-theme="dark"] .op-error,
html[data-theme="dark"] .urgency-red    .countdown-time,
html[data-theme="dark"] .urgency-pulse  .countdown-time,
html[data-theme="dark"] .urgency-flash  .countdown-time,
html[data-theme="dark"] .urgency-red    .countdown-time span,
html[data-theme="dark"] .urgency-pulse  .countdown-time span,
html[data-theme="dark"] .urgency-flash  .countdown-time span,
html[data-theme="dark"] .line-tail-card--not-flying .aircraft-id .tail-link,
html[data-theme="dark"] .line-tail-card--not-flying .scheduled-time,
html[data-theme="dark"] .not-flying-stage-btn,
html[data-theme="dark"] .delta-note .late,
html[data-theme="dark"] .not-flying-title,
html[data-theme="dark"] .not-flying-sub,
html[data-theme="dark"] .not-flying-count,
html[data-theme="dark"] .not-flying-card-id .tail-link:hover,
html[data-theme="dark"] .bug-report-error,
html[data-theme="dark"] .todo-act.danger:hover,
html[data-theme="dark"] .todo-late,
html[data-theme="dark"] .todo-card.urg-red .todo-countdown,
html[data-theme="dark"] .todo-card.urg-overdue .todo-countdown,
html[data-theme="dark"] .todo-due-label.is-overdue,
html[data-theme="dark"] .todo-card--pmcs .todo-complete:hover .todo-check,
html[data-theme="dark"] .error,
html[data-theme="dark"] .hs-pill-inop,
html[data-theme="dark"] .hs-danger,
html[data-theme="dark"] .dh-hs-row.dh-hs-due-soon .dh-hs-due-rel,
html[data-theme="dark"] .dh-hs-row.dh-hs-overdue .dh-hs-due-rel,
html[data-theme="dark"] .dh-hs-row.dh-hs-overdue .dh-hs-due-at,
html[data-theme="dark"] .dh-hs-row.dh-hs-overdue .dh-hs-name,
html[data-theme="dark"] .inv-tag.reorder,
html[data-theme="dark"] .inv-due-label.urg-overdue,
html[data-theme="dark"] .inv-ev-badge.late,
html[data-theme="dark"] .gse-st-inop,
html[data-theme="dark"] .gse-tag.overdue,
html[data-theme="dark"] .gse-tag.date-danger,
html[data-theme="dark"] .gse-reg-overdue .gse-reg-state,
html[data-theme="dark"] .gse-reg-critical .gse-reg-state,
html[data-theme="dark"] .gse-asset-squawk .gse-as-status,
html[data-theme="dark"] .gse-rate-unsat .gse-reg-state,
html[data-theme="dark"] .dh-dnu-flag,
html[data-theme="dark"] .dh-dnu-status,
html[data-theme="dark"] .dh-todo.urg-overdue .dh-todo-countdown,
html[data-theme="dark"] .dh-todo.urg-red .dh-todo-countdown,
html[data-theme="dark"] .dh-inv-due.urg-overdue,
html[data-theme="dark"] .mq-due.overdue,
html[data-theme="dark"] .mq-variance.late,
html[data-theme="dark"] .mq-an-stat.late,
html[data-theme="dark"] .mq-subtab.flashing,
html[data-theme="dark"] .mq-subtab.active.flashing,
html[data-theme="dark"] .mq-ov-red-slow .mq-ov-until,
html[data-theme="dark"] .mq-ov-red-fast .mq-ov-until,
html[data-theme="dark"] .stat-pill.bad .stat-n,
html[data-theme="dark"] .badge.late,
html[data-theme="dark"] .delta-cell.late,
html[data-theme="dark"] .badge.ns-needs,
html[data-theme="dark"] .offschedule-tail,
html[data-theme="dark"] .offschedule-tail strong { color: var(--theme-danger); }
html[data-theme="dark"] .cc-pill-done,
html[data-theme="dark"] .at-mx,
html[data-theme="dark"] .hs-pill-busy,
html[data-theme="dark"] .gse-tag.parts,
html[data-theme="dark"] .gse-tag.howto,
html[data-theme="dark"] .gse-kan-col.gse-sq-postmaint .gse-kan-card,
html[data-theme="dark"] .gse-kan-col.gse-sq-postmaint,
html[data-theme="dark"] .notif-item:hover,
html[data-theme="dark"] .weather-banner { background: var(--theme-info-bg); }
html[data-theme="dark"] .cc-card,
html[data-theme="dark"] .cc-row,
html[data-theme="dark"] .cc-d-checks,
html[data-theme="dark"] .cc-d-photo,
html[data-theme="dark"] .cc-audi-note,
html[data-theme="dark"] .cc-thumb,
html[data-theme="dark"] .dh-cc-card,
html[data-theme="dark"] .column,
html[data-theme="dark"] .res-card,
html[data-theme="dark"] .stat-pill,
html[data-theme="dark"] .hs-table,
html[data-theme="dark"] .dh-hs-table,
html[data-theme="dark"] .gse-seg,
html[data-theme="dark"] .gse-row,
html[data-theme="dark"] .gse-kan-col,
html[data-theme="dark"] .gse-kan-card,
html[data-theme="dark"] .combobox-list,
html[data-theme="dark"] .section-tab,
html[data-theme="dark"] .picker-row,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .criteria-card { border: 1px solid var(--border-strong); }
html[data-theme="dark"] .cc-card { border-left: 4px solid var(--border-strong); }
html[data-theme="dark"] .cc-card-na,
html[data-theme="dark"] .note-card.accent-admin,
html[data-theme="dark"] .gse-status-head.gse-st-inop    ~ .gse-row,
html[data-theme="dark"] .gse-row.urg-paused,
html[data-theme="dark"] .dh-todo.urg-grey,
html[data-theme="dark"] .dh-note.accent-admin { border-left-color: var(--border-strong); }
html[data-theme="dark"] .cc-chip-k,
html[data-theme="dark"] .cc-row-when,
html[data-theme="dark"] .cc-row-chev,
html[data-theme="dark"] .cc-d-fact-k,
html[data-theme="dark"] .cc-d-section-label,
html[data-theme="dark"] .fuel-big-input input::placeholder,
html[data-theme="dark"] .hs-muted,
html[data-theme="dark"] .hs-table thead th,
html[data-theme="dark"] .hs-renter-sub,
html[data-theme="dark"] .dh-hs-muted,
html[data-theme="dark"] .dh-hs-due-rel,
html[data-theme="dark"] .hs-num-count.is-empty,
html[data-theme="dark"] .gse-detail-k,
html[data-theme="dark"] .gse-ev-when,
html[data-theme="dark"] .gse-howto-empty,
html[data-theme="dark"] .combobox-empty,
html[data-theme="dark"] .notif-item-time { color: var(--fg-faint); }
html[data-theme="dark"] .cc-row-overdue,
html[data-theme="dark"] .cc-row-tappable:hover,
html[data-theme="dark"] .dh-cc-card.dh-cc-overdue,
html[data-theme="dark"] .gse-seg:hover,
html[data-theme="dark"] .gse-seg.active,
html[data-theme="dark"] .gse-row:hover,
html[data-theme="dark"] .gse-row.gse-date-danger,
html[data-theme="dark"] .gse-kan-card:hover,
html[data-theme="dark"] .gse-kan-col.gse-st-ok      .gse-kan-card,
html[data-theme="dark"] .gse-kan-col.gse-st-squawks .gse-kan-card,
html[data-theme="dark"] .gse-kan-col.gse-st-maint   .gse-kan-card,
html[data-theme="dark"] .gse-kan-col.gse-st-inop    .gse-kan-card,
html[data-theme="dark"] .gse-kan-col.gse-sq-needs    .gse-kan-card,
html[data-theme="dark"] .gse-kan-col.gse-sq-hold     .gse-kan-card,
html[data-theme="dark"] .gse-kan-col.gse-sq-review   .gse-kan-card,
html[data-theme="dark"] .gse-kan-col.gse-sq-maint    .gse-kan-card,
html[data-theme="dark"] .gse-kan-col.gse-sq-postmaint .gse-kan-card,
html[data-theme="dark"] .gse-kan-col.gse-sq-done     .gse-kan-card,
html[data-theme="dark"] .gse-kan-col .gse-kan-card.gse-date-danger,
html[data-theme="dark"] .section-tab:hover { border-color: var(--border-strong); }
html[data-theme="dark"] .cc-badge,
html[data-theme="dark"] .cc-audi-note,
html[data-theme="dark"] .urgency-yellow,
html[data-theme="dark"] .inv-confirm,
html[data-theme="dark"] .gse-st-maint,
html[data-theme="dark"] .gse-tag.date-warning,
html[data-theme="dark"] .gse-row.gse-date-warning,
html[data-theme="dark"] .gse-reg-row.gse-reg-soon,
html[data-theme="dark"] .gse-kan-cards.drop-over,
html[data-theme="dark"] .gse-kan-col.gse-st-maint   .gse-kan-card,
html[data-theme="dark"] .gse-kan-col.gse-sq-review   .gse-kan-card,
html[data-theme="dark"] .gse-kan-col.gse-sq-maint    .gse-kan-card,
html[data-theme="dark"] .gse-kan-col .gse-kan-card.gse-date-warning,
html[data-theme="dark"] .gse-kan-col.gse-st-maint,
html[data-theme="dark"] .gse-kan-col.gse-sq-review,
html[data-theme="dark"] .gse-kan-col.gse-sq-maint,
html[data-theme="dark"] .combobox-option.active,
html[data-theme="dark"] .combobox-option:hover,
html[data-theme="dark"] .gse-reg-row.gse-rate-marg,
html[data-theme="dark"] .mq-ov-yellow { background: var(--theme-warning-bg); }
html[data-theme="dark"] .cc-badge,
html[data-theme="dark"] .cc-audi-note strong,
html[data-theme="dark"] .cc-audi-note p,
html[data-theme="dark"] .urgency-yellow .countdown-time,
html[data-theme="dark"] .urgency-yellow .countdown-time span,
html[data-theme="dark"] .todo-card.urg-yellow .todo-countdown,
html[data-theme="dark"] .dh-hs-due-warn,
html[data-theme="dark"] .hs-num-legacy,
html[data-theme="dark"] .inv-due-label.urg-soon,
html[data-theme="dark"] .gse-soon em,
html[data-theme="dark"] .gse-st-maint,
html[data-theme="dark"] .gse-tag.date-warning,
html[data-theme="dark"] .gse-reg-soon .gse-reg-state,
html[data-theme="dark"] .gse-rate-marg  .gse-reg-state,
html[data-theme="dark"] .dh-todo.urg-yellow .dh-todo-countdown,
html[data-theme="dark"] .dh-inv-due.urg-soon,
html[data-theme="dark"] .mq-chip-squawk,
html[data-theme="dark"] .mq-bay-pick.busy .mq-bay-pick-state,
html[data-theme="dark"] .mq-needbay dd,
html[data-theme="dark"] .mq-tl-bar,
html[data-theme="dark"] .mq-bay-multi,
html[data-theme="dark"] .mq-ov-yellow .mq-ov-until { color: var(--theme-warning); }
html[data-theme="dark"] .cc-status-opt,
html[data-theme="dark"] .cc-yn-opts,
html[data-theme="dark"] .hs-radio,
html[data-theme="dark"] .hs-num,
html[data-theme="dark"] .dh-dnu-card { border: 1.5px solid var(--border-strong); }
html[data-theme="dark"] .cc-yn-opt:first-child span { border-right: 1.5px solid var(--border-strong); }
html[data-theme="dark"] .btn.nav-alert { color: var(--theme-danger) !important; }
html[data-theme="dark"] .cat-priority,
html[data-theme="dark"] .cat-qcc,
html[data-theme="dark"] .todo-type-chip.type-pmcs,
html[data-theme="dark"] .cat-close-desk,
html[data-theme="dark"] .dh-type-chip.type-pmcs { --c: var(--theme-danger); }
html[data-theme="dark"] .cat-gse,
html[data-theme="dark"] .todo-type-chip.type-todo,
html[data-theme="dark"] .cat-open-fbo-check,
html[data-theme="dark"] .dh-type-chip.type-todo { --c: var(--theme-warning); }
html[data-theme="dark"] .cat-admin,
html[data-theme="dark"] .cat-customer,
html[data-theme="dark"] .cat-fuel,
html[data-theme="dark"] .todo-type-chip.type-inventory,
html[data-theme="dark"] .cat-office,
html[data-theme="dark"] .cat-day-check,
html[data-theme="dark"] .cat-close-check,
html[data-theme="dark"] .dh-type-chip.type-inventory { --c: var(--theme-info); }
html[data-theme="dark"] .cat-elliott,
html[data-theme="dark"] .cat-rental,
html[data-theme="dark"] .cat-inflight,
html[data-theme="dark"] .cat-open-desk,
html[data-theme="dark"] .cat-close-fbo-check { --c: var(--theme-purple); }
html[data-theme="dark"] .cat-school,
html[data-theme="dark"] .cat-open-check { --c: var(--theme-success); }
html[data-theme="dark"] .action-at-mx,
html[data-theme="dark"] .not-flying-mx-btn,
html[data-theme="dark"] .at-mx-title,
html[data-theme="dark"] .at-mx-sub,
html[data-theme="dark"] .at-mx-count,
html[data-theme="dark"] .at-mx-card-id .tail-link:hover,
html[data-theme="dark"] .at-mx-card-meta,
html[data-theme="dark"] .todo-card--inventory .todo-complete:hover .todo-check,
html[data-theme="dark"] .hs-pill-busy,
html[data-theme="dark"] .gse-tag.parts,
html[data-theme="dark"] .gse-tag.howto,
html[data-theme="dark"] .cl-winter,
html[data-theme="dark"] .weather-banner-title,
html[data-theme="dark"] .weather-banner-title em,
html[data-theme="dark"] .weather-banner-sub { color: var(--theme-info); }
html[data-theme="dark"] .gse-soon { border: 1px dashed var(--border-strong); }
html[data-theme="dark"] .gse-row,
html[data-theme="dark"] .gse-reg-row { border-left: 3px solid var(--border-strong); }
html[data-theme="dark"] .gse-ev { border-top: 1px solid var(--border-strong); }
html[data-theme="dark"] .gse-tag.paused,
html[data-theme="dark"] .gse-kan-col.gse-sq-hold     .gse-kan-card,
html[data-theme="dark"] .gse-kan-col.gse-sq-hold { background: var(--theme-purple-bg); }
html[data-theme="dark"] .mq-chip-override { color: var(--theme-purple); }
html[data-theme="dark"] .mq-tl-bar.down { background: linear-gradient(135deg, #d9c79a, #c2a766); }

/* Filled actions need dark ink against the light gold accent. */
html[data-theme="dark"] :is(.btn-gold, .login-submit, .op-submit, .action-on-line, .cancel-reason.selected, .fuel-cta:not(.fuel-cta-secondary):not(.is-done), .fuel-seg-btn.on, .fuel-no-breaks.on, .dash-tab.active, .section-tab.active, .time-opt.active, .cl-tab.active, .hs-num:has(input:checked), .inv-aseg.active, .inv-confirm:hover) { color: #17191d; }
html[data-theme="dark"] :is(.btn-outline:hover, .action-in-hangar:hover, .todo-open-checklist:hover, .dh-todo-cl:hover, .dh-read-more, .inv-seg.active .inv-seg-n, .cl-tab.active .cl-tab-count) { color: #17191d; }
html[data-theme="dark"] .cancel-reason.selected .reason-hint { color: #303024; }
html[data-theme="dark"] :is(.res-card, .column, .stat-pill, .not-flying-card, .at-mx-card) { border-color: var(--border-strong); }
html[data-theme="dark"] :is(.mq-tl-bar, .mq-tl-bar.down) { color: #1a1400; }
html[data-theme="dark"] .fuel-lightbox img { background: #fff; }

/* Neutral selected segments remain dark surfaces. */
html[data-theme="dark"] .fuel-seg-btn.on:not([data-tone]) { color: var(--fg-strong); }
html[data-theme="dark"] #fuel-usage-root {
  --fu-grid: rgba(203,213,228,.16);
  --fu-s1: #72a9ee; --fu-s2: #f78d65; --fu-s3: #58d5a7; --fu-s4: #edb442;
  --fu-s5: #ef9bbb; --fu-s6: #78c982; --fu-s7: #b0a0ed; --fu-s8: #f27f7e;
}
/* Tutorial SVGs use theme tokens for their surfaces and labels. */
html[data-theme="dark"] .mq-tut-svg { background: var(--bg); border-radius: 12px; }
html[data-theme="dark"] { --bg-subtle: var(--bg-muted); }
html[data-theme="dark"] .fuel-tab.active { color: var(--fg-strong); }
html[data-theme="dark"] .fuel-seg-btn:hover { background: var(--bg); color: var(--fg-strong); }
html[data-theme="dark"] .fuel-seg-btn.on[data-tone="warn"] { background: var(--theme-warning); }
html[data-theme="dark"] .cl-actionbar { background: rgba(25,28,33,.98); }
html[data-theme="dark"] .fuel-skel { background: linear-gradient(90deg, var(--bg-muted) 0%, #353c47 50%, var(--bg-muted) 100%); background-size: 200% 100%; }
html[data-theme="dark"] :is(.section-tab.active, .cancel-reason.selected) { background: var(--gold); border-color: var(--gold); }
html[data-theme="dark"] .cl-item.checked .cl-check svg { stroke: #17191d; }
html[data-theme="dark"] .cl-tab.active.complete .cl-tab-count { color: #fff; }
/* State modifiers keep their meaning when a base component has an alert color. */
html[data-theme="dark"] .dh-dnu-flag.dh-dnu-flag-ok { color: var(--theme-success); }
html[data-theme="dark"] .fuel-adv[data-status="order_now"] { --tone: var(--theme-warning); }
/* Unknown category labels still get a readable neutral badge. */
html[data-theme="dark"] :is(.cat-badge, .todo-type-chip, .dh-type-chip) {
  color: var(--c, var(--fg-muted));
  background: var(--cbg, var(--bg-muted));
}

/* Form boundaries and keyboard focus remain distinct from dark surfaces. */
html[data-theme="dark"] :is(input:not([type="hidden"]), select, textarea, manual-email, .op-key, .cl-check, .todo-complete, .dh-todo-check) { border-color: var(--border-strong); }
html[data-theme="dark"] :is(button, a, input, select, textarea, summary, [role="button"], [role="tab"], [tabindex]):focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }
html[data-theme="dark"] .btn.nav-alert:hover { background: var(--theme-danger-bg); }
html[data-theme="dark"] .search-type:not(.note):not(.item),
html[data-theme="dark"] :is(.op-avatar, .op-chip-avatar) { color: #17191d; }
html[data-theme="dark"] .todo-complete.is-done { background: var(--theme-success); border-color: var(--theme-success); }
html[data-theme="dark"] .todo-complete.is-done .todo-check { color: #17191d; }
html[data-theme="dark"] .todo-complete.is-done:hover { background: var(--theme-success); border-color: var(--theme-success); }
/* Native row controls inherit the table's typography in both themes. */
.fuel-row-toggle {
  appearance: none; display: inline-flex; align-items: center;
  min-width: 24px; min-height: 32px; padding: 4px 0; border: 0;
  background: transparent; color: inherit; font: inherit; text-align: left;
  cursor: pointer; border-radius: 4px;
}
.fuel-row-toggle:hover { color: var(--gold-dark, #9A8145); text-decoration: underline; text-underline-offset: 3px; }
.fuel-row-toggle:focus-visible { outline: 3px solid var(--gold, #B79B58); outline-offset: 3px; }
/* The small slide indicators sit inside full-size pointer targets. */
.mq-tut-dot, .mq-tut-dot.on {
  appearance: none; width: 24px; height: 24px; padding: 0; border: 0;
  background: transparent; display: inline-flex; align-items: center;
  justify-content: center; flex: 0 0 24px;
}
.mq-tut-dot::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--fg-muted, #575760); }
.mq-tut-dot.on::before { background: var(--gold, #B79B58); }
.mq-tut-dot:focus-visible { outline: 3px solid var(--gold, #B79B58); outline-offset: 2px; }
@media (max-width: 600px) {
  .mq-tut-nav { flex-wrap: wrap; }
  .mq-tut-dots { order: 3; flex: 1 0 100%; flex-wrap: wrap; justify-content: center; }
}
/* Receipt viewers retain a dark backdrop in either application theme. */
.fuel-lightbox { background: rgba(9,11,14,.94); }
.fuel-lightbox-close.btn.btn-ghost {
  position: absolute; top: 24px; right: 24px; z-index: 2;
  min-width: 72px; min-height: 44px; padding: 12px 18px;
  background: #191c21; color: #f6f7fa; border-color: #b0bac8;
}
.fuel-lightbox-close.btn.btn-ghost:hover { background: #232830; color: #fff; border-color: #e1ce98; }
.fuel-lightbox-close:focus-visible { outline: 3px solid #e1ce98; outline-offset: 3px; }

button.mq-tl-bar { appearance: none; border: 0; font-family: inherit; text-align: left; cursor: pointer; }
#mq-modal-body { padding: 6px; margin-left: -6px; margin-right: -6px; }
/* Photo headers maintain contrast even over the brightest image pixels. */
html[data-theme="dark"] .hero-overlay { background: linear-gradient(90deg, rgba(10,10,10,.92), rgba(10,10,10,.82)); }
html[data-theme="dark"] .login-overlay { background: rgba(10,10,10,.82); }
html[data-theme="dark"] .footer-mark { color: #b7bfcb; }
/* Fade-in text otherwise passes through low-contrast intermediate colors. */
html[data-theme="dark"] #toast { opacity: 1; visibility: hidden; transition: transform .4s; }
html[data-theme="dark"] #toast.show { visibility: visible; }
/* Toolbars reflow at narrow widths rather than widening the document. */
.mq-subtabs, .mq-toolbar-actions { flex-wrap: wrap; max-width: 100%; min-width: 0; }
.mq-columns { min-width: 0; }
.mq-col, .mq-card, .mq-panel { min-width: 0; }
@media (max-width: 640px) {
  .mq-subtabs { border-radius: 16px; }
  .mq-subtab { flex: 1 1 auto; }
  .mq-toolbar-actions { gap: 10px; }
  .mq-updated { flex: 1 0 100%; }
}
@media (max-width: 640px) {
  nav.main .nav-actions { flex-wrap: wrap; overflow-x: visible; max-width: 100%; }
  .fuel-tabs { flex-wrap: wrap; overflow-x: visible; border-radius: 16px; }
  .fuel-tab { flex: 1 1 auto; }
  .gse-feed.gse-kanban { flex-direction: column; overflow-x: visible; }
  .gse-kan-col { flex: 0 0 auto; width: 100%; min-width: 0; }
  .modal :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, manual-email) { min-width: 0; max-width: 100%; }
}
/* Keep text and its surface in a passing contrast state during theme interactions. */
html[data-theme="dark"] :is(.btn, .dash-tab, .section-tab, .fuel-seg-btn, .cancel-reason, .time-opt, .hs-num, .fuel-tab, .cl-tab, .inv-aseg, .todo-complete, .dh-todo-check, .cl-check) { transition-property: transform, box-shadow; }
html[data-theme="dark"] .op-avatar.op-avatar-add { color: var(--gold); }
html[data-theme="dark"] .op-avatar.op-avatar-display { color: #fff; background: linear-gradient(150deg, #a92c29, #922020); }
html[data-theme="dark"] .op-circle-display .op-circle-name { color: var(--theme-danger); }