/* The preference only changes screen colors; printed reports retain their light palette. */
html[data-theme="light"] {
  color-scheme: light;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
  color: var(--muted);
}

.theme-toggle[hidden] {
  display: none;
}

.theme-toggle:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.theme-toggle:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.theme-toggle .icon {
  display: block;
  width: 19px;
  height: 19px;
}

.theme-toggle .theme-icon-sun,.theme-toggle [data-theme-icon="sun"] {
  display: none;
}

@media screen {
  html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #171518;
    --paper: #211e22;
    --ink: #f2eaf0;
    --muted: #baabb4;
    --line: #3d343c;
    --accent: #ff91a3;
    --accent-hover: #ffb1bf;
    --accent-soft: #38242d;
    --highlight: #ffb1bf;
    --sidebar-bg: #141115;
    --gold: #e7c17b;
    --danger: #ff9ba9;
    --success: #8edab1;
    --shadow: 0 2px 10px #00000020;
    --surface-subtle: #272228;
    --surface-raised: #2e282f;
    --surface-hover: #332a32;
    --control-bg: #1c191d;
    --control-border: #806d78;
    --action-fill: #bd304a;
    --action-fill-hover: #a2243c;
    --success-bg: #20362b;
    --success-border: #3f6550;
    --warning-bg: #392f1f;
    --warning-border: #705c36;
    --danger-bg: #3e242d;
    --danger-border: #75404e;
    --info: #a8c9fa;
    --info-bg: #233044;
    --info-border: #445c7e;
  }

  html[data-theme="dark"] .theme-toggle .theme-icon-moon,html[data-theme="dark"] .theme-toggle [data-theme-icon="moon"] {
    display: none;
  }

  html[data-theme="dark"] .theme-toggle .theme-icon-sun,html[data-theme="dark"] .theme-toggle [data-theme-icon="sun"] {
    display: inline-flex;
  }

  html[data-theme="dark"] ::selection {
    background: #75404e;
    color: #fff;
  }

  html[data-theme="dark"] ::placeholder {
    color: #ad9ea7;
    opacity: 1;
  }

  html[data-theme="dark"] :is(a, button, summary, input, select, textarea):focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
  }

  /* Surfaces use a small hierarchy so nested forms and menus remain easy to distinguish. */
  html[data-theme="dark"] .guest-page {
    background: var(--bg);
  }

  html[data-theme="dark"] .topbar {
    background: #211e22f2;
  }

  html[data-theme="dark"] :is(.stat-card, .auth-shell, .standalone-card, .error-state, .confirm-dialog, .app-grid + .pagination) {
    background: var(--paper);
    border-color: var(--line);
    box-shadow: var(--shadow);
  }

  html[data-theme="dark"] :is(.overview-banner, .workspace-context, .batch-bar, .filter-bar, .workspace-page .filter-bar, .workspace-disclosure .batch-bar, .license-output, .secret-box, .generated-card) {
    background: var(--surface-subtle);
    border-color: var(--line);
  }

  html[data-theme="dark"] :is(.row-menu-panel, .orbit-node, .empty-icon, .device-count, .standalone-symbol, .error-state > .standalone-symbol) {
    background: var(--surface-raised);
    border-color: var(--line);
    box-shadow: none;
  }

  html[data-theme="dark"] .row-menu-panel {
    box-shadow: 0 6px 18px #00000030;
  }

  html[data-theme="dark"] .confirm-dialog {
    color: var(--ink);
    box-shadow: 0 20px 80px #00000066;
  }

  html[data-theme="dark"] .confirm-dialog::backdrop,html[data-theme="dark"] .nav-scrim {
    background: #09070bb8;
  }

  html[data-theme="dark"] .toast {
    background: var(--surface-raised);
    border-color: var(--control-border);
    color: var(--ink);
    box-shadow: 0 6px 25px #00000050;
  }

  /* Older page variants have explicit text colors, so their roles are mapped here too. */
  html[data-theme="dark"] :is(.breadcrumb strong, .field label, .workspace-page .field label, .duration-fields legend, td, td strong, .key-cell code, .overview-banner h2, .stat-value, .app-meta dd, .secret-box > code, .auth-form-side h1, .standalone-card h1, .error-state h1, .empty-state h3, .brand-guest, .row-menu-panel > a, .row-menu-panel button) {
    color: var(--ink);
  }

  html[data-theme="dark"] :is(.breadcrumb, .breadcrumb > span, .global-search > .icon, .global-search kbd, .topbar-profile, .workspace-footer, .card-header > .icon, .icon-button, .field-hint, .empty-state p, .search-field > .icon, .key-cell small, .filter-reset, .cell-note, .date-cell, .row-menu > summary, .pagination, .batch-bar > span, .banner-kicker, .overview-banner p, .banner-note, .stat-top, .stat-card p, .app-slug, .app-description, .app-meta dt, .danger-card p, .fingerprint, .maintenance-card > p, .maintenance-card > .field-hint, .profile-overview p, .profile-security, .security-intro p, .setup-steps > p:not(.eyebrow), .auth-description, .auth-form label, .auth-help, .auth-trust, .guest-header > span, .guest-footer, .password-control > button, .standalone-card .page-description, .standalone-card .eyebrow, .error-state p, .error-state > small, .confirm-dialog p) {
    color: var(--muted);
  }

  /* The base checkbox label uses !important; retain that narrow exception for contrast. */
  html[data-theme="dark"] .checkbox-label {
    color: var(--muted) !important;
  }

  html[data-theme="dark"] :is(.overview-banner a, .security-details > summary, .empty-icon, .copy-inline, .profile-avatar, .dialog-symbol) {
    color: var(--accent);
  }

  html[data-theme="dark"] :is(.avatar-soft, .app-symbol, .security-symbol, .standalone-symbol, .device-count, .config-count) {
    background: var(--surface-raised);
    color: var(--muted);
  }

  html[data-theme="dark"] :is(.copy-inline, .profile-avatar, .dialog-symbol) {
    background: var(--accent-soft);
  }

  /* White button labels need a deeper red fill than links on a charcoal surface. */
  html[data-theme="dark"] :is(.button-primary, .button-danger, .skip-link) {
    background: var(--action-fill);
    color: #fff;
    box-shadow: none;
  }

  html[data-theme="dark"] :is(.button-primary, .button-danger):hover {
    background: var(--action-fill-hover);
  }

  html[data-theme="dark"] .button-secondary {
    background: var(--surface-raised);
    color: var(--ink);
    border-color: var(--control-border);
  }

  html[data-theme="dark"] .button-secondary:hover {
    background: var(--surface-hover);
    border-color: var(--accent);
  }

  html[data-theme="dark"] .button-ghost,html[data-theme="dark"] .language-switcher a {
    color: var(--muted);
  }

  html[data-theme="dark"] :is(.button-ghost, .icon-button):hover,html[data-theme="dark"] .config-delete:hover {
    background: var(--accent-soft);
    color: var(--accent);
  }

  html[data-theme="dark"] .language-switcher a[aria-current="true"] {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: #75404e;
  }

  html[data-theme="dark"] .button-on-dark {
    background: var(--accent-soft);
    border-color: var(--danger-border);
    color: var(--accent);
  }

  html[data-theme="dark"] .button-on-dark:hover {
    background: #482c37;
  }

  html[data-theme="dark"] :is(.field input, .field select, .field textarea, .auth-form input:not([type="checkbox"]), .search-field, .workspace-page .search-field) {
    background: var(--control-bg);
    border-color: var(--control-border);
    color: var(--ink);
    box-shadow: none;
  }

  html[data-theme="dark"] :is(.field input, .field select, .field textarea):focus {
    border-color: var(--accent);
  }

  html[data-theme="dark"] :is(.field input[readonly], .field input:disabled, .field select:disabled, .field textarea:disabled) {
    background: var(--surface-subtle);
    border-color: var(--line);
    color: var(--muted);
  }

  html[data-theme="dark"] .global-search kbd {
    border-color: var(--line);
  }

  html[data-theme="dark"] :is(.search-field:hover, .search-field:focus-within) {
    background: var(--control-bg);
    border-color: var(--accent);
  }

  html[data-theme="dark"] :is(.table-scroll, .workspace-tabs) {
    scrollbar-color: #63545e transparent;
  }

  html[data-theme="dark"] :is(th, .config-table th, .workspace-page .filter-bar + .table-scroll th) {
    background: var(--surface-subtle);
    color: var(--muted);
  }

  html[data-theme="dark"] td {
    border-bottom-color: var(--line);
  }

  html[data-theme="dark"] :is(tbody tr:hover, .workspace-disclosure > summary:hover, .row-menu > summary:hover, .row-menu[open] > summary, .row-menu-panel button:hover, .row-menu-panel a:hover) {
    background: var(--surface-hover);
  }

  html[data-theme="dark"] .config-table .is-editing {
    background: var(--accent-soft);
  }

  html[data-theme="dark"] :is(.badge-success, .notice-success) {
    background: var(--success-bg);
    color: var(--success);
    border-color: var(--success-border);
  }

  html[data-theme="dark"] :is(.badge-warning, .notice-warning) {
    background: var(--warning-bg);
    color: var(--gold);
    border-color: var(--warning-border);
  }

  html[data-theme="dark"] :is(.badge-danger, .notice-error) {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: var(--danger-border);
  }

  html[data-theme="dark"] :is(.badge-info, .notice-info) {
    background: var(--info-bg);
    color: var(--info);
    border-color: var(--info-border);
  }

  html[data-theme="dark"] .badge-neutral {
    background: var(--surface-raised);
    color: var(--muted);
  }

  html[data-theme="dark"] .notice .icon-button {
    color: inherit;
  }

  html[data-theme="dark"] :is(.auth-trust, .stat-icon) {
    border-color: var(--line);
  }

  html[data-theme="dark"] .orbit-ring {
    border-color: var(--control-border);
  }

  html[data-theme="dark"] .orbit-center {
    background: #51404d;
    box-shadow: 12px 16px 25px #00000020, 0 0 0 11px #332a32;
  }

  html[data-theme="dark"] .orbit-small-dot {
    border-color: var(--surface-subtle);
  }

  /* QR codes keep their white quiet zone to remain readable by camera scanners. */
  html[data-theme="dark"] .qr-box {
    background: #fff;
  }

  html[data-theme="dark"] .nav-link.is-active {
    background: var(--action-fill);
  }
}

@media screen and (max-width: 620px) {
  .topbar-end {
    gap: 8px;
  }

  .breadcrumb {
    max-width: calc(100vw - 280px);
  }

  .guest-header {
    gap: 12px;
  }
}

@media print {
  .theme-toggle {
    display: none;
  }

  html {
    color-scheme: light;
  }
}