:root[data-theme="dark"] {
  color-scheme: dark;
  --nav: #091523;
  --blue: #5b93ff;
  --ink: #e6edf7;
  --muted: #9aabc2;
  --line: #2a3a50;
  --canvas: #0b121c;
  --surface: #111c2a;
  --surface-raised: #172435;
}

:root[data-theme="light"] { color-scheme: light; }

:root[data-theme="dark"] body,
:root[data-theme="dark"] .shell,
:root[data-theme="dark"] .workspace,
:root[data-theme="dark"] main {
  color: var(--ink);
  background: var(--canvas);
}

:root[data-theme="dark"] aside { background: var(--nav); }
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .metric,
:root[data-theme="dark"] .device,
:root[data-theme="dark"] .meldkamer-actions,
:root[data-theme="dark"] .fault-kpis > div,
:root[data-theme="dark"] .fault-chart-card,
:root[data-theme="dark"] .table-wrap,
:root[data-theme="dark"] dialog,
:root[data-theme="dark"] .secondary,
:root[data-theme="dark"] .icon-button {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}

:root[data-theme="dark"] .panel-head,
:root[data-theme="dark"] .panel-foot,
:root[data-theme="dark"] th,
:root[data-theme="dark"] .panel > header,
:root[data-theme="dark"] .panel > footer {
  color: var(--ink);
  background: var(--surface-raised);
  border-color: var(--line);
}

:root[data-theme="dark"] main [class*="-card"],
:root[data-theme="dark"] main [class*="-editor"],
:root[data-theme="dark"] main [class*="-meeting"],
:root[data-theme="dark"] main [class*="-history"],
:root[data-theme="dark"] main [class*="-day"],
:root[data-theme="dark"] main [class*="-details"],
:root[data-theme="dark"] main [class*="-block"],
:root[data-theme="dark"] main [class*="-stats"] {
  color: var(--ink);
  background-color: var(--surface);
  border-color: var(--line);
}

:root[data-theme="dark"] main details > summary,
:root[data-theme="dark"] main .panel-head,
:root[data-theme="dark"] main .project-planning-days-head,
:root[data-theme="dark"] main .workplan-table-head {
  color: var(--ink);
  background-color: var(--surface-raised);
}

:root[data-theme="dark"] main [style*="background:#fff"],
:root[data-theme="dark"] main [style*="background: #fff"],
:root[data-theme="dark"] main [style*="background:white"],
:root[data-theme="dark"] main [style*="background: white"] {
  background-color: var(--surface) !important;
  color: var(--ink);
  border-color: var(--line);
}

:root[data-theme="dark"] td,
:root[data-theme="dark"] th,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .metric,
:root[data-theme="dark"] .meldkamer-actions,
:root[data-theme="dark"] .fault-kpis > div,
:root[data-theme="dark"] .fault-chart-card {
  border-color: var(--line);
}

