/* Global colour mode. The active theme is selected in the top bar and stored
   locally, so it is consistent across every DOCSIS module. */

:root[data-theme="dark"] {
  color-scheme: dark;
  --docsis-brand-primary: #0d4c42;
  --docsis-brand-hover: #126354;
  --docsis-brand-active: #177765;
  --docsis-brand-muted: #c6e0d8;
  --docsis-brand-border: #5e978b;
  --docsis-brand-text: #e8f8f3;
  --docsis-brand-on-primary: #ffffff;
  --docsis-color-bg: #0b1513;
  --docsis-color-surface: #14211e;
  --docsis-color-surface-soft: #182a26;
  --docsis-color-surface-elevated: #1d312c;
  --docsis-color-surface-muted: #223a34;
  --docsis-color-text: #f4fbf8;
  --docsis-color-muted: #c5d5d0;
  --docsis-color-disabled: #94aaa3;
  --docsis-color-line: #49665e;
  --docsis-color-action: #a8c7ff;
  --docsis-color-action-strong: #d0e0ff;
  --docsis-color-focus: #ffd166;
  --docsis-color-success: #83e3ad;
  --docsis-color-warning: #ffd080;
  --docsis-color-critical: #ffaaa3;
  --docsis-color-danger: #ffaaa3;
  --docsis-color-info: #a8c7ff;
  --docsis-color-neutral: #ccd6df;
  --docsis-color-sidebar: #082b26;
  --docsis-color-sidebar-hover: #0c4038;
  --docsis-color-sidebar-active: #105447;
  --docsis-color-sidebar-muted: #c8dfd8;
  --docsis-color-sidebar-border: rgba(231, 250, 242, 0.2);
  --docsis-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.38);
  --docsis-shadow-md: 0 18px 38px rgba(0, 0, 0, 0.5);
  --bg: #0b1513;
  --panel: #14211e;
  --text: #f4fbf8;
  --muted: #c5d5d0;
  --line: #49665e;
  --primary: #5ed4bd;
  --primary-dark: #d3f4ea;
  --danger: #ffaaa3;
  --warning: #ffd080;
  --info: #a8c7ff;
  --sidebar: #082b26;
  --teal-950: #082b26;
  --teal-900: #0b4038;
  --teal-800: #0f6658;
  --teal-700: #62d5c0;
  --teal-600: #81e1cf;
  --teal-100: #173b34;
  --gold-500: #e8bd58;
  --gold-400: #f5d27c;
  --ink-900: #f4fbf8;
  --ink-700: #d7e5e0;
  --ink-500: #c5d5d0;
  --surface-muted: #0b1513;
  --surface-soft: #182a26;
  --shadow: 0 16px 34px rgba(0, 0, 0, 0.42);
  --soft-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] .app-shell,
html[data-theme="dark"] .auth-body,
html[data-theme="dark"] .main,
html[data-theme="dark"] .app-content,
html[data-theme="dark"] .tm-page {
  background: var(--docsis-color-bg);
  color: var(--docsis-color-text);
}

html[data-theme="dark"] .app-topbar.topbar {
  border-color: var(--docsis-color-line);
  background: rgba(20, 33, 30, 0.96);
}

html[data-theme="dark"] .app-sidebar-toggle.sidebar-toggle,
html[data-theme="dark"] .app-user-menu-toggle,
html[data-theme="dark"] .app-user-menu-panel,
html[data-theme="dark"] .app-language-toggle.language-toggle,
html[data-theme="dark"] .app-theme-toggle,
html[data-theme="dark"] .auth-language-toggle,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .auth-content,
html[data-theme="dark"] .signature-dialog,
html[data-theme="dark"] .confirm-dialog,
html[data-theme="dark"] .notification-popup,
html[data-theme="dark"] .notification-menu,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] [role="dialog"] {
  border-color: var(--docsis-color-line);
  background: var(--docsis-color-surface);
  color: var(--docsis-color-text);
}

