/* Dark appearance is opt-in. Keep the approved spacing, typography, and member colors. */
.display-preferences > label.theme-preference-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  margin: 12px 0 20px;
  font-size: .94rem;
  cursor: pointer;
}
.theme-preference-row > span { flex: 1; }
.theme-preference-row #displayDarkMode {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 48px;
  width: 48px;
  height: 28px;
  min-width: 48px;
  min-height: 28px;
  margin: 0;
  padding: 0;
  position: relative;
  border: 1px solid #a8a8a8;
  border-radius: 999px;
  background: #cbcbcb;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
.theme-preference-row #displayDarkMode::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px #0003;
  transition: transform .16s ease;
}
.theme-preference-row #displayDarkMode:checked { background: #606872; border-color: #606872; }
.theme-preference-row #displayDarkMode:checked::before { transform: translateX(20px); }
.theme-preference-row #displayDarkMode:focus-visible {
  outline: 3px solid #6e97ca;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .theme-preference-row #displayDarkMode,
  .theme-preference-row #displayDarkMode::before { transition: none; }
}

/* Surface and type tokens override the light-only approved visual baseline. */
html[data-theme="dark"] {
  --ink: #e6e6e6;
  --muted: #acaeb2;
  --paper: #24272b;
  --canvas: #17191d;
  --line: #42474e;
  --soft: #32363c;
  --warn: #ff978b;
  --dark: #34383e;
  --shadow: none;
  color: var(--ink);
  background: var(--canvas);
  color-scheme: dark;
}
html[data-theme="dark"] body,
html[data-theme="dark"] #app { color: var(--ink); background: var(--canvas); }
html[data-theme="dark"] .rail {
  background: #1c1e22 !important;
  color: var(--ink) !important;
  border-color: var(--line);
}
html[data-theme="dark"] .nav-button { color: var(--ink) !important; }
html[data-theme="dark"] .nav-button:hover,
html[data-theme="dark"] .nav-button.active { background: var(--soft) !important; }
html[data-theme="dark"] .hero,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .detail-card { background-color: var(--paper); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .hero-visual:not(.has-photo) {
  background: #30343a !important;
  color: var(--muted);
}
html[data-theme="dark"] .hero-visual:not(.has-photo) .hero-concept { color: var(--ink); }
html[data-theme="dark"] .progress-fill { background: #a5a9ad; }
html[data-theme="dark"] .primary,
html[data-theme="dark"] .secondary,
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .status {
  background: var(--paper) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .status.doing,
html[data-theme="dark"] .status.done,
html[data-theme="dark"] .status.overdue,
html[data-theme="dark"] .calendar-modes button[aria-pressed="true"],
html[data-theme="dark"] .view-switch button.active,
html[data-theme="dark"] .color-switch button.active {
  background: var(--soft) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .toast { background: #30343a; color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .row-click:hover,
html[data-theme="dark"] .day:hover,
html[data-theme="dark"] .secondary:hover,
html[data-theme="dark"] .icon-button:hover { background: var(--soft) !important; }
html[data-theme="dark"] .thumb,
html[data-theme="dark"] .cal-head,
html[data-theme="dark"] .empty-day,
html[data-theme="dark"] .person-column { background: var(--soft); color: var(--ink); }
html[data-theme="dark"] .date-choice,
html[data-theme="dark"] .quick-option,
html[data-theme="dark"] .member-item,
html[data-theme="dark"] .member-check,
html[data-theme="dark"] .form-field input,
html[data-theme="dark"] .form-field select,
html[data-theme="dark"] .form-field textarea,
html[data-theme="dark"] .display-preferences > select,
html[data-theme="dark"] .date-picker,
html[data-theme="dark"] .sharing-input-row input,
html[data-theme="dark"] .constraint-control {
  background: #282c31;
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #969ba2; }
html[data-theme="dark"] .date-choice.outside { background: #202328; color: var(--muted); }
html[data-theme="dark"] .date-choice.blocked,
html[data-theme="dark"] .date-choice.busy { color: #fff; }
html[data-theme="dark"] .person-column-title,
html[data-theme="dark"] .timeline-lane-title,
html[data-theme="dark"] .timeline-band { color: #fff; }

/* Task cards: keep completion and assignee/project accents recognizable. */
html[data-theme="dark"] #rows .task-row.task-day-white { background-color: #24272b !important; }
html[data-theme="dark"] #rows .task-row.task-day-gray { background-color: #2d3035 !important; }
html[data-theme="dark"] #rows .task-row.task-recently-moved,
html[data-theme="dark"] #rows .task-row.task-pointer-source { background-color: #3a3f46 !important; }
html[data-theme="dark"] #rows .task-row .process-v1-what .process-v1-task-label,
html[data-theme="dark"] #rows .process-v1-what .row-title,
html[data-theme="dark"] .process-v1-when strong,
html[data-theme="dark"] .process-v1-people,
html[data-theme="dark"] .process-v1-predecessor strong {
  color: var(--ink) !important;
}
html[data-theme="dark"] .process-v1-when small,
html[data-theme="dark"] .process-v1-roompart,
html[data-theme="dark"] .process-v1-meta,
html[data-theme="dark"] .process-v1-predecessor small { color: var(--muted); }
html[data-theme="dark"] .task-card-memo { color: #95c8f6; }
html[data-theme="dark"] .process-v1-predecessor,
html[data-theme="dark"] .process-v1-predecessor input,
html[data-theme="dark"] .process-v2-stats > div,
html[data-theme="dark"] .process-v2-complete,
html[data-theme="dark"] .process-v2-state { background: var(--soft); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .process-v2-stats strong,
html[data-theme="dark"] .process-v2-session strong { color: var(--ink); }
html[data-theme="dark"] .process-v2-stats small,
html[data-theme="dark"] .process-v2-session span,
html[data-theme="dark"] .process-v2-done { color: var(--muted); }
html[data-theme="dark"] .completed-tasks-list .task-row.completed-task-row,
html[data-theme="dark"] .completed-task-row { background: #292926; }
html[data-theme="dark"] .completed-tasks-list .task-row.completed-task-row .process-v1-task-label,
html[data-theme="dark"] .completed-task-row .process-v1-when strong { color: #fff !important; }

/* Process conditions, selection sheets, and crew availability. */
html[data-theme="dark"] .process-v3-condition-block[data-constraint-block],
html[data-theme="dark"] .process-v3-condition-block[data-constraint-block].is-active,
html[data-theme="dark"] .process-v3-conditions,
html[data-theme="dark"] .process-v3-date-row input,
html[data-theme="dark"] .process-v3-date-row select,
html[data-theme="dark"] .process-v3-condition-block > input[type=date],
html[data-theme="dark"] .process-v3-earliest-row input,
html[data-theme="dark"] .process-v3-segmented span,
html[data-theme="dark"] .entry-choice-sheet,
html[data-theme="dark"] .entry-choice-row,
html[data-theme="dark"] .entry-choice-list button,
html[data-theme="dark"] .entry-choice-sheet .entry-choice-search,
html[data-theme="dark"] .entry-choice-open,
html[data-theme="dark"] .availability-sheet,
html[data-theme="dark"] .availability-choice,
html[data-theme="dark"] .availability-member,
html[data-theme="dark"] .availability-times select,
html[data-theme="dark"] .availability-actions,
html[data-theme="dark"] .sharing-incoming {
  background: var(--paper) !important;
  color: var(--ink);
  border-color: var(--line) !important;
}
html[data-theme="dark"] .process-v3-condition-block[data-constraint-block].is-active {
  background: #30343a !important;
}
html[data-theme="dark"] .process-v3-conditions .process-v3-condition-block .process-v3-condition-title,
html[data-theme="dark"] .process-v3-toggle strong,
html[data-theme="dark"] .process-v1-predecessors .process-v3-predecessor-room,
html[data-theme="dark"] .availability-heading h2 { color: var(--ink); }
html[data-theme="dark"] .process-v3-toggle small,
html[data-theme="dark"] .process-v3-setting-summary,
html[data-theme="dark"] .actual-work-heading,
html[data-theme="dark"] .availability-note,
html[data-theme="dark"] .availability-times label { color: var(--muted); }
html[data-theme="dark"] .process-v3-toggle input,
html[data-theme="dark"] .task-anchor-control { background: var(--soft); border-color: var(--line); }
html[data-theme="dark"] .process-v3-toggle input:checked { background: #6b737d; }
html[data-theme="dark"] .process-v3-segmented input:checked + span {
  background: #4d5865 !important;
  color: #fff !important;
}
html[data-theme="dark"] .process-v1-predecessor input:checked {
  background: #596474;
  border-color: #8491a2;
}
html[data-theme="dark"] .auth-primary {
  background: #47515d;
  color: #f5f7fa;
}
html[data-theme="dark"] .auth-secondary {
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .process-v3-warning { background: #363331 !important; border-color: #847b68 !important; color: var(--ink) !important; }
html[data-theme="dark"] .process-v2-action.actual-entry-action { color: var(--ink) !important; border-color: var(--line) !important; }
html[data-theme="dark"] .process-v2-action.actual-entry-action:hover { background: var(--soft) !important; }
html[data-theme="dark"] .entry-choice-list button[aria-pressed=true],
html[data-theme="dark"] .entry-choice-row:has([data-choice][aria-pressed=true]) { background: var(--soft) !important; color: var(--ink); }
html[data-theme="dark"] .availability-choice[aria-pressed=true] { background: #3c434b !important; color: #fff; }
html[data-theme="dark"] .member-unavailable-label,
html[data-theme="dark"] .calendar-attendees .attendee-hours,
html[data-theme="dark"] .viewer-notice { background: var(--soft); color: var(--ink); }

/* Calendar grid and the bottom navigation previously had forced light colors. */
html[data-theme="dark"] .calendar-workspace {
  --surface: var(--paper);
  --grid: var(--line);
  color: var(--ink) !important;
  background: var(--canvas) !important;
}
html[data-theme="dark"] .calendar-month-grid,
html[data-theme="dark"] .calendar-time-grid,
html[data-theme="dark"] .week-calendar,
html[data-theme="dark"] .day-calendar,
html[data-theme="dark"] .calendar-month-cell,
html[data-theme="dark"] .calendar-time-header,
html[data-theme="dark"] .calendar-time-body,
html[data-theme="dark"] .calendar-page-transition,
html[data-theme="dark"] .calendar-page-transition-pane {
  background-color: var(--paper) !important;
  color: var(--ink);
  border-color: var(--line);
}
html[data-theme="dark"] .calendar-month-cell.outside { background: #1e2125 !important; color: var(--muted); }
html[data-theme="dark"] .calendar-month-cell.is-today { background-color: #233848 !important; }
html[data-theme="dark"] .calendar-weekday,
html[data-theme="dark"] .calendar-project-legend,
html[data-theme="dark"] .calendar-color-label,
html[data-theme="dark"] .calendar-hours { color: var(--muted); }
html[data-theme="dark"] #app .calendar-entry.calendar-other-project { background: #34383f !important; color: #bbc0c7 !important; }
html[data-theme="dark"] .calendar-drag-edge { background: #42464dcc; color: var(--ink); }
html[data-theme="dark"] .calendar-placement-preview { background: #294633dd; color: #d3f0da; }
html[data-theme="dark"] #mobileNav,
html[data-theme="dark"] .mobile-nav {
  background: rgba(35,38,42,.98) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] #mobileNav .nav-button { color: #b9bdc3 !important; }
html[data-theme="dark"] #mobileNav .nav-button.active,
html[data-theme="dark"] .mobile-nav .nav-button.active {
  background: #42474f !important;
  color: #fff !important;
}

/* Match the chosen appearance on the sign-in screen, regardless of OS setting. */
html[data-theme="dark"] .auth-gate { background: var(--canvas); color: var(--ink); }
html[data-theme="dark"] .auth-card { background: var(--paper); border-color: var(--line); }
html[data-theme="dark"] .auth-fields input { background: var(--canvas); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .auth-copy,
html[data-theme="dark"] .auth-message { color: var(--muted); }
html[data-theme="dark"] .auth-status-badge { background: var(--paper); border-color: var(--line); color: var(--muted); }
html[data-theme="light"] .auth-gate { background: #f4f2ed; color: #3b3b38; }
html[data-theme="light"] .auth-card { background: rgba(255,255,255,.72); border-color: rgba(45,45,43,.10); }
html[data-theme="light"] .auth-fields input { background: #fff; color: #3b3b38; border-color: rgba(45,45,43,.14); }
html[data-theme="light"] .auth-primary { background: #343431; color: #f4f2ed; }
html[data-theme="light"] .auth-secondary { color: #55554f; border-color: rgba(45,45,43,.14); }
html[data-theme="light"] .auth-copy,
html[data-theme="light"] .auth-message { color: #77766f; }
html[data-theme="light"] .auth-status-badge { background: rgba(250,249,246,.94); border-color: rgba(45,45,43,.12); color: #6d6c66; }