/* LS Field appearance preview. Light mode remains the existing baseline. */
.field-appearance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 15px;
  border-top: 4px solid var(--sea);
}
.field-appearance-copy { display: flex; align-items: center; gap: 11px; min-width: 0; }
.field-appearance-copy > span:last-child { display: grid; gap: 2px; min-width: 0; }
.field-appearance-copy b { color: var(--navy); font-size: 15px; }
.field-appearance-copy small { color: var(--mut); font-size: 11.5px; line-height: 1.35; }
.field-appearance-icon {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border-radius: 12px; background: var(--bluebg); color: var(--navy);
  font-size: 23px; font-weight: 850;
}
.field-theme-choice {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
  border: 1px solid var(--line); border-radius: 11px; background: #e7eff4;
}
.field-theme-choice button {
  min-width: 70px; min-height: 40px; padding: 7px 11px; border: 0;
  border-radius: 8px; background: transparent; color: var(--mut);
  font: inherit; font-size: 12px; font-weight: 850; cursor: pointer;
}
.field-theme-choice button.on {
  background: var(--card); color: var(--navy); box-shadow: 0 2px 7px rgba(15,54,83,.15);
}

@media(max-width:430px) {
  .field-appearance { grid-template-columns: 1fr; align-items: stretch; }
  .field-theme-choice button { min-width: 0; }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --navy: #9cc8ff;
  --navy2: #315f97;
  --sea: #7db9ff;
  --bg: #0b111c;
  --card: #102033;
  --ink: #eef4fb;
  --mut: #b7c5d6;
  --line: #294b70;
  --ok: #70d89a;
  --okbg: #142e25;
  --warn: #f3bd61;
  --warnbg: #382b16;
  --bad: #ff8a86;
  --badbg: #3b1d22;
  --bluebg: #153b62;
  --soft-shadow: 0 8px 28px rgba(0,0,0,.24);
}
html[data-theme="dark"],
html[data-theme="dark"] body { background: #102033; color: var(--ink); }
html[data-theme="dark"] main {
  background: radial-gradient(circle at 92% 1%,rgba(68,135,196,.16),transparent 28%),
    linear-gradient(180deg,#0d1828 0,var(--bg) 38%,#0b111c 100%);
}
html[data-theme="dark"] header {
  color: var(--ink); background: linear-gradient(135deg,#102033 54%,#173452);
  border-bottom-color: var(--line); box-shadow: 0 3px 16px rgba(0,0,0,.28);
}
html[data-theme="dark"] .brand img { filter: invert(1) brightness(1.25); }
html[data-theme="dark"] header h1,
html[data-theme="dark"] header .sub { color: var(--ink); }
html[data-theme="dark"] header button,
html[data-theme="dark"] #netdot,
html[data-theme="dark"] header button.hchip {
  color: var(--ink); background: rgba(255,255,255,.07); border-color: var(--line);
}
html[data-theme="dark"] #netdot.on { color: var(--ok); background: var(--okbg); border-color: #2f6b4e; }
html[data-theme="dark"] :where(.card,.tile,.job-card,.list-card,.desktop-panel,.chatmsg,.notification-centre) {
  background: var(--card); color: var(--ink); border-color: var(--line);
}
html[data-theme="dark"] :where(h1,h2,h3,.ph-t,.tile b,.q .t,.qrow>div,.card-heading h2,
  .section-heading h2,.job-row-content strong,.desktop-panel-heading h2,.bridge-row strong,
  .field-appearance-copy b) { color: var(--ink); }
html[data-theme="dark"] :where(.sub,.muted,.tile small,.qrow small,.pagehead p,.ph-s,
  .job-row-content small,.bridge-row small,.field-appearance-copy small) { color: var(--mut); }
html[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=button]):not([type=submit]):not([type=reset]):not([type=color]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  color: var(--ink); background-color: #0d1a2a; border-color: var(--line);
  -webkit-text-fill-color: var(--ink);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #75879d; }
html[data-theme="dark"] input[type="search"] {
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--sea);
  background-color: #132942;
  border-color: #4f7fb2;
}
html[data-theme="dark"] input[type="search"]::placeholder {
  color: #d9e6f4;
  -webkit-text-fill-color: #d9e6f4;
  opacity: 1;
}
html[data-theme="dark"] input[type="search"]:focus {
  background-color: #173452;
  border-color: var(--sea);
  box-shadow: 0 0 0 4px rgba(125,185,255,.2);
}
html[data-theme="dark"] input[type="search"]::-webkit-search-cancel-button {
  filter: invert(88%) sepia(13%) saturate(464%) hue-rotate(173deg) brightness(101%);
  opacity: .9;
}
html[data-theme="dark"] :where(.btn.sub,.button-secondary,.button-quiet,.weather-refresh,.atttool) {
  color: var(--sea); background: var(--card); border-color: var(--line);
}
html[data-theme="dark"] :where(.job-row,.bridge-row,.notification-row) { color: var(--ink); background: var(--card); }
html[data-theme="dark"] :where(.job-row:hover,.tile:active,.attrow:hover) { background: #172c44; }

/* Keep Today readable in dark mode. The light theme hero uses --navy inside
   its gradient; in dark mode that token is intentionally a light blue accent,
   so the hero needs its own dark surface rather than inheriting that stop. */
html[data-theme="dark"] .landing-hero {
  background:
    radial-gradient(circle at 94% 3%,rgba(77,151,218,.28),transparent 34%),
    radial-gradient(circle at 7% 110%,rgba(49,118,166,.22),transparent 42%),
    linear-gradient(145deg,#102033,#173452 55%,#245b8f);
  border-color: #3a6895;
  box-shadow: 0 16px 36px rgba(0,0,0,.34);
}
html[data-theme="dark"] .landing-copy .eyebrow { color: #bcdcff; }
html[data-theme="dark"] .landing-copy p,
html[data-theme="dark"] .landing-actions small { color: #d9e6f4; }
html[data-theme="dark"] .landing-actions > button {
  background: rgba(8,20,34,.42);
  border-color: rgba(156,200,255,.38);
}
html[data-theme="dark"] .landing-actions > button:hover { background: rgba(23,52,82,.76); }
html[data-theme="dark"] .landing-actions > button:disabled { opacity: .76; }
html[data-theme="dark"] .landing-actions > #home-next.is-collapsed {
  background: rgba(8,20,34,.34);
  border-color: rgba(156,200,255,.3);
}

html[data-theme="dark"] .today-weather {
  background: linear-gradient(135deg,#102033 0,#132942 100%);
  border-color: #315b85;
  border-left-color: var(--sea);
}
html[data-theme="dark"] .weather-heading h2,
html[data-theme="dark"] .weather-metrics strong { color: var(--ink); }
html[data-theme="dark"] .weather-symbol {
  color: #ffd27a;
  background: #382b16;
  border-color: #705226;
}
html[data-theme="dark"] .weather-refresh { background: #0d1a2a; color: var(--sea); }

/* My Day keeps the production date controls and hourly schedule layout. Only
   its light-mode colour assumptions change so the same timeline stays legible. */
html[data-theme="dark"] .job-day-time { background: var(--card); border-color: var(--line); }
html[data-theme="dark"] .job-day-time-head { background: var(--card); border-bottom-color: var(--line); }
html[data-theme="dark"] .field-jobs-day .job-day-time-head b { color: var(--sea); }
html[data-theme="dark"] .job-day-controls input[type="date"] {
  color-scheme: dark;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink);
  background: #0d1a2a !important;
  border-color: #3a6895 !important;
}
html[data-theme="dark"] .field-day-date-nav .btn.sub,
html[data-theme="dark"] .field-day-refresh.btn.sub {
  color: var(--sea);
  background: #153b62;
  border-color: #3a6895;
}
html[data-theme="dark"] .field-day-add.btn {
  color: #fff;
  background: linear-gradient(135deg,#24578c,#315f97);
  border-color: #4f7fb2;
}
html[data-theme="dark"] .job-day-timeline {
  background: linear-gradient(180deg,#0d1a2a,#101f31);
}
html[data-theme="dark"] .job-day-canvas {
  border-left-color: #3a5f82;
  background: repeating-linear-gradient(to bottom,rgba(156,200,255,.16) 0,rgba(156,200,255,.16) 1px,transparent 1px,transparent 36px);
}
html[data-theme="dark"] .job-day-hour { border-top-color: rgba(156,200,255,.18); }
html[data-theme="dark"] .job-day-hour span { color: #b7c5d6; }
html[data-theme="dark"] .field-day-empty b { color: var(--sea); }
html[data-theme="dark"] .field-day-empty span { color: #b7c5d6; }
html[data-theme="dark"] .job-day-block {
  color: var(--ink);
  background: #173452;
  border-color: #3a6895;
  border-left-color: var(--sea);
  box-shadow: 0 3px 10px rgba(0,0,0,.28);
}
html[data-theme="dark"] .job-day-block small { color: #b7c5d6; }
html[data-theme="dark"] .job-day-block.current { background: #1b4166; border-left-color: #bcdcff; }
html[data-theme="dark"] .job-day-block.activity { color: #ffd27a; background: #382b16; border-color: #705226; }
html[data-theme="dark"] .job-day-office-note {
  color: #b7c5d6;
  background: #102033;
  border-top-color: #315b85;
}

/* The in-job screen keeps its production launchpad, readiness, workflow and
   tab layout. Replace only the light-only surfaces that otherwise leave pale
   blue text on white when the dark tokens are active. */
html[data-theme="dark"] .jhead { background: var(--card); border-color: var(--line); }
html[data-theme="dark"] .jhead .jh-navy {
  background:
    radial-gradient(circle at 100% 0,rgba(125,185,255,.2),transparent 40%),
    linear-gradient(135deg,#102033,#173452 62%,#24578c);
}
html[data-theme="dark"] .jhead .goldln { color: #ffd27a; }
html[data-theme="dark"] .jtabs.job-tabs {
  background: linear-gradient(180deg,#173452,#102033);
  border-color: #315b85;
}
html[data-theme="dark"] .job-tabs .jtab { color: #d9e6f4; border-right-color: rgba(156,200,255,.22); }
html[data-theme="dark"] .job-tabs .jtab.on {
  color: #fff;
  background: #24578c;
  box-shadow: inset 0 -3px 0 #7db9ff,inset 0 0 0 1px #4f7fb2;
}
html[data-theme="dark"] .job-tabs .jtab.lock { color: #8fa3b9; background: rgba(0,0,0,.16); }
html[data-theme="dark"] .job-start-cockpit { background: var(--card); border-color: var(--sea); }
html[data-theme="dark"] .job-start-top,
html[data-theme="dark"] .job-start-foot {
  background: #102033;
  border-color: var(--line);
}
html[data-theme="dark"] .job-start-kicker,
html[data-theme="dark"] .job-start-top h2,
html[data-theme="dark"] .job-brief-head > b,
html[data-theme="dark"] .job-contact-mini > b,
html[data-theme="dark"] .job-stock-mini > b,
html[data-theme="dark"] .job-brief > h3,
html[data-theme="dark"] .job-ready-step b,
html[data-theme="dark"] .job-workflow-step.active b,
html[data-theme="dark"] .job-next-action-copy b,
html[data-theme="dark"] .job-blockers > strong,
html[data-theme="dark"] .job-box-location strong,
html[data-theme="dark"] .job-detail-drawer > summary { color: var(--ink); }
html[data-theme="dark"] .job-start-top p,
html[data-theme="dark"] .job-ready-step small,
html[data-theme="dark"] .job-workflow-step,
html[data-theme="dark"] .job-next-action-copy small,
html[data-theme="dark"] .job-box-location small,
html[data-theme="dark"] .job-start-foot > span { color: var(--mut); }
html[data-theme="dark"] .job-start-count { color: var(--sea); background: #153b62; }
html[data-theme="dark"] .job-ready-strip,
html[data-theme="dark"] .job-prepare-row { background: var(--line); border-color: var(--line); }
html[data-theme="dark"] .job-ready-step,
html[data-theme="dark"] .job-stock-mini,
html[data-theme="dark"] .job-contact-mini { background: #0d1a2a; }
html[data-theme="dark"] .job-ready-step > i {
  color: var(--mut);
  background: #173452;
}
html[data-theme="dark"] .job-workflow { background: #0f1e30; border-color: var(--line); }
html[data-theme="dark"] .job-workflow-step > span { background: #0f1e30; }
html[data-theme="dark"] .job-workflow-step:not(:last-child)::after { background: #3a5f82; }
html[data-theme="dark"] .job-workflow-step > i {
  color: var(--mut);
  background: #102033;
  border-color: #52718f;
}
html[data-theme="dark"] .job-workflow-step.active > i {
  color: #fff;
  background: #24578c;
  border-color: var(--sea);
}
html[data-theme="dark"] .job-next-action {
  background: linear-gradient(135deg,#102b43,#102033 72%);
  border-color: #3a6895;
  border-left-color: var(--sea);
}
html[data-theme="dark"] .job-next-action.is-warning {
  background: linear-gradient(135deg,#382b16,#241f18 72%);
  border-color: #705226;
  border-left-color: var(--warn);
}
html[data-theme="dark"] .job-next-action.is-warning .job-next-action-copy b { color: #ffd27a; }
html[data-theme="dark"] .job-start-cockpit .btn:not(.sub) {
  color: #fff;
  background: linear-gradient(135deg,#1f4d7c,#294f7d);
  border-color: #416d99;
}
html[data-theme="dark"] .job-start-cockpit .btn.sub {
  color: var(--sea);
  background: #0d1a2a;
  border-color: #3a6895;
}
html[data-theme="dark"] .job-start-cockpit .job-navigate:not(.is-disabled) {
  color: #fff;
  background: linear-gradient(135deg,#28734d,#347e56);
  border-color: #4a9a6c;
}
html[data-theme="dark"] .job-brief-full,
html[data-theme="dark"] .job-stock-lines li {
  color: var(--ink);
  background: #0d1a2a;
}
html[data-theme="dark"] .job-blocker { color: #ffd27a; background: var(--warnbg); }
html[data-theme="dark"] .job-blocker.advisory { color: #d9e6f4; background: #173452; }
html[data-theme="dark"] .job-box-location {
  color: var(--sea);
  background: #102b43;
  border-color: #3a6895;
}
html[data-theme="dark"] .job-box-location button { color: var(--sea); background: #0d1a2a; border-color: #3a6895; }
html[data-theme="dark"] .job-detail-drawer-body { border-color: var(--line); }

html[data-theme="dark"] .field-theme-choice { background: #0d1a2a; border-color: var(--line); }
html[data-theme="dark"] .field-theme-choice button.on { background: #315f97; color: #fff; }
html[data-theme="dark"] .field-appearance-icon { background: #153b62; color: var(--sea); }
html[data-theme="dark"] footer.nav {
  background: #102033; border-top-color: var(--line); box-shadow: 0 -5px 20px rgba(0,0,0,.28);
}
html[data-theme="dark"] footer.nav button { color: #93a8bf; }
html[data-theme="dark"] footer.nav button.on { color: #fff; background: #24578c; box-shadow: inset 0 3px 0 #7db9ff; }
html[data-theme="dark"] dialog { background: linear-gradient(180deg,#102033,#0d1a2a); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] :focus-visible { outline-color: var(--sea); }

/* Shared controls and component shells. These selectors deliberately match or
   exceed the specificity of the production light rules in index.html. */
html[data-theme="dark"] .btn.sub,
html[data-theme="dark"] .button-secondary,
html[data-theme="dark"] .button-quiet,
html[data-theme="dark"] .atttool,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .seg button,
html[data-theme="dark"] .task-update-toggle,
html[data-theme="dark"] .task-photo-pick label {
  color: var(--sea); background: #132942; border-color: #4f7fb2;
}
html[data-theme="dark"] .btn.sub:disabled,
html[data-theme="dark"] .button-secondary:disabled { color: #9fb0c3; background: #17283a; opacity: .72; }
html[data-theme="dark"] .seg button.selY { color: var(--ok); background: var(--okbg); border-color: #39765a; }
html[data-theme="dark"] .seg button.selN { color: var(--bad); background: var(--badbg); border-color: #86464b; }
html[data-theme="dark"] .seg button.selNA { color: var(--mut); background: #18283a; border-color: #526b84; }
html[data-theme="dark"] .chip.on { color: #fff; background: #315f97; border-color: var(--sea); }

html[data-theme="dark"] .close-day-prompt,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .field-login-card,
html[data-theme="dark"] .qr-panel,
html[data-theme="dark"] .qr-success,
html[data-theme="dark"] .attfolder,
html[data-theme="dark"] .job-photo-row,
html[data-theme="dark"] .task-update-card,
html[data-theme="dark"] .job-box-contents,
html[data-theme="dark"] .job-box-takeout,
html[data-theme="dark"] .stock-search-result,
html[data-theme="dark"] .stock-card-location,
html[data-theme="dark"] .stock-card-fact,
html[data-theme="dark"] .stock-card-photo-empty,
html[data-theme="dark"] .stock-card-history-row,
html[data-theme="dark"] .stock-card-job {
  color: var(--ink); background: var(--card); border-color: var(--line);
}
html[data-theme="dark"] .stock-card-storage,
html[data-theme="dark"] .stock-card-photo-tools,
html[data-theme="dark"] .stock-card-location-editor { color: var(--ink); background: #102033; border-color: var(--line); }
html[data-theme="dark"] .stock-card-storage-head b,
html[data-theme="dark"] .stock-card-storage-row>span b,
html[data-theme="dark"] .stock-card-subhead,
html[data-theme="dark"] .stock-card-history-head h3,
html[data-theme="dark"] .stock-card-history-item { color: var(--ink); }
html[data-theme="dark"] .stock-card-history-row.in .stock-card-history-top strong { color: #83c8a3; }
html[data-theme="dark"] .stock-card-history-row.out .stock-card-history-top strong { color: #ffd27a; }
html[data-theme="dark"] .close-day-prompt h2,
html[data-theme="dark"] .empty-state h2,
html[data-theme="dark"] .landing-section-title h2,
html[data-theme="dark"] .field-login-card h1 { color: var(--ink); }

/* Segmented navigation stays blue-charcoal in both selected and unselected
   states, with the selected tab using a stronger blue rather than white. */
html[data-theme="dark"] .job-chat-subnav,
html[data-theme="dark"] .field-schedule-tabs,
html[data-theme="dark"] .job-box-source-tabs,
html[data-theme="dark"] .stock-card-tabs,
html[data-theme="dark"] .stock-control-switch,
html[data-theme="dark"] .hseq-docs-switch,
html[data-theme="dark"] .mobile-evidence-nav {
  background: #0d1a2a; border-color: var(--line);
}
html[data-theme="dark"] .job-chat-subnav button,
html[data-theme="dark"] .field-schedule-tabs button,
html[data-theme="dark"] .job-box-source-tabs button,
html[data-theme="dark"] .stock-card-tabs button,
html[data-theme="dark"] .stock-control-switch button,
html[data-theme="dark"] .hseq-docs-switch button,
html[data-theme="dark"] .mobile-evidence-nav button { color: var(--mut); background: transparent; }
html[data-theme="dark"] .job-chat-subnav button.on,
html[data-theme="dark"] .field-schedule-tabs button.on,
html[data-theme="dark"] .job-box-source-tabs button.is-active,
html[data-theme="dark"] .stock-card-tabs button[aria-selected="true"],
html[data-theme="dark"] .stock-control-switch button.on,
html[data-theme="dark"] .hseq-docs-switch button.on,
html[data-theme="dark"] .mobile-evidence-nav button.on {
  color: #fff; background: #315f97; box-shadow: inset 0 0 0 1px #4f7fb2;
}
html[data-theme="dark"] .stock-control-icon,
html[data-theme="dark"] .hseq-docs-icon { color: var(--sea); background: #153b62; }
html[data-theme="dark"] .stock-control-switch button.on .stock-control-icon,
html[data-theme="dark"] .hseq-docs-switch button.on .hseq-docs-icon { color: #fff; background: #24578c; }

/* Chat and attachment empty states. */
html[data-theme="dark"] .chatlog {
  background: linear-gradient(180deg,#0d1a2a,#102033); border-color: var(--line);
}
html[data-theme="dark"] .chatempty { color: var(--mut); background: #102033; border-color: #526b84; }
html[data-theme="dark"] .chatcomp { background: rgba(16,32,51,.96); border-color: var(--line); }
html[data-theme="dark"] .chatmsg { color: var(--ink); background: #132942; border-color: var(--line); }
html[data-theme="dark"] .chatmsg.mine { color: #fff; background: linear-gradient(135deg,#24578c,#315f97); }
html[data-theme="dark"] .attfolderbody { border-top-color: var(--line); }
html[data-theme="dark"] .attic,
html[data-theme="dark"] .attrow img { background: #17283a; border-color: var(--line); }

/* Today, scheduling and task dialogs. */
html[data-theme="dark"] .field-schedule-close,
html[data-theme="dark"] .field-report-close,
html[data-theme="dark"] .job-box-inline-close { color: var(--sea); background: #153b62; }
html[data-theme="dark"] .field-schedule-result { color: var(--ink); background: #102033; border-color: var(--line); }
html[data-theme="dark"] .field-schedule-result:hover { background: #172c44; }
html[data-theme="dark"] .field-schedule-result > i,
html[data-theme="dark"] .field-schedule-selected,
html[data-theme="dark"] .field-schedule-edit-job,
html[data-theme="dark"] .task-detail-audit,
html[data-theme="dark"] .task-update-editor,
html[data-theme="dark"] .field-extra-note { background: #132942; border-color: #3a6895; }
html[data-theme="dark"] .field-schedule-selected button { color: var(--sea); background: #0d1a2a; border-color: #4f7fb2; }
html[data-theme="dark"] .field-schedule-actions,
html[data-theme="dark"] .task-detail-actions { background: #102033; border-color: var(--line); }

/* Photos, job stock and reports. */
html[data-theme="dark"] .job-photo-purpose-tag { color: var(--sea); background: #153b62; }
html[data-theme="dark"] .job-photo-remove { color: var(--bad); background: var(--badbg); }
html[data-theme="dark"] .job-stock-ready-score,
html[data-theme="dark"] .field-report-readiness-head > span { color: var(--sea); background: #153b62; }
html[data-theme="dark"] .job-stock-ready-item.advisory > i { color: var(--mut); background: #17283a; }
html[data-theme="dark"] .field-report-readiness-grid button {
  color: var(--ink); background: #102033; border-color: var(--line);
}
html[data-theme="dark"] .field-report-readiness-grid button:hover { background: #172c44; }
html[data-theme="dark"] .field-report-readiness-grid button b { color: var(--sea); }
html[data-theme="dark"] .field-report-dialog-head {
  background: linear-gradient(180deg,#132942,#102033); border-color: var(--line);
}
html[data-theme="dark"] .field-report-dialog-actions { background: #102033; border-color: var(--line); }
html[data-theme="dark"] .jobparts-order[open] > .jobparts-order-summary,
html[data-theme="dark"] .jobparts-foot,
html[data-theme="dark"] .field-actions-all,
html[data-theme="dark"] .field-actions-more,
html[data-theme="dark"] .job-box-contents-head,
html[data-theme="dark"] .job-box-contents-source { color: var(--mut); background: #132942; border-color: var(--line); }
html[data-theme="dark"] .job-box-predictive-list,
html[data-theme="dark"] .job-box-takeout-back { color: var(--ink); background: #0d1a2a; border-color: var(--line); }
html[data-theme="dark"] .job-box-predictive-row:has(input:checked) { background: #153b62; }

/* Licences and quote/photo workflows. */
html[data-theme="dark"] .lic-hero { background: #132942; border-color: #3a6895; border-left-color: var(--sea); }
html[data-theme="dark"] .lic-hero h1,
html[data-theme="dark"] .lic-form-head b,
html[data-theme="dark"] .lic-fields label > span,
html[data-theme="dark"] .lic-photo b { color: var(--ink); }
html[data-theme="dark"] .lic-form-head > span,
html[data-theme="dark"] .lic-photo-placeholder { color: var(--sea); background: #153b62; }
html[data-theme="dark"] .lic-photo,
html[data-theme="dark"] .lic-private-note { color: var(--mut); background: #0d1a2a; border-color: var(--line); }
html[data-theme="dark"] .lic-photo.has { background: #132942; border-color: #4f7fb2; }
html[data-theme="dark"] .lic-photo button { color: var(--bad); background: var(--badbg); border-color: #86464b; }
html[data-theme="dark"] .qr-progress button,
html[data-theme="dark"] .qr-choice,
html[data-theme="dark"] .qr-photo,
html[data-theme="dark"] .qr-extra label { color: var(--mut); background: #102033; border-color: var(--line); }
html[data-theme="dark"] .qr-progress button b,
html[data-theme="dark"] .qr-camera { color: var(--sea); background: #153b62; }
html[data-theme="dark"] .qr-progress button.on,
html[data-theme="dark"] .qr-choice.on,
html[data-theme="dark"] .qr-photo.has,
html[data-theme="dark"] .qr-review,
html[data-theme="dark"] .qr-photo-note { background: #132942; border-color: #3a6895; }
html[data-theme="dark"] .qr-save,
html[data-theme="dark"] .qr-back { color: var(--sea); background: #0d1a2a; border-color: #4f7fb2; }

/* Stock-card and completed-delivery surfaces. */
html[data-theme="dark"] .stock-card-balance,
html[data-theme="dark"] .stock-card-balance.empty { background: #132942; border-color: var(--line); }
html[data-theme="dark"] .stock-card-empty { color: var(--mut); background: #102033; border-color: #526b84; }
html[data-theme="dark"] .stock-card-photos img { background: #0d1a2a; border-color: var(--line); }
html[data-theme="dark"] .stock-card-head .btn { color: var(--sea); background: #102033; border-color: #4f7fb2; }
html[data-theme="dark"] .delivery-complete-result { background: linear-gradient(180deg,#142e25,#102033); }
html[data-theme="dark"] .delivery-complete-result h2,
html[data-theme="dark"] .delivery-complete-result p,
html[data-theme="dark"] .delivery-complete-person { color: var(--ink) !important; }
html[data-theme="dark"] .delivery-complete-destination { color: var(--mut); background: #132942; }

/* Late production rules cover the remaining route-specific workbenches. Keep
   these here so desktop/media variants cannot reintroduce light surfaces. */
html[data-theme="dark"] #syncbtn,
html[data-theme="dark"] header #syncbtn { color: var(--sea); background: #132942; border-color: #4f7fb2; }
html[data-theme="dark"] .office-update,
html[data-theme="dark"] .main > .center,
html[data-theme="dark"] main > .center,
html[data-theme="dark"] .notification-centre,
html[data-theme="dark"] button.notification-row,
html[data-theme="dark"] .dictation-button,
html[data-theme="dark"] .job-box-finder-row,
html[data-theme="dark"] .day-close-issue,
html[data-theme="dark"] .tomorrow-job-option,
html[data-theme="dark"] .check-option,
html[data-theme="dark"] .asset-passport-file {
  color: var(--ink); background: #102033; border-color: var(--line);
}
html[data-theme="dark"] .office-update { background: #132942; }
html[data-theme="dark"] .jtabs.section-tabs .jtab.on,
html[data-theme="dark"] .jtab.on,
html[data-theme="dark"] .jtab.on:hover {
  color: #fff; background: #315f97; box-shadow: inset 0 -3px 0 var(--sea);
}
html[data-theme="dark"] .job-team-todo-check,
html[data-theme="dark"] .field-action-tick,
html[data-theme="dark"] .job-box-select-tools button,
html[data-theme="dark"] .job-note-pin { color: var(--sea); background: #132942; border-color: #4f7fb2; }
html[data-theme="dark"] .job-team-todo-row.done .job-team-todo-check { color: #102033; background: var(--ok); border-color: var(--ok); }

html[data-theme="dark"] .job-active-time,
html[data-theme="dark"] .job-context-row,
html[data-theme="dark"] .job-box-empty-row,
html[data-theme="dark"] .job-box-match-item,
html[data-theme="dark"] .field-report-ai-off,
html[data-theme="dark"] .field-report-summary textarea[readonly],
html[data-theme="dark"] .field-report-claim textarea[readonly],
html[data-theme="dark"] .task-kind-control,
html[data-theme="dark"] dialog.task-detail-dialog {
  color: var(--ink); background: #102033; border-color: var(--line);
}
html[data-theme="dark"] .job-box-empty-row.has-error { background: var(--badbg); border-color: #86464b; }
html[data-theme="dark"] .job-note-history-wrap.pinned,
html[data-theme="dark"] .job-note-pin.on,
html[data-theme="dark"] .field-report-status.is-rejected,
html[data-theme="dark"] .field-report-missing,
html[data-theme="dark"] .jobparts-status.is-part { background: var(--warnbg); color: var(--warn); }
html[data-theme="dark"] .jobparts-status.is-cancelled { background: var(--badbg); color: var(--bad); }
html[data-theme="dark"] .jobparts-status.is-removed { background: #17283a; color: var(--mut); }

/* Create-work, fuel receipt and other operational entry routes. */
html[data-theme="dark"] .fuel-photo,
html[data-theme="dark"] .fuel-xero-boundary,
html[data-theme="dark"] .work-choice,
html[data-theme="dark"] .work-safety-note,
html[data-theme="dark"] .work-directory-row,
html[data-theme="dark"] .work-no-match,
html[data-theme="dark"] .work-enquiry-link,
html[data-theme="dark"] .work-predict-note,
html[data-theme="dark"] .work-predict-chips > button,
html[data-theme="dark"] .work-scope-suggestions,
html[data-theme="dark"] .work-contact-suggestions,
html[data-theme="dark"] .work-scope-suggestions > button,
html[data-theme="dark"] .work-contact-suggestions > button,
html[data-theme="dark"] .work-filled-card,
html[data-theme="dark"] .work-decision,
html[data-theme="dark"] .work-decision > button,
html[data-theme="dark"] .work-new-contact,
html[data-theme="dark"] .work-new-contact-fields {
  color: var(--ink); background: #102033; border-color: var(--line);
}
html[data-theme="dark"] .work-safety-note,
html[data-theme="dark"] .work-predict-note,
html[data-theme="dark"] .work-filled-card,
html[data-theme="dark"] .work-decision > button.on,
html[data-theme="dark"] .work-new-contact.on { background: #132942; border-color: #3a6895; }
html[data-theme="dark"] .fuel-receipt-head > span { color: #ffd27a; background: var(--warnbg); }
html[data-theme="dark"] .work-state.amber,
html[data-theme="dark"] .work-urgency-hint > button,
html[data-theme="dark"] .work-card-note,
html[data-theme="dark"] .work-client-fallback { color: var(--warn); background: var(--warnbg); border-color: #705226; }
html[data-theme="dark"] .work-state.bad { color: var(--bad); background: var(--badbg); }

/* HSEQ forms and saved-draft workbench. */
html[data-theme="dark"] .form-workbench,
html[data-theme="dark"] .form-prefill-source,
html[data-theme="dark"] .form-prefill-review,
html[data-theme="dark"] .saved-form-row,
html[data-theme="dark"] .form-draft-dock {
  color: var(--ink); background: #102033; border-color: var(--line);
}
html[data-theme="dark"] .form-workbench { background: linear-gradient(135deg,#132942,#102033); }
html[data-theme="dark"] .form-prefill-photo button { color: var(--bad); background: var(--badbg); border-color: #86464b; }
html[data-theme="dark"] .form-handover { color: var(--warn); background: var(--warnbg); }

/* Domestic installation tests keep their structure while adopting dark cards. */
html[data-theme="dark"] .domestic-test-step[open] > summary,
html[data-theme="dark"] .domestic-check-grid label,
html[data-theme="dark"] .domestic-record,
html[data-theme="dark"] .domestic-declaration,
html[data-theme="dark"] .domestic-advice-card,
html[data-theme="dark"] .domestic-switchboard-scan,
html[data-theme="dark"] .domestic-switchboard-empty,
html[data-theme="dark"] .domestic-switchboard-summary,
html[data-theme="dark"] .domestic-switchboard-board,
html[data-theme="dark"] .domestic-switchboard-row,
html[data-theme="dark"] .domestic-switchboard-row[open] > summary,
html[data-theme="dark"] .domestic-switchboard-evidence,
html[data-theme="dark"] .domestic-switchboard-build {
  color: var(--ink); background: #102033; border-color: var(--line);
}
html[data-theme="dark"] .domestic-switchboard-scan { background: linear-gradient(135deg,#132942,#102033); }
html[data-theme="dark"] .domestic-fixed { background: #132942; }
html[data-theme="dark"] .domestic-fixed.warn,
html[data-theme="dark"] .domestic-switchboard-photo-state,
html[data-theme="dark"] .domestic-switchboard-warnings { color: var(--warn); background: var(--warnbg); }
html[data-theme="dark"] .domestic-loop-status.bad { color: var(--bad); background: var(--badbg); }

/* Switch-ON stages and warning panels. */
html[data-theme="dark"] .so-progress,
html[data-theme="dark"] .so-stage,
html[data-theme="dark"] .so-stage-body,
html[data-theme="dark"] .so-risk-followup {
  color: var(--ink); background: #102033; border-color: var(--line);
}
html[data-theme="dark"] .so-stage[open] > summary,
html[data-theme="dark"] .so-stage-no,
html[data-theme="dark"] .so-inline-head > span { background: #153b62; color: var(--sea); }
html[data-theme="dark"] .so-question-card .q.flag,
html[data-theme="dark"] .so-ai-inline,
html[data-theme="dark"] .so-ai-inline > span { background: var(--warnbg); border-color: #705226; }
html[data-theme="dark"] .so-ai-inline b,
html[data-theme="dark"] .so-ai-inline small { color: #ffd27a; }
html[data-theme="dark"] .so-ai-inline button,
html[data-theme="dark"] .switchon-skip-row .btn { color: var(--warn); background: #241f18; border-color: #705226; }
html[data-theme="dark"] .switchon-skip-card { background: linear-gradient(135deg,#382b16,#241f18 70%); }

/* Semantic alerts need matching dark surfaces, not pale light-theme fills. */
html[data-theme="dark"] .alert.bad,
html[data-theme="dark"] .amsa-check.not-in-order { color: var(--bad); background: var(--badbg); border-color: #86464b; }
html[data-theme="dark"] .alert.warnv,
html[data-theme="dark"] .day-close-exception-summary,
html[data-theme="dark"] .day-close-reason { color: var(--warn); background: var(--warnbg); border-color: #705226; }

/* Evidence and generated documents keep a paper-white canvas. */
html[data-theme="dark"] :where(canvas.sig,.docbody,.field-report-preview-frame,.pdf-page) {
  color-scheme: light; background: #fff !important; color: #14181f;
}