/* Central device theme. Modules provide only their accent; neutral surfaces live here. */
html[data-theme="dark"] {
  --ui-admin-canvas: #171b21;
  --ui-admin-surface: #222830;
  --ui-admin-ink: #edf0f4;
  --ui-admin-muted: #b5bdc7;
  --ui-admin-line: #3c4653;
  --ui-admin-surface-muted: #29313b;
  --ui-ink: #edf3f1;
  --ui-muted: #aebbb6;
  --ui-line: #3b4944;
  --ui-border-strong: #53635d;
  --ui-surface: #202a27;
  --ui-surface-muted: #28332f;
  --ui-header-surface: var(--ui-surface);
  --ui-header-control: var(--ui-surface-muted);
  --ui-header-hover: #35443e;
  --ui-header-ink: var(--ui-ink);
  --ui-header-muted: var(--ui-muted);
  --ui-header-line: var(--ui-border-strong);
  --ui-canvas: #151d1a;
  --ui-page-backdrop: #111714;
  --ui-shadow: 0 12px 30px rgba(0, 0, 0, .28);
  --ui-warning-text: #f0c56e;
  --ui-success-contrast: #72d1aa;
  --ui-success-text: #72d1aa;
  --ui-danger-text: #f3a09a;
  --ui-warning-contrast: #f2c96f;
  --ui-danger-contrast: #f3a09a;
  --ui-info-contrast: #8fc8f4;
  --ink: var(--ui-ink);
  --muted: var(--ui-muted);
  --line: var(--ui-line);
  --paper: var(--ui-surface);
  --canvas: #151d1a;
  --background: #151d1a;
  --bg: #151d1a;
  --surface: var(--ui-surface);
  --card: var(--ui-surface);
  --app-black: var(--ui-ink);
  --app-text: var(--ui-ink);
  --app-muted: var(--ui-muted);
  --app-line: var(--ui-line);
  --app-bg: #151d1a;
  --app-card: var(--ui-surface);
  --ci-text: var(--ui-ink);
  --ci-muted: var(--ui-muted);
  --ci-border: var(--ui-line);
  --ci-surface: var(--ui-surface);
  --ci-surface-soft: var(--ui-surface-muted);
  --ci-canvas: #151d1a;
  background: #111714;
  color-scheme: dark;
}

html[data-theme="dark"] .ui-page,
html[data-theme="dark"] .ui-page.backend-body,
html[data-theme="dark"] .ui-page .backend-shell {
  color: var(--ui-ink);
  background: var(--canvas) !important;
}

/* Module styles are loaded after the platform assets. Keep the outer work area
   on the central canvas even when a legacy module still hard-codes a light shell. */
html[data-theme="dark"] body.ui-page .app-shell,
html[data-theme="dark"] body.ui-page .backend-shell,
html[data-theme="dark"] body.ui-page .status-board-shell {
  color: var(--ui-ink);
  background: var(--ui-canvas) !important;
}

html[data-theme="dark"] body.ui-page :where(
  .ui-card, .ui-quick-card, .nav-card, .auth-card, .backend-stat, .office-form,
  .system-nav, .profile-card, .password-card, .module-empty, .site-picker,
  .site-picker-selected, .task-card, .task-dialog, .task-detail, .task-form,
  .order-card, .order-detail, .order-form, .site-card, .vehicle-card,
  .repair-form, .debt-balance-card, .debt-form, .document-card, .documents-card,
  .wiki-reader, .wiki-content, .wiki-editor, .wiki-drawer, .calculator-shell,
  .calc-card, .card, .office-card, .backend-table-wrap, .report-section,
  .editor-sites, .activity-editor, .report-card, .quick-site, .absence-overview,
  .timekeeping-summary > div, .readiness-card, .readiness-actions, .status-person,
  .status-board-metrics > span, .status-board-empty, dialog,
  .app-install-card, .portal-confirmation, .push-control, .mail-settings-form,
  .user-card, .credential-panel dl div, .report-weekday-grid label, .vehicle-push-option,
  .task-edit-form, .task-edit-form > header, .task-detail header, .task-reassign-panel,
  .task-edit-shell, .site-register-card, .documents-admin-nav, .payroll-status,
  .employee-picker, .document-upload-card, .document-admin-list > article,
  .payroll-year, .payroll-month, .employee-document, .general-documents,
  .calculator-value, .calc-value, .employee-card,
  .kiosk-notice, .kiosk-admin-card, .order-form fieldset, .detail-card, .history-card,
  .order-meta-fields, .wiki-welcome, .wiki-article, .wiki-overview, .wiki-pdf-dialog,
  .wiki-search-results, .wiki-editor-form, .wiki-versions, .wiki-preview-pane,
  .wiki-block-menu, .wiki-table-wrap, .quantity-stepper input, .advanced-settings,
  .type-toggle, .img, .aside .note, .container, .control, details, .alt, .metric,
  .withdrawal-entry-form, .vehicle-settings > summary, .site-open-picker,
  .site-overview-tools, .site-card-counts > span, .site-overview-empty,
  .site-add-dialog, .site-list-panel, .site-add, .site-remove-panel,
  .absence-admin-card, .absence-form, .absence-card, .billing-site,
  .welcome, .archive-year, .archive-month,
  .office-activity, .backend-nav, .date-switch a, .reporting-table-wrap,
  .backup-information > div, .backup-list-panel, .notification-sheet,
  .app-menu, .report-history-card, .reporting-stats > div, .reporting-panel,
  .special-machine-row > select, .site-hero, .activity-card
) {
  border-color: var(--ui-line) !important;
  color: var(--ui-ink) !important;
  background-color: var(--ui-surface) !important;
}