html[data-theme="dark"] .panel,
html[data-theme="dark"] .table-panel,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .dashboard-section,
html[data-theme="dark"] .dashboard-hero,
html[data-theme="dark"] .detail-item,
html[data-theme="dark"] .guide-card,
html[data-theme="dark"] .purchase-card,
html[data-theme="dark"] .quotation-row,
html[data-theme="dark"] .record-card,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .section-card,
html[data-theme="dark"] .capa-record,
html[data-theme="dark"] .capa-report-card,
html[data-theme="dark"] .observation-card,
html[data-theme="dark"] .document-card,
html[data-theme="dark"] .employee-card,
html[data-theme="dark"] .epi-form-mobile-card,
html[data-theme="dark"] .tm-task-card,
html[data-theme="dark"] .tm-plan-card,
html[data-theme="dark"] .tm-kpi,
html[data-theme="dark"] .tm-modal,
html[data-theme="dark"] .tm-drawer,
html[data-theme="dark"] .tm-menu__panel,
html[data-theme="dark"] .my-area-info-tile,
html[data-theme="dark"] .my-area-status-tile,
html[data-theme="dark"] .my-area-action-card,
html[data-theme="dark"] .my-area-attention-card,
html[data-theme="dark"] .my-area-aso-card,
html[data-theme="dark"] .my-area-aso-days,
html[data-theme="dark"] .bmi-self-summary,
html[data-theme="dark"] .pwa-install-dialog {
  border-color: var(--docsis-color-line);
  background: var(--docsis-color-surface);
  color: var(--docsis-color-text);
  box-shadow: var(--docsis-shadow-sm);
}

html[data-theme="dark"] .section-heading,
html[data-theme="dark"] .table-actions,
html[data-theme="dark"] .tm-toolbar,
html[data-theme="dark"] .tm-filter-bar,
html[data-theme="dark"] .tm-plan-tabs,
html[data-theme="dark"] .tm-column,
html[data-theme="dark"] .tm-empty-state,
html[data-theme="dark"] .tm-activity-item,
html[data-theme="dark"] .tm-comment,
html[data-theme="dark"] .tm-checklist-item {
  border-color: var(--docsis-color-line);
  background: var(--docsis-color-surface-soft);
  color: var(--docsis-color-text);
}

html[data-theme="dark"] .my-area-icon,
html[data-theme="dark"] .my-area-action-icon,
html[data-theme="dark"] .my-area-status-icon,
html[data-theme="dark"] .my-area-attention-icon,
html[data-theme="dark"] .pwa-install-note {
  background: var(--docsis-color-surface-muted);
  color: var(--docsis-color-text);
}

html[data-theme="dark"] .my-area-aso-card--danger {
  border-color: #c97972;
  background: #331c1b;
}

html[data-theme="dark"] .my-area-aso-card--warning .my-area-aso-days strong,
html[data-theme="dark"] .my-area-aso-card--warning .my-area-aso-days span {
  color: #ffd080;
}

html[data-theme="dark"] .my-area-aso-card--danger .my-area-aso-days strong,
html[data-theme="dark"] .my-area-aso-card--danger .my-area-aso-days span {
  color: #ffb2ab;
}

html[data-theme="dark"] .campaign-type--climate_survey {
  background: #182d4c;
  color: #d8e7ff;
}

html[data-theme="dark"] .campaign-type--evaluation {
  background: #3f2f08;
  color: #ffe5a3;
}

