/* Dark screen successor. Brand artwork and saved company settings are unchanged.
   Quiet dividers separate surfaces; stronger borders identify input controls.
   Each component below was traced to the selected CSS and final app source. */
@media screen {
  html[data-rh-theme="dark"] {
    --rh-page: #111C25;
    --rh-surface: #1A2A36;
    --rh-raised: #253B49;
    --rh-sidebar: #14232E;
    --rh-control: #14232E;
    --rh-text: #EEF3F6;
    --rh-secondary: #B5C4CE;
    --rh-border: #3B5060;
    --rh-control-border: #758B9A;
    --rh-focus: #58C9BE;
    --rh-focus-halo: #111C25;
    --rh-link: #9EE3DA;
    --rh-success: #A2E3BE;
    --rh-success-bg: #203E32;
    --rh-warning: #FFE19B;
    --rh-warning-bg: #45391F;
    --rh-error: #FFC5C5;
    --rh-error-bg: #482B31;
    --rh-info: #BEDDF5;
    --rh-info-bg: #253D50;
    --muted: var(--rh-secondary);
    --line: var(--rh-border);
    --ink: var(--rh-text);
    --text: var(--rh-text);
    --surface-soft: var(--rh-raised);
    --border: var(--rh-border);
    --shadow: 0 8px 28px #00000030;
  }

  /* The workspace navigation follows the appearance choice. Company colors
     remain stored and are still shown faithfully in the appearance preview. */
  html[data-rh-theme="dark"] .rh-company-scope .sidebar {
    --sidebar-ink: var(--rh-text);
    --blue: var(--rh-aqua);
    background: var(--rh-sidebar);
    color: var(--rh-text);
    border-right: 1px solid var(--rh-border);
  }
  html[data-rh-theme="dark"] .sidebar :is(.workspace-label, .user-profile div > span, .company-brand-caption) {
    color: var(--rh-secondary);
    opacity: 1;
  }
  html[data-rh-theme="dark"] .sidebar :is(nav > button, .sidebar-bottom > button) {
    color: var(--rh-secondary);
  }
  html[data-rh-theme="dark"] .sidebar :is(nav > button:hover, .sidebar-bottom > button:hover, nav > button.active, .sidebar-bottom > button.active) {
    background: var(--rh-raised);
    color: var(--rh-text);
  }
  html[data-rh-theme="dark"] .sidebar :is(nav > button.active, .sidebar-bottom > button.active) {
    box-shadow: inset 3px 0 var(--rh-aqua);
  }
  html[data-rh-theme="dark"] .sidebar nav > button.active svg { color: var(--rh-aqua); }
  html[data-rh-theme="dark"] .sidebar nav > button small {
    background: var(--rh-raised);
    color: var(--rh-secondary);
  }
  html[data-rh-theme="dark"] .sidebar .user-profile { border-color: var(--rh-border); }
  html[data-rh-theme="dark"] .sidebar .sidebar-nav-item:focus-visible { outline-color: var(--rh-focus); }
  html[data-rh-theme="dark"] .mobile-bottom button { color: var(--rh-secondary); }
  html[data-rh-theme="dark"] .mobile-bottom button.active { color: var(--rh-aqua); }
  html[data-rh-theme="dark"] .mobile-bottom button.active svg { background: var(--rh-raised); }

  /* Never invert an uploaded logo. Transparent artwork receives a neutral
     plate on the real dark navigation/selector; explicit dark plates remain. */
  html[data-rh-theme="dark"] :is(.sidebar, .company-card-logo) .company-logo.logo-bg-transparent { color: var(--rh-text); }
  html[data-rh-theme="dark"] :is(.sidebar, .company-card-logo) .company-logo.logo-bg-transparent:has(> img) {
    background: #FFFFFF;
    padding: 8px;
  }

  /* Dashboard, meeting/history, planning, and form surfaces which originally
     used literal pale backgrounds instead of the shared theme variables. */
  html[data-rh-theme="dark"] :is(.dashboard-meeting, .next-meeting, .history-list, .group-metrics, .grid-footer, .meeting-bottom, .appearance-actions, .recurrence-preview li, .recurrence-date-list span) {
    background: var(--rh-surface);
    color: var(--rh-text);
    border-color: var(--rh-border);
  }
  html[data-rh-theme="dark"] :is(.dashboard-meeting, .next-meeting) { background: var(--rh-raised); }
  html[data-rh-theme="dark"] :is(.related-row, .history-summary, .recurring-context, .recurrence-preview, .seat-responsibilities li, .seat-detail-people > span, .access-role-summary, .planning-date) {
    background: var(--rh-raised);
    color: var(--rh-text);
    border-color: var(--rh-border);
  }
  html[data-rh-theme="dark"] :is(.issue-row:hover, .directory-row:hover, .knowledge-row:hover, .history-row:hover, .history-related:hover, .chart-seat-footer button:hover, .group-navigation-row.selected, .group-select.ungrouped.selected) {
    background: var(--rh-raised);
    color: var(--rh-text);
    border-color: var(--rh-border);
  }
  html[data-rh-theme="dark"] .dashboard-summary > button.selected {
    border-color: var(--rh-aqua);
    box-shadow: inset 0 0 0 1px var(--rh-aqua);
  }
  html[data-rh-theme="dark"] :is(.dashboard-summary > button > span, .dashboard-summary > button > svg, .dashboard-signal > svg, .dashboard-meeting p, .dashboard-direction p, .dashboard-meeting-context span, .next-meeting > .section-line, .next-meeting p, .eyebrow, .company-picker > span) { color: var(--rh-secondary); }
  html[data-rh-theme="dark"] :is(.dashboard-meeting h2, .dashboard-meeting-context strong, .next-meeting h2) { color: var(--rh-text); }
  html[data-rh-theme="dark"] :is(.team-symbol, .avatar, .count, .empty-symbol, .issue-rank, .section-number, .meeting-attendees span, .vto-list-number, .planning-goal-number, .home-stats svg) {
    background: var(--rh-raised);
    color: var(--rh-secondary);
    border-color: var(--rh-border);
  }

  /* Muted copy remains readable on all three workspace surface levels. */
  html[data-rh-theme="dark"] :is(.summary-strip > div > span, .summary-strip > .summary-note, .summary-strip strong > span, .summary-note b, .total-card > span, .total-card small, .date-control, .footnote, .formula-marker, .issue-main > span, .issue-links, .issue-row > svg, .rock-card p, .rock-progress, .rock-footer > span:last-child, .rock-linked, .headline p, .vto-card > p, .seat-person, .seat-card ul, .settings-panel > p, .settings-panel dt, .explanation dt, .snapshot-stats dt, .setup-steps, .member-row small, .audit-row > span, .audit-row small, .agenda-title span, .agenda-index, .agenda-item small, .agenda-footer, .timer small, .segue > .eyebrow, .segue > p, .meeting-complete p, .conclude > p, .detail-kicker, .metric-detail > p, .related-row small, .search-results small, .empty p, .mobile-week, .metric-card-top svg, .metric-card-bottom > span:first-child, .quarter-progress) { color: var(--rh-secondary); }
  html[data-rh-theme="dark"] :is(.meeting-focus-heading > div > span, .meeting-elapsed, .history-row-main > small, .history-facts > span, .history-rating, .history-row > svg, .history-sections, .history-ratings .unrated, .seat-reports, .seat-history summary, .seat-history small, .outline-seat small, .outline-responsibilities > span, .range-summary small, .column-settings small, .report-caption, .goal-amount > span, .goal-progress-label > span, .goals-heading p, .goal-name > small, .goal-review-summary, .goal-contributions button > span:last-child, .planning-goal-preview, .vto-value-number, .vto-list-tools h3, .vto-execution-heading p, .vto-expand-mark) { color: var(--rh-secondary); }
  html[data-rh-theme="dark"] :is(.segue h2, .rock-progress strong, .related-row strong, .outline-seat, .seat-detail h3, .history-date strong, .history-ratings strong, .history-sections strong, .range-summary b, .report-caption strong, .report-controls .date-control > span, .goals-heading .date-control > span, .vto-list-tools h3 span) { color: var(--rh-text); }
  html[data-rh-theme="dark"] :is(.task-row.done .task-title strong, .task-row.archived .task-title strong) { color: var(--rh-secondary); }

  /* The control boundary is intentionally stronger than decorative dividers. */
  html[data-rh-theme="dark"] :is(input, select, textarea):not([type="color"]) {
    background-color: var(--rh-control);
    color: var(--rh-text);
    border-color: var(--rh-control-border);
  }
  html[data-rh-theme="dark"] :is(input, select, textarea):focus { border-color: var(--rh-focus); }
  html[data-rh-theme="dark"] :is(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--rh-aqua); }
  html[data-rh-theme="dark"] :is(.button:not(.primary), .task-check, .column-settings > summary, .column-settings button, .vto-plan-actions > summary, .chart-pan-controls .icon-button) {
    background: var(--rh-surface);
    color: var(--rh-text);
    border-color: var(--rh-control-border);
  }
  html[data-rh-theme="dark"] :is(.button:not(.primary):hover:not(:disabled), .column-settings button:hover, .vto-plan-actions > summary:hover) {
    background: var(--rh-raised);
    border-color: var(--rh-control-border);
  }
  html[data-rh-theme="dark"] .rh-company-scope :is(.button.primary, .icon-button.primary) {
    background: var(--rh-aqua);
    color: var(--rh-midnight);
    border-color: var(--rh-aqua);
  }
  html[data-rh-theme="dark"] .rh-company-scope :is(.button.primary, .icon-button.primary):hover:not(:disabled) {
    background: var(--rh-link);
    border-color: var(--rh-link);
    filter: none;
  }
  html[data-rh-theme="dark"] :is(.text-button, .knowledge-resource, .seat-reports button, .chart-location button, .history-source summary, .preview-banner button) { color: var(--rh-link); }
  html[data-rh-theme="dark"] .segmented { background: var(--rh-page); }
  html[data-rh-theme="dark"] .segmented button { color: var(--rh-secondary); }
  html[data-rh-theme="dark"] .segmented button.active {
    background: var(--rh-raised);
    color: var(--rh-text);
    box-shadow: inset 0 -2px var(--rh-aqua);
  }
  html[data-rh-theme="dark"] :is(.planning-navigation button.active, .vto-tabs button.active, .score-view-tabs button.active, .agenda-item.active) {
    background: var(--rh-raised);
    color: var(--rh-link);
    border-color: var(--rh-aqua);
  }
  html[data-rh-theme="dark"] :is(.vto-tabs button, .agenda-item.active .agenda-index) { color: var(--rh-secondary); }

  /* Semantic foreground/background pairs. Text and existing labels remain;
     color is not the only indication of late, warning, or failed work. */
  html[data-rh-theme="dark"] :is(.task-row .due.late, .badge.bad, .score-grid td.bad, .form-error, .error-text, .toast.error) {
    background: var(--rh-error-bg);
    color: var(--rh-error);
    border-color: var(--rh-error);
  }
  html[data-rh-theme="dark"] :is(.issue-rank.priority, .badge.warning, .badge.provisional, .score-grid td.warning, .score-grid td.provisional, .save-strip.attention) {
    background: var(--rh-warning-bg);
    color: var(--rh-warning);
    border-color: var(--rh-warning);
  }
  html[data-rh-theme="dark"] :is(.badge.good, .score-grid td.good, .task-row.done .task-check, .complete-icon, .planning-export-ready, .toast:not(.error)) {
    background: var(--rh-success-bg);
    color: var(--rh-success);
    border-color: var(--rh-success);
  }
  html[data-rh-theme="dark"] :is(.directory-import, .calculation-preview) {
    background: var(--rh-info-bg);
    color: var(--rh-info);
    border-color: var(--rh-border);
  }
  html[data-rh-theme="dark"] :is(.planning-items .planning-complete, .vto-permission.editable) { color: var(--rh-success); }
  html[data-rh-theme="dark"] :is(.chart-metrics .has-vacancies strong, .sync-indicator.stale, .sync-indicator.failed) { color: var(--rh-warning); }
  html[data-rh-theme="dark"] .planning-export-ready p { color: var(--rh-success); }

  /* Score cells retain their semantic fills; section headers are neutral. */
  html[data-rh-theme="dark"] .score-group-heading th {
    background: var(--rh-raised) !important;
    border-color: var(--rh-border);
  }
  html[data-rh-theme="dark"] .score-group-heading button { color: var(--rh-text); }
  html[data-rh-theme="dark"] .score-group-heading button > span { color: var(--rh-secondary); }
  html[data-rh-theme="dark"] :is(.progress-track, .goal-track) { background: var(--rh-raised); }
  html[data-rh-theme="dark"] :is(.progress-track span, .goal-track > span, .history-duration-bar) { background: var(--rh-aqua); }
  html[data-rh-theme="dark"] .sparkline { color: var(--rh-info); }
  html[data-rh-theme="dark"] .sparkline.good { color: var(--rh-success); }
  html[data-rh-theme="dark"] .sparkline.bad { color: var(--rh-error); }
  html[data-rh-theme="dark"] .sparkline.provisional { color: var(--rh-warning); }
  html[data-rh-theme="dark"] .chart-connectors path { stroke: var(--rh-control-border); }
  html[data-rh-theme="dark"] .chart-seat { border-top-color: var(--rh-aqua); }
  html[data-rh-theme="dark"] .chart-seat.context { border-top-color: var(--rh-secondary); }
  html[data-rh-theme="dark"] .chart-seat.vacant { border-top-color: var(--rh-warning); }
  html[data-rh-theme="dark"] :is(.chart-seat:hover, .chart-seat.selected, .metric-card.current) {
    border-color: var(--rh-aqua);
    box-shadow: inset 0 0 0 1px var(--rh-aqua);
  }
  html[data-rh-theme="dark"] :is(.chart-location, .chart-seat-footer, .chart-canvas-footer) { border-color: var(--rh-border); }
  html[data-rh-theme="dark"] :is(.chart-search, .chart-zoom-value, .rich-editor) { border-color: var(--rh-control-border); }
  html[data-rh-theme="dark"] :is(.chart-seat-responsibilities > span::before, .outline-responsibilities > span::before) { color: var(--rh-secondary); }
  /* The original target card declares both properties important. */
  html[data-rh-theme="dark"] .vto-section-target {
    background: var(--rh-surface) !important;
    border-color: var(--rh-border) !important;
  }

  /* This is an editor preview of saved company colors, not a second live
     workspace. Its card and headings must not inherit the dark text palette. */
  html[data-rh-theme="dark"] .appearance-preview {
    color-scheme: light;
    color: #263442;
    --muted: #536571;
  }
  html[data-rh-theme="dark"] .appearance-preview-main { color: #263442; }
  html[data-rh-theme="dark"] .appearance-preview-main h3 { color: #263442; }
  html[data-rh-theme="dark"] .appearance-preview-card {
    background: #FFFFFF;
    color: #263442;
    border-color: #D8E1E8;
  }
  html[data-rh-theme="dark"] .appearance-preview-card > span { color: #536571; }
  html[data-rh-theme="dark"] .appearance-preview .company-brand-caption { color: var(--sidebar-ink); }
  html[data-rh-theme="dark"] .rh-company-scope .appearance-preview .button.primary {
    background: var(--navy);
    color: var(--sidebar-ink);
    border-color: var(--navy);
  }
}

/* Auth/entry controls have more specific retained rules than generic inputs.
   Keep the reviewed stronger control boundary after quieting panel dividers. */
@media screen {
  html[data-rh-theme="dark"] :is(.auth-action button, .boot button, .rh-account .button, .rh-appearance-control select, .rh-password-control, .rh-password-toggle, .rh-auth-card input) {
    border-color: var(--rh-control-border);
  }
}