:root[data-theme="dark"] tbody tr:hover { background: #1a2a3d; }
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  color: var(--ink);
  background: #0d1724;
  border-color: #34465e;
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: #8496ae; }
:root[data-theme="dark"] select option { color: var(--ink); background: var(--surface); }
:root[data-theme="dark"] a { color: #83b0ff; }
:root[data-theme="dark"] .icon-button:hover,
:root[data-theme="dark"] .secondary:hover { background: #21334a; }
:root[data-theme="dark"] .theme-toggle { color: #ffd46a; }
:root[data-theme="dark"] dialog::backdrop { background: #020711bd; }
:root[data-theme="dark"] .login-screen { background: var(--canvas); }
:root[data-theme="dark"] .login-panel { color: var(--ink); background: var(--canvas); }

.theme-toggle { flex: 0 0 38px; }
.theme-toggle svg { width: 19px; height: 19px; }
.login-panel { position: relative; }
.login-theme-toggle { position: absolute; top: 22px; right: 24px; z-index: 2; }
@media (max-width: 850px) {
  .top-actions .theme-toggle { display: inline-flex !important; }
}

/* Improve contrast in work orders and their nested work-plan forms. */
:root[data-theme="dark"] {
  --surface-soft: #142131;
}
:root[data-theme="dark"] #dialog:has([data-safety]) .dialog-head,
:root[data-theme="dark"] #dialog:has([data-safety]) .dialog-actions {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}
:root[data-theme="dark"] #dialog:has([data-safety]) .safety-form,
:root[data-theme="dark"] #dialog:has([data-safety]) .project-workplan details,
:root[data-theme="dark"] #dialog:has([data-safety]) .workorder-extra,
:root[data-theme="dark"] #dialog:has([data-safety]) .workplan-table-block,
:root[data-theme="dark"] #dialog:has([data-safety]) .component-editor,
:root[data-theme="dark"] #dialog:has([data-safety]) .component-row,
:root[data-theme="dark"] #dialog:has([data-safety]) .component-history,
:root[data-theme="dark"] #dialog:has([data-safety]) .workplan-photo-upload,
:root[data-theme="dark"] #dialog:has([data-safety]) .workplan-drawing-upload,
:root[data-theme="dark"] #dialog:has([data-safety]) .workplan-part-picker,
:root[data-theme="dark"] #dialog:has([data-safety]) .workorder-navigation,
:root[data-theme="dark"] #dialog:has([data-safety]) .workorder-team-summary,
:root[data-theme="dark"] #dialog:has([data-safety]) .work-map-navigation,
:root[data-theme="dark"] #dialog:has([data-safety]) .toggle-field {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
  box-shadow: none;
}
:root[data-theme="dark"] #dialog:has([data-safety]) .project-workplan details > summary,
:root[data-theme="dark"] #dialog:has([data-safety]) .workorder-extra > summary,
:root[data-theme="dark"] #dialog:has([data-safety]) .workplan-table-head,
:root[data-theme="dark"] #dialog:has([data-safety]) .workplan-collapsible > summary,
:root[data-theme="dark"] #dialog:has([data-safety]) .component-history-head > div {
  color: var(--ink);
  background: var(--surface-raised);
  border-color: var(--line);
}
:root[data-theme="dark"] #dialog:has([data-safety]) .workplan-guidance,
:root[data-theme="dark"] #dialog:has([data-safety]) .workplan-photo-card,
:root[data-theme="dark"] #dialog:has([data-safety]) .workplan-drawing-card,
:root[data-theme="dark"] #dialog:has([data-safety]) .workplan-selected-part,
:root[data-theme="dark"] #dialog:has([data-safety]) .workorder-navigation .mechanic-address {
  color: var(--ink);
  background: var(--surface-raised);
  border-color: var(--line);
}
:root[data-theme="dark"] #dialog:has([data-safety]) :is(.form-section h3, .workplan-guidance strong, .work-map-navigation strong, .workorder-navigation > strong, .component-row h4, .workplan-table-head strong, .component-editor-head strong, .component-history h4, .workplan-part-picker strong, .form-grid label, .component-fields label) {
  color: var(--ink);
}
:root[data-theme="dark"] #dialog:has([data-safety]) :is(.workplan-guidance p, .workplan-photo-upload small, .workplan-drawing-upload small, .workplan-part-picker small, .component-part-picker small, .component-history small, .workorder-extra summary small) {
  color: var(--muted);
}
:root[data-theme="dark"] #dialog:has([data-safety]) .workplan-title button {
  color: #164d9b;
  background: #e6efff;
}
:root[data-theme="dark"] #dialog:has([data-safety]) .workorder-brand {
  color: #f5f8fc;
  background: #071523;
}
:root[data-theme="dark"] main :is(.mechanic-workorder-card, .mechanic-task, .mechanic-planning-summary, .project-planning-days, .project-planning-day) {
  color: var(--ink);
  background-color: var(--surface);
  border-color: var(--line);
}
:root[data-theme="dark"] main :is(.mechanic-workorder-card, .mechanic-task, .project-planning-days, .project-planning-day) :is(small, dt, .muted, .subtext) {
  color: var(--muted);
}

/* Keep secondary copy readable across every module, including components with
   their own light-mode colors hard-coded in the older screens. */
:root[data-theme="dark"] {
  --ink: #f1f5fb;
  --muted: #c1cee0;
  --line: #40536c;
  --surface-raised: #1c2b3d;
}
:root[data-theme="dark"] :is(small, .muted, .subtext, .helper, .hint, .description, .form-hint, .empty-state, .meta, time, dt, caption) {
  color: #c1cee0 !important;
}
:root[data-theme="dark"] :is(label, legend, th, .eyebrow, .section-label) {
  color: #e5edf8;
}
:root[data-theme="dark"] :is(input, textarea, select)::placeholder {
  color: #b5c4d8;
  opacity: 1;
}
:root[data-theme="dark"] :is(.status, .badge, .tag, .pill, .chip, [class*="status-"]) {
  text-shadow: 0 1px 1px #0005;
}
:root[data-theme="dark"] :is(.error, .danger-text, .text-danger, .form-error) {
  color: #ff9a9a !important;
}
:root[data-theme="dark"] :is(.warning, .text-warning) {
  color: #ffd27d !important;
}
:root[data-theme="dark"] :is(.success, .text-success) {
  color: #75e0b4 !important;
}
:root[data-theme="dark"] :is(.panel, .table-wrap, dialog, main [class*="-card"], main [class*="-block"], main [class*="-editor"]) :is(p, span, strong, b, em, li, td, th, label) {
  text-shadow: none;
}
:root[data-theme="dark"] :is(.panel, .table-wrap, dialog) :is(a:not(.primary), button:not(.primary):not(.danger)) {
  color: #c4d8ff;
}
:root[data-theme="dark"] :is(.panel, .table-wrap, dialog) :is(a:not(.primary), button:not(.primary):not(.danger)):hover {
  color: #e2edff;
}