html[data-theme="dark"] .ui-page :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-color: var(--ui-border-strong) !important;
  color: var(--ui-ink) !important;
  background-color: var(--ui-surface) !important;
}

html[data-theme="dark"] .ui-page :where(input, textarea)::placeholder { color: #88968f; opacity: 1; }
html[data-theme="dark"] .ui-page :where(.secondary-action, .ui-button.secondary, .site-picker-new):not(.ui-button-group *) {
  border-color: var(--ui-border-strong) !important;
  color: var(--ui-ink) !important;
  background: var(--ui-surface) !important;
}
html[data-theme="dark"] .ui-page :where(.ui-table th, thead th) { color: var(--ui-muted); background: var(--ui-surface-muted) !important; }
html[data-theme="dark"] .ui-page :where(.ui-table td, .ui-table th, td, th) { border-color: var(--ui-line); }
html[data-theme="dark"] .ui-page :where(.empty-state, .ui-empty, .task-empty) { color: var(--ui-muted); background: var(--ui-surface-muted) !important; }
html[data-theme="dark"] .ui-page :where(.ui-flash, .flash) { color: var(--ui-ink); background: var(--ui-surface) !important; }
html[data-theme="dark"] .ui-page :where(.module-intro, .ui-page-head p, small, .muted) { color: var(--ui-muted) !important; }
html[data-theme="dark"] body.ui-page :where(
  .remember-login strong, .site-picker-search, .site-picker-fields label,
  .ui-quick-badge, .system-nav a, .mail-setting label,
  .recipient-list legend, .task-card, .task-dialog header button, .task-dialog header a,
  .general-upload, .page-intro, label, th, .calc-readonly, .employee-card,
  .order-meta b, .order-form legend, .wiki-drawer,
  .wiki-prose h2, .wiki-prose h3, .wiki-prose h4, .wiki-document-info strong,
  .vehicle-card, .vehicle-count strong, .withdrawal-card h3, .site-card,
  .site-card-counts b, .holiday-summary li, .absence-mode legend, .absence-form label,
  .chips i, .break-card, .stack-form label, .form-grid label, .sheet-close,
  .quick-icons span, .context-choice legend, .special-select
) { color: var(--ui-ink) !important; }
html[data-theme="dark"] body.ui-page :where(
  .remember-login small, .portal-card small, .portal-app-grid .nav-card small,
  .module-intro, .module-empty p, .site-picker-caption, .site-picker-results > span,
  .site-picker-result small, .site-picker-selected small, .site-picker-create-head small,
  .task-copy small, .task-due, .task-empty, .document-area-head > span,
  .employee-document small, .order-meta, .order-card-side, .choice-card small,
  .order-form label small, .detail-card dt, .detail-card dd small,
  .history-list p, .history-list small, .fieldset-hint, .wiki-reader-head p,
  .wiki-editor-head p, .vehicle-count, .withdrawal-note, .vehicle-empty p,
  .site-card-copy small, .site-card-counts, .site-overview-empty span,
  .site-add-dialog header small, .site-empty p, .site-detail-head p,
  .site-list-title p, .site-entry-copy small, .site-list-empty,
  .site-remove-panel > p, .repair-issue, .repair-locations b,
  .debt-direction, .debt-note, .report-note
) { color: var(--ui-muted) !important; }

/* Preserve semantic meaning while replacing the legacy light tints. */
html[data-theme="dark"] body.ui-page .task-card.returned,
html[data-theme="dark"] body.ui-page .task-card.status-review,
html[data-theme="dark"] body.ui-page .order-card.status-open,
html[data-theme="dark"] body.ui-page .site-card.has-open,
html[data-theme="dark"] body.ui-page .vehicle-card.has-open { background: #382f1d !important; border-color: #8d6b2b !important; }
html[data-theme="dark"] body.ui-page .task-card.completed,
html[data-theme="dark"] body.ui-page .order-card.status-completed,
html[data-theme="dark"] body.ui-page .site-card.is-clear,
html[data-theme="dark"] body.ui-page .vehicle-card.is-clear,
html[data-theme="dark"] body.ui-page .status-person.received { background: #19372d !important; border-color: #34785f !important; }
html[data-theme="dark"] body.ui-page .task-card.due-soon,
html[data-theme="dark"] body.ui-page .order-card.status-open.urgent,
html[data-theme="dark"] body.ui-page .repair-card.is-important { background: #3c2422 !important; border-color: #9e4e48 !important; }
html[data-theme="dark"] body.ui-page .order-card.status-cancelled { background: #29312f !important; border-color: #53615c !important; color: var(--ui-muted) !important; }

/* Zeiterfassung: migrate remaining legacy light utility surfaces centrally. */
html[data-theme="dark"] body.ui-page :where(
  .summary-strip > div, .chips i, .break-card, .choice-grid button,
  .archive-month > summary, .archive-months, .office-card-actions a,
  .office-card-actions button, .office-activity, .office-activity .allocation-chips span,
  .backend-nav a:hover, .backend-nav a.active, .backend-table tbody tr:hover,
  .reporting-table-wrap tbody tr:hover, .notification-message, .time-bubbles > span,
  .day-activity-context, .special-edit-grid, .editor-time-fields option:disabled,
  .app-menu nav a:not(.active):hover, .report-note, .readiness-counts span,
  .go-live-note, .reporting-row.allocation i, .special-machine-row,
  .site-register-card.inactive, .site-register-usage span, .quick-icons span,
  .pause-overview, .credential-panel, .user-setting-list label, .report-weekdays,
  .site-hero > div, .context-badge, .context-choice label span,
  .allocation-row button, .quarter-stepper
) { border-color: var(--ui-line); color: var(--ui-ink); background: var(--ui-surface-muted) !important; }

html[data-theme="dark"] body.ui-page :where(
  .live-badge, .status-pill.submitted, .confirm-icon, .calendar-state.done,
  .calendar-transfer-done, .holiday-summary, .absence-card.status-approved,
  .archive-slot, .accounting-ready-row, .backup-status.healthy,
  .employee-day-row.sent, .allocation-head > [data-remaining].complete,
  .status-board-metrics .done
) { color: var(--ui-success-contrast); background: #19372d !important; }

html[data-theme="dark"] body.ui-page :where(
  .alert, .status-pill, .status-pill.processing, .absence-status,
  .timekeeping-status.active, .pending-absence-banner, .absence-decision-lock,
  .calendar-state.open, .holiday-summary.is-warning, .report-head-actions span,
  .backup-status.warning, .backup-warning, .report-note.locked,
  .site-register-badges span, .site-merge-explanation,
  .status-person.active .status-person-label, .allocation-chips span,
  .allocation-head > [data-remaining]
) { color: var(--ui-warning-contrast); background: #382f1d !important; }

html[data-theme="dark"] body.ui-page :where(
  .alert.error, .missing-mail, .status-rejected .absence-status,
  .readiness-hero.fail, .day-state.open, .past-day-alert,
  .overlap-warning .confirm-icon, .overlap-inline, .context-choice.is-invalid,
  .danger-zone button, .status-person-label, .status-board-metrics .open
) { color: var(--ui-danger-contrast); background: #3c2422 !important; }

html[data-theme="dark"] body.ui-page :where(
  .employee-day-row.archived, .archived .time-bubbles > span
) { color: var(--ui-info-contrast); background: #1d2f3b !important; }
html[data-theme="dark"] .ui-page .bottom-nav { border-color: var(--ui-line); background: color-mix(in srgb, var(--ui-surface) 96%, transparent) !important; }
html[data-theme="dark"] .ui-page .transfer-bar { border-color: var(--ui-line); background: color-mix(in srgb, var(--ui-surface) 96%, transparent) !important; }
html[data-theme="dark"] .ui-page .app-menu { color: var(--ui-ink); background: var(--ui-surface) !important; }

/* System-wide late-loaded legacy surfaces. New components must use the
   --ui-* tokens directly; this compatibility layer keeps existing modules
   readable until their local CSS is naturally touched again. */
html[data-theme="dark"] body.ui-page :where(
  .portal-header-shortcut, .portal-home-link, .remember-login,
  .credential-panel, .vehicle-assignment-panel, .users-title-actions .notifications-action,
  .task-comment, .task-no-comments, .task-description, .edit-danger,
  .task-reassign-panel, .task-reassign-panel > header button,
  .payroll-matrix-header, .payroll-matrix-row, .payroll-matrix-row.not-expected,
  .document-row-actions button,
  .wiki-overview-area, .wiki-document-card, .wiki-save-first, .wiki-toolbar,
  .wiki-editor-help, .wiki-drawer-areas a, .wiki-result-list > a,
  .wiki-drawer-head button, .wiki-pdf-dialog-head button,
  .position, .messages, .result, .resultStatus, .pill, .cardTitle,
  .card-head, .block-title, .tool-overview-link, .pipe-page,
  .angle-diagram-field > span, .calc-table tbody tr,
  .hint, .unit, .expert, .modeBadge, .info-box,
  .repair-current-image, .repair-locations span, .debt-note,
  .absence-pending-count, .absence-details > span, .absence-note,
  .check-line, .absence-mode label, .conditional-fields, .booked-lock,
  .reporting-stats > div, .external-backup-check, .site-add form, .site-empty,
  .target-panel, .order-meta-fields, .order-filter, .action-card,
  .recipient-option:hover, .site-results button, .finish-site-list
) {
  border-color: var(--ui-line) !important;
  color: var(--ui-ink) !important;
  background: var(--ui-surface-muted) !important;
}

html[data-theme="dark"] body.ui-page :where(
  .wiki-prose th, .wiki-prose tbody tr:nth-child(even), .miniTable th,
  .calculator-shell tbody tr:nth-child(even), .tool-shell tbody tr:nth-child(even), tr.group td,
  .wiki-table-wrap, .payroll-matrix-row:not(.payroll-matrix-header):hover,
  .backend-table tbody tr:hover, .reporting-table-wrap tbody tr:hover
) {
  border-color: var(--ui-line) !important;
  color: var(--ui-ink) !important;
  background: var(--ui-surface-muted) !important;
}

/* Text which older module styles pin to colors intended for white surfaces. */
html[data-theme="dark"] body.ui-page :where(
  .summary-strip strong, .backend-stat strong, .timekeeping-summary > div strong,
  .site-card-counts b, .site-card-address, .site-entry-copy p,
  .site-overview-tools label, .site-add label, .task-site-line,
  .task-comment small, .task-reassign-panel label > small,
  .wiki-callout, .wiki-document-info strong
) { color: var(--ui-ink) !important; }

html[data-theme="dark"] body.ui-page :where(
  .site-back, .task-assigned, .site-entry-copy small, .site-card-copy small,
  .site-detail-head p, .site-list-title p, .wiki-editor-help,
  .payroll-matrix-row.not-expected, .bottom-nav button:not(.active),
  .module-back-nav a
) { color: var(--ui-muted) !important; }

html[data-theme="dark"] body.ui-page :where(
  .eyebrow, .entry-type, .reference-number, .bottom-nav .active
) { color: #ff9a7a !important; }

html[data-theme="dark"] body.ui-page :where(
  .site-department-badge, .task-person
) {
  border-color: color-mix(in srgb, var(--ui-accent) 50%, var(--ui-line)) !important;
  color: color-mix(in srgb, var(--ui-accent) 42%, var(--ui-ink)) !important;
  background: color-mix(in srgb, var(--ui-accent) 12%, var(--ui-surface)) !important;
}

/* Lists/Baustellen: preserve the two fachlich meaningful list colors without
   ever placing dark-mode text on a light card. */
html[data-theme="dark"] body.ui-page .site-entry-card {
  border-color: #8d6b2b !important;
  color: var(--ui-ink) !important;
  background: #382f1d !important;
}
html[data-theme="dark"] body.ui-page .type-site_todo .site-entry-card {
  border-color: #3f708f !important;
  background: #1d2f3b !important;
}

/* Semantic surfaces keep the same meaning in every module. */
html[data-theme="dark"] body.ui-page :where(
  .task-comment.returned, .task-return-note, .wiki-callout-warning,
  .form-status.is-pending, .offset-warning, .site-total,
  .site-list-panel.type-site_bring .site-list-title > span,
  .order-badge.urgent, .urgent-date, .choice-card.urgent-choice:has(input:checked),
  .vehicle-card.has-open .vehicle-total, .task-badge.comment, .task-badge.returned,
  .withdrawal-title span, .withdrawal-quantity,
  .department-missing-alert, .department-missing-stat.has-missing,
  .department-badge.department-missing, .payroll-status-summary span.open,
  button.warn, .finish-site-warning,
  .wiki-edit-mode-status
) {
  border-color: #8d6b2b !important;
  color: var(--ui-warning-contrast) !important;
  background: #382f1d !important;
}
html[data-theme="dark"] body.ui-page :where(
  .task-comment.done, .wiki-callout-success, .form-status.is-success
) {
  border-color: #34785f !important;
  color: var(--ui-success-contrast) !important;
  background: #19372d !important;
}
html[data-theme="dark"] body.ui-page :where(
  .site-add > summary, .site-flash.success, .vehicle-card.is-clear .vehicle-total,
  .task-badge.done, .task-badge.remark
) {
  border-color: #34785f !important;
  color: var(--ui-success-contrast) !important;
  background: #19372d !important;
}
html[data-theme="dark"] body.ui-page :where(
  .task-action-error, .wiki-callout-danger, .form-status.is-error,
  .resultStatus.bad, .site-flash.error, .site-remove-form > button,
  .vehicle-flash.error, .repair-important, .repair-important-choice
) {
  border-color: #9e4e48 !important;
  color: var(--ui-danger-contrast) !important;
  background: #3c2422 !important;
}
html[data-theme="dark"] body.ui-page :where(
  .wiki-callout-info, .wiki-callout:not(.wiki-callout-success):not(.wiki-callout-warning):not(.wiki-callout-danger),
  .type-site_todo .site-list-title > span, .choice-card:has(input:checked),
  .segmented input:checked + label
) {
  border-color: #3f708f !important;
  color: var(--ui-info-contrast) !important;
  background: #1d2f3b !important;
}

/* Binding module contract: normal content is white on genuinely dark surfaces.
   This deliberately has more specificity than legacy module styles loaded later. */
html[data-theme="dark"] body.ui-page.area-tasks,
html[data-theme="dark"] body.ui-page.area-wiki,
html[data-theme="dark"] body.ui-page.area-calculators {
  color: #f4f7f6 !important;
  background: #151d1a !important;
}

html[data-theme="dark"] body.ui-page.area-tasks :where(
  .task-detail, .task-detail > article, .task-detail header,
  .task-dialog, .task-dialog header, .task-edit-shell, .task-edit-form,
  .task-edit-form > header, .task-card, .task-description,
  .task-comment, .task-no-comments, .task-reassign-panel
) {
  border-color: #3b4944 !important;
  color: #f4f7f6 !important;
  background: #202a27 !important;
}
html[data-theme="dark"] body.ui-page.area-tasks :where(
  h1, h2, h3, .task-copy strong, .task-title-row > strong,
  .task-site-line, .task-detail dt, .task-detail dd, label
) { color: #f4f7f6 !important; }
html[data-theme="dark"] body.ui-page.area-tasks :where(
  .task-copy small, .task-assigned, .task-due, .task-detail dt,
  .task-comment small, .task-no-comments
) { color: #b8c4c0 !important; }
html[data-theme="dark"] body.ui-page.area-tasks :where(
  .task-dialog header button:not(.ui-button), .task-dialog header a,
  .task-edit-form header a, .task-reassign-panel > header button
) {
  border-color: #53635d !important;
  color: #f4f7f6 !important;
  background: #28332f !important;
}

html[data-theme="dark"] body.ui-page.area-wiki :where(
  .wiki-article, .wiki-welcome, .wiki-overview-area, .wiki-search-results,
  .wiki-editor-form, .wiki-versions, .wiki-preview-pane, .wiki-document-card,
  .wiki-drawer, .wiki-drawer-areas a, .wiki-block-menu, .wiki-table-wrap
) {
  border-color: #3b4944 !important;
  color: #f4f7f6 !important;
  background: #202a27 !important;
}
html[data-theme="dark"] body.ui-page.area-wiki :where(
  h1, h2, h3, h4, label, strong, .wiki-prose, .wiki-prose p,
  .wiki-prose li, .wiki-prose td, .wiki-prose th,
  .wiki-tree summary, .wiki-tree-page-link, .wiki-editor-form label,
  .wiki-node-type-static, .wiki-document-info strong
) { color: #f4f7f6 !important; }
html[data-theme="dark"] body.ui-page.area-wiki :where(
  .wiki-reader-head p, .wiki-editor-head p, .wiki-welcome p,
  .wiki-document-info small, .wiki-versions p, .wiki-versions small,
  .wiki-editor-help, .wiki-empty-content
) { color: #b8c4c0 !important; }
html[data-theme="dark"] body.ui-page.area-wiki :where(
  .wiki-toolbar, .wiki-editor-help, .wiki-prose code,
  .wiki-tree summary:hover, .wiki-tree-page-link:hover,
  .wiki-tree-page-link.active, .wiki-tree-page-edit,
  .wiki-folder-note, .wiki-node-type-static strong
) {
  border-color: #3b4944 !important;
  color: #f4f7f6 !important;
  background: #28332f !important;
}
html[data-theme="dark"] body.ui-page.area-wiki .wiki-breadcrumbs a {
  color: color-mix(in srgb, var(--ui-accent) 72%, #fff) !important;
}
html[data-theme="dark"] body.ui-page.area-wiki .wiki-breadcrumbs > span {
  color: #aebbb6 !important;
}
/* Wiki tree states use explicit selectors because several historical Wiki
   assets define their own colors after the central stylesheet. */
html[data-theme="dark"] body.ui-page.area-wiki .wiki-drawer,
html[data-theme="dark"] body.ui-page.area-wiki .wiki-drawer-pages,
html[data-theme="dark"] body.ui-page.area-wiki .wiki-overview-area {
  border-color: #3b4944 !important;
  color: #f4f7f6 !important;
  background: #202a27 !important;
}
html[data-theme="dark"] body.ui-page.area-wiki .wiki-tree summary,
html[data-theme="dark"] body.ui-page.area-wiki .wiki-tree-page-link,
html[data-theme="dark"] body.ui-page.area-wiki .wiki-tree-page-link span,
html[data-theme="dark"] body.ui-page.area-wiki .wiki-overview-tree a,
html[data-theme="dark"] body.ui-page.area-wiki .wiki-overview-tree a span,
html[data-theme="dark"] body.ui-page.area-wiki .wiki-overview-tree a strong {
  color: #f4f7f6 !important;
}
html[data-theme="dark"] body.ui-page.area-wiki .wiki-tree-chevron,
html[data-theme="dark"] body.ui-page.area-wiki .wiki-tree-page-icon,
html[data-theme="dark"] body.ui-page.area-wiki .wiki-overview-folder > a > span:first-child,
html[data-theme="dark"] body.ui-page.area-wiki .wiki-overview-page > a > span:first-child {
  color: color-mix(in srgb, var(--ui-accent) 72%, #fff) !important;
}
html[data-theme="dark"] body.ui-page.area-wiki .wiki-tree ul,
html[data-theme="dark"] body.ui-page.area-wiki .wiki-overview-tree ul {
  border-color: #50615b !important;
}
html[data-theme="dark"] body.ui-page.area-wiki .wiki-tree summary:hover,
html[data-theme="dark"] body.ui-page.area-wiki .wiki-tree summary:focus-visible,
html[data-theme="dark"] body.ui-page.area-wiki .wiki-tree-page-link:hover,
html[data-theme="dark"] body.ui-page.area-wiki .wiki-tree-page-link:focus-visible,
html[data-theme="dark"] body.ui-page.area-wiki .wiki-tree-page-link.active,
html[data-theme="dark"] body.ui-page.area-wiki .wiki-overview-tree a:hover,
html[data-theme="dark"] body.ui-page.area-wiki .wiki-overview-tree a:focus-visible {
  color: #fff !important;
  background: color-mix(in srgb, var(--ui-accent) 32%, #202a27) !important;
}
html[data-theme="dark"] body.ui-page.area-wiki .wiki-tree-page-link.active .wiki-tree-page-icon {
  color: color-mix(in srgb, var(--ui-accent) 55%, #fff) !important;
}
html[data-theme="dark"] body.ui-page.area-wiki .wiki-drawer-areas a:not(.active) {
  border-color: #465650 !important;
  color: #f4f7f6 !important;
  background: #28332f !important;
}
html[data-theme="dark"] body.ui-page.area-wiki .wiki-drawer-areas a:not(.active) small,
html[data-theme="dark"] body.ui-page.area-wiki .wiki-drawer-section-head small,
html[data-theme="dark"] body.ui-page.area-wiki .wiki-overview-empty {
  color: #b8c4c0 !important;
}

html[data-theme="dark"] body.ui-page.area-calculators {
  --text: #f4f7f6;
  --muted: #b8c4c0;
  --surface: #202a27;
  --background: #151d1a;
  --line: #3b4944;
  --app-bg: #151d1a;
  --app-card: #202a27;
}
html[data-theme="dark"] body.ui-page.area-calculators :where(
  .shell, .calculator-shell, .container, .calculator, .wrap,
  main, body > form, .card, .section-box, .block, details,
  .advanced-settings, .info-box, .result, .results,
  .nav-card, .quick-section, .page-intro
) {
  border-color: #3b4944 !important;
  color: #f4f7f6 !important;
  background-color: #202a27 !important;
}
html[data-theme="dark"] body.ui-page.area-calculators :where(
  h1, h2, h3, h4, strong, label, legend, th, td,
  .tool-page-title, .cardTitle, .card-head, .block-title,
  .nav-card, .nav-card strong, summary
) { color: #f4f7f6 !important; }
html[data-theme="dark"] body.ui-page.area-calculators :where(
  p, small, .subtitle, .sub, .calc-intro, .lead, .hint, .unit
) { color: #b8c4c0 !important; }
html[data-theme="dark"] body.ui-page.area-calculators :where(
  input:not([type="checkbox"]):not([type="radio"]), select, textarea,
  .btn-secondary, .button-secondary, button.secondary, button.reset
) {
  border-color: #53635d !important;
  color: #f4f7f6 !important;
  background: #202a27 !important;
}
html[data-theme="dark"] body.ui-page.area-calculators :where(
  .card-head, .cardTitle, .block-title, summary,
  thead th, tbody tr:nth-child(even), .build-up
) {
  border-color: #3b4944 !important;
  color: #f4f7f6 !important;
  background: #28332f !important;
}
html[data-theme="dark"] body.ui-page.area-calculators :where(
  button:disabled, .btn:disabled, .button:disabled, input:disabled
) {
  border-color: #46544f !important;
  color: #8f9d98 !important;
  background: #2b3532 !important;
}
html[data-theme="dark"] body.ui-page.area-calculators :where(
  .calc-field > span, .meta, .formula, .card-head h1, .card-head h2,
  .position h3, .metric strong, .resultStatus, .miniTable td
) { color: #f4f7f6 !important; }
html[data-theme="dark"] body.ui-page.area-calculators :where(
  .calc-output, .calc-value, .position, .metric, .position-note,
  .hint, .resultStatus, .alt, .expert, .aside .note,
  .miniTable th, .section-box, .advanced-settings
) {
  border-color: #3b4944 !important;
  color: #f4f7f6 !important;
  background: #202a27 !important;
}
html[data-theme="dark"] body.ui-page.area-calculators :where(
  .hint, .meta small, .formula, .metric small, .aside .note
) { color: #b8c4c0 !important; }

html[data-theme="dark"] body.ui-page.area-tasks :where(
  .task-edit-shell, .task-detail, .task-detail > article,
  .task-history, .task-comments
) {
  border-color: #3b4944 !important;
  color: #f4f7f6 !important;
  background: #151d1a !important;
}
html[data-theme="dark"] body.ui-page.area-tasks :where(
  .task-history p, .task-history em, .task-description p,
  .task-comment p, .task-actions label, .task-form label
) { color: #f4f7f6 !important; }
html[data-theme="dark"] body.ui-page.area-tasks :where(
  .task-history small, .task-assigned, .task-due
) { color: #b8c4c0 !important; }

html[data-theme="dark"] body.ui-page :where(h1, h2, h3, h4, h5, h6) {
  color: #f4f7f6 !important;
}
html[data-theme="dark"] body.ui-page .ui-notification-symbol {
  border-color: color-mix(in srgb, var(--ui-tile-accent, var(--ui-accent)) 55%, #687871) !important;
  color: #f4f7f6 !important;
  background: color-mix(in srgb, var(--ui-tile-accent, var(--ui-accent)) 24%, #202a27) !important;
}
html[data-theme="dark"] body.ui-page .ui-tab.active .ui-count-badge:not(.attention) {
  color: #17212b !important;
  background: #f4f7f6 !important;
}
html[data-theme="dark"] body.ui-page.area-calculators > :where(form, main, section:not(.app-header)) {
  border-color: #3b4944 !important;
  color: #f4f7f6 !important;
  background-color: #202a27 !important;
}

/* Final contrast contract for shared navigation, forms and legacy module
   controls. These selectors intentionally live in the central theme so the
   same interaction never falls back to a light-only module colour. */
html[data-theme="dark"] body.ui-page .footer,
html[data-theme="dark"] body.ui-page .footer a {
  color: #b8c4c0 !important;
}
html[data-theme="dark"] body.ui-page .footer a:hover,
html[data-theme="dark"] body.ui-page .footer a:focus-visible {
  color: #fff !important;
}
html[data-theme="dark"] body.ui-page :where(
  .back-link, .profile-back, .vehicle-back, .site-back,
  .module-back-nav a, .ui-card-arrow, .user-card-arrow,
  .vehicle-open-link, .order-result-count, .field-label,
  .sync-note, .day-empty-activity
) {
  color: #b8c4c0 !important;
}
html[data-theme="dark"] body.ui-page :where(
  .back-link, .profile-back, .vehicle-back, .site-back,
  .module-back-nav a, .vehicle-open-link
):hover,
html[data-theme="dark"] body.ui-page :where(
  .back-link, .profile-back, .vehicle-back, .site-back,
  .module-back-nav a, .vehicle-open-link
):focus-visible {
  color: #fff !important;
}

html[data-theme="dark"] body.ui-page .stale-day-warning > p:not(.eyebrow) {
  color: #f4f7f6 !important;
}
html[data-theme="dark"] body.ui-page .stale-day-warning h2 {
  color: #ff9d8b !important;
}
html[data-theme="dark"] body.ui-page .day-empty-activity span {
  color: #f4f7f6 !important;
}

html[data-theme="dark"] body.ui-page :where(
  .quantity-mode-options label, .location-options label
) {
  border-color: #53635d !important;
  color: #f4f7f6 !important;
  background: #28332f !important;
}
html[data-theme="dark"] body.ui-page :where(
  .quantity-mode-options label:has(input:checked),
  .location-options label:has(input:checked)
) {
  border-color: #34785f !important;
  color: #9de5c7 !important;
  background: #19372d !important;
}

html[data-theme="dark"] body.ui-page :where(.site-department-badge, .site-department-badge.department-shk, .site-department-badge.department-metal) {
  border-color: #34785f !important;
  color: #9de5c7 !important;
  background: #19372d !important;
}
html[data-theme="dark"] body.ui-page .site-list-title > span {
  border: 1px solid #8d6b2b !important;
  color: #f2c96f !important;
  background: #382f1d !important;
}
html[data-theme="dark"] body.ui-page .type-site_todo .site-list-title > span {
  border-color: #3f708f !important;
  color: #8fc8f4 !important;
  background: #1d2f3b !important;
}
html[data-theme="dark"] body.ui-page .site-list-empty {
  border-color: #3b4944 !important;
  color: #b8c4c0 !important;
  background: #28332f !important;
}

html[data-theme="dark"] body.ui-page .user-avatar {
  border: 1px solid #53635d !important;
  color: #f4f7f6 !important;
  background: #33423d !important;
}
html[data-theme="dark"] body.ui-page .user-state.active {
  color: #9de5c7 !important;
  background: #19372d !important;
}
html[data-theme="dark"] body.ui-page .user-state.inactive {
  color: #b8c4c0 !important;
  background: #28332f !important;
}

html[data-theme="dark"] body.ui-page.area-wiki .wiki-overview > header p,
html[data-theme="dark"] body.ui-page.area-wiki .wiki-overview-area-head span,
html[data-theme="dark"] body.ui-page.area-wiki .wiki-reader-head > p {
  color: #b8c4c0 !important;
}
html[data-theme="dark"] body.ui-page :where(.document-area-head > span, .payroll-year > summary, .payroll-year > summary small, .payroll-month > summary small) {
  color: #b8c4c0 !important;
}

html[data-theme="dark"] .theme-option input:checked + span {
  border-color: #72d1aa !important;
  color: #f4f7f6 !important;
  background: #19372d !important;
}
html[data-theme="dark"] .theme-option input:checked + span small {
  color: #b8c4c0 !important;
}

/* White copy needs a darker accent surface in modules whose daylight accent
   is too bright for small labels and buttons. */
html[data-theme="dark"] body.ui-page :where(
  .ui-button.primary:not(.ui-button-group *), .primary-action:not(.ui-button), .floating-add,
  .backend-nav a.active
) {
  color: #fff !important;
  background-color: color-mix(in srgb, var(--ui-accent, var(--accent)) 78%, #000) !important;
}
html[data-theme="dark"] body.ui-page :where(.ui-count-badge.attention, .portal-count-badge.attention) {
  color: #fff !important;
  background: #a93f12 !important;
}
html[data-theme="dark"] body.ui-page .ui-overview-grid .ui-notification-indicator > .ui-count-badge.attention {
  color: #ffb28b !important;
  background: transparent !important;
}
html[data-theme="dark"] body.ui-page .ui-overview-grid .nav-card {
  border-color: color-mix(in srgb, var(--ui-tile-accent, var(--ui-accent)) 24%, #46534e) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}
html[data-theme="dark"] body.ui-page.area-tasks .brand-mark {
  color: #352900 !important;
}
html[data-theme="dark"] body.ui-page.area-calculators .calc-value > span,
html[data-theme="dark"] body.ui-page.area-wiki .wiki-article > header p {
  color: #b8c4c0 !important;
}

/* Technical drawings and print previews deliberately stay light, but their
   surrounding work area and controls follow the selected device theme. */
html[data-theme="dark"] body.ui-page :where(.cut-plan-stage, .pdf-a4) {
  color: #202d29 !important;
  background: #fff !important;
  color-scheme: light;
}

.theme-settings { margin-top: 18px; }
.theme-settings h2 { margin: 4px 0 7px; font-size: 21px; }
.theme-settings > p { margin: 0; color: var(--ui-muted); font-size: 13px; line-height: 1.45; }
.theme-options { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.theme-option { position: relative; min-width: 0; }
.theme-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.theme-option span { min-height: 58px; padding: 9px 8px; display: grid; place-content: center; gap: 3px; border: 1px solid var(--ui-line); border-radius: var(--ui-control-radius); color: var(--ui-ink); background: var(--ui-surface-muted); text-align: center; cursor: pointer; }
.theme-option strong, .theme-option small { display: block; }
.theme-option small { color: var(--ui-muted); font-size: 10px; font-weight: 400; }
.theme-option input:checked + span { border-color: var(--ui-accent); color: color-mix(in srgb, var(--ui-accent) 58%, var(--ui-ink)); background: color-mix(in srgb, var(--ui-accent) 14%, var(--ui-surface)); box-shadow: inset 0 0 0 1px var(--ui-accent); }
.theme-option input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--ui-accent) 28%, transparent); outline-offset: 2px; }
.theme-option:hover span { border-color: var(--ui-accent); }

@media (max-width: 480px) {
  .theme-option span { min-height: 54px; }
}

@media print {
  html[data-theme="dark"] { color-scheme: light; }
  html[data-theme="dark"] .ui-page { color: #202d29 !important; background: #fff !important; }
}