html[data-theme="dark"] .campaign-type--announcement {
  background: #123b2b;
  color: #cef7df;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] strong,
html[data-theme="dark"] .app-page-heading h1,
html[data-theme="dark"] .app-user-summary strong,
html[data-theme="dark"] .tm-module-header h1 {
  color: var(--docsis-color-text);
}

html[data-theme="dark"] small,
html[data-theme="dark"] label,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .form-hint,
html[data-theme="dark"] .app-page-heading .app-context,
html[data-theme="dark"] .app-user-summary small,
html[data-theme="dark"] .app-breadcrumbs,
html[data-theme="dark"] .tm-muted {
  color: var(--docsis-color-muted);
}

html[data-theme="dark"] a {
  color: var(--docsis-color-action);
}

html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:focus-visible {
  color: var(--docsis-color-action-strong);
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] option {
  border-color: var(--docsis-color-line);
  background: var(--docsis-color-surface-elevated);
  color: var(--docsis-color-text);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #b6c8c2;
  opacity: 1;
}

html[data-theme="dark"] input:disabled,
html[data-theme="dark"] select:disabled,
html[data-theme="dark"] textarea:disabled {
  border-color: #3d554e;
  background: #1a2b27;
  color: var(--docsis-color-disabled);
}

html[data-theme="dark"] table,
html[data-theme="dark"] tbody,
html[data-theme="dark"] tr,
html[data-theme="dark"] td {
  border-color: var(--docsis-color-line);
  background: var(--docsis-color-surface);
  color: var(--docsis-color-text);
}

html[data-theme="dark"] tr:nth-child(even) td {
  background: var(--docsis-color-surface-soft);
}

html[data-theme="dark"] th {
  border-color: #60867b;
  background: #0c4b40;
  color: #ffffff;
}

html[data-theme="dark"] .status-badge {
  border-color: var(--status-border);
  background: var(--status-bg);
  color: var(--status-text);
}

html[data-theme="dark"] .button:not(.secondary):not(.danger),
html[data-theme="dark"] button:not(.secondary):not(.danger):not(.app-sidebar-toggle):not(.sidebar-toggle):not(.app-theme-toggle) {
  border-color: #398e7f;
  background: #0f6658;
  color: #ffffff;
}

html[data-theme="dark"] .button:not(.secondary):not(.danger):hover,
html[data-theme="dark"] button:not(.secondary):not(.danger):not(.app-sidebar-toggle):not(.sidebar-toggle):not(.app-theme-toggle):hover {
  border-color: #64d4bf;
  background: #137a69;
  color: #ffffff;
}

html[data-theme="dark"] .button.secondary,
html[data-theme="dark"] button.secondary,
html[data-theme="dark"] .app-sidebar-toggle.sidebar-toggle,
html[data-theme="dark"] .app-theme-toggle,
html[data-theme="dark"] .auth-language-toggle {
  border-color: var(--docsis-color-line);
  background: var(--docsis-color-surface-elevated);
  color: var(--docsis-color-text);
}

html[data-theme="dark"] .button.danger,
html[data-theme="dark"] button.danger {
  border-color: #d87d76;
  background: #4d201e;
  color: #ffd5d0;
}

html[data-theme="dark"] .flash.success,
html[data-theme="dark"] .alert-success {
  border-color: #4eb881;
  background: #123b2b;
  color: #cef7df;
}

html[data-theme="dark"] .flash.danger,
html[data-theme="dark"] .flash.error,
html[data-theme="dark"] .alert-danger,
html[data-theme="dark"] .alert-error {
  border-color: #df847c;
  background: #4a211e;
  color: #ffd5d0;
}

html[data-theme="dark"] .flash.info,
html[data-theme="dark"] .alert-info {
  border-color: #78a8f5;
  background: #182d4c;
  color: #d8e7ff;
}

html[data-theme="dark"] .auth-install-button {
  border-color: #6c9188;
  background: var(--docsis-color-surface-elevated);
  color: var(--docsis-color-text);
}

html[data-theme="dark"] .pwa-install-steps,
html[data-theme="dark"] .pwa-share-symbol {
  color: var(--docsis-color-text);
}

.app-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--docsis-color-line);
  border-radius: var(--docsis-radius-sm);
  background: var(--docsis-color-surface);
  color: var(--docsis-color-text);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.app-theme-toggle [data-theme-icon] {
  display: inline-grid;
  width: 16px;
  place-items: center;
  font-size: 16px;
  line-height: 1;
}

.app-theme-toggle:hover,
.app-theme-toggle:focus-visible {
  border-color: var(--docsis-brand-border);
  background: var(--docsis-color-surface-soft);
  color: var(--docsis-color-text);
}

.auth-topbar-actions {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-topbar-actions .auth-language-toggle {
  position: static;
}

html[data-theme="dark"] :focus-visible {
  outline: 3px solid var(--docsis-color-focus);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .app-theme-toggle [data-theme-label] {
    display: none;
  }

  .app-theme-toggle {
    min-width: var(--docsis-touch-target);
    min-height: var(--docsis-touch-target);
    padding-inline: 8px;
  }

  .auth-topbar-actions {
    top: 12px;
    right: 12px;
  }

  .auth-topbar-actions .app-theme-toggle [data-theme-label] {
    display: none;
  }
}

@media print {
  html[data-theme="dark"] {
    color-scheme: light;
  }
}