/* Dark theme: enabled by html[data-theme="dark"] (system preference by default, toggle in the profile menu).
   The light styles hard-code colors, so this layer re-maps every surface, text and border it relies on. */
/* Wrapped in a cascade layer: layered !important declarations override every unlayered !important rule of the light theme, whatever its selector specificity. */
@layer dark-theme {
html[data-theme="dark"] {
  color-scheme: dark;
  --d-bg: #15131b;
  --d-surface: #1c1924;
  --d-surface-2: #231f2d;
  --d-surface-3: #2b2637;
  --d-hover: #2a2535;
  --d-border: #322c3f;
  --d-border-strong: #463e57;
  --d-text: #ece9f3;
  --d-text-2: #c4bed2;
  --d-muted: #938ca5;
  --d-accent: #a88bf5;
  --d-accent-strong: #8a66ea;
  --d-accent-bg: #2f2748;
  --d-danger: #f08a98;
  --d-danger-bg: #3a2029;
  --d-warn: #f0c070;
  --d-warn-bg: #3a2f1a;
  --d-ok: #8fd47a;
  --d-ok-bg: #1f3320;
  --d-info: #8ec3e6;
  --d-info-bg: #1b2d3a;
}

/* Page, sidebar and shell */
html[data-theme="dark"] body,
html[data-theme="dark"] .app,
html[data-theme="dark"] .workspace,
html[data-theme="dark"] .workspace > .main-view,
html[data-theme="dark"] .workspace .topbar,
html[data-theme="dark"] .workspace #filters,
html[data-theme="dark"] .workspace .view-tabs { background: var(--d-bg) !important; color: var(--d-text) !important; border-color: var(--d-border) !important; }
html[data-theme="dark"] .app .sidebar { background: var(--d-surface) !important; border-color: var(--d-border) !important; }
html[data-theme="dark"] .app .brand h1,
html[data-theme="dark"] .app .sidebar .project strong,
html[data-theme="dark"] .board-profile-copy strong { color: var(--d-text) !important; }
html[data-theme="dark"] .app .app-nav button,
html[data-theme="dark"] .app .side-section-title,
html[data-theme="dark"] .board-profile-copy small { color: var(--d-text-2) !important; }
html[data-theme="dark"] .app .app-nav button::before,
html[data-theme="dark"] .app .sidebar .project-mini-icon::before { background: var(--d-muted) !important; color: var(--d-muted) !important; }
html[data-theme="dark"] .app .app-nav button.active,
html[data-theme="dark"] .app .project-row.active .project { background: var(--d-accent-bg) !important; color: var(--d-accent) !important; }
html[data-theme="dark"] .app .app-nav button.active::before,
html[data-theme="dark"] .app .project-row.active .project-mini-icon::before { background: var(--d-accent) !important; }
html[data-theme="dark"] .app .project-row.active .project strong { color: var(--d-accent) !important; }
html[data-theme="dark"] .app .sidebar-profile { border-color: var(--d-border) !important; }
html[data-theme="dark"] .sidebar-profile-menu { background: var(--d-surface-2) !important; border-color: var(--d-border) !important; color: var(--d-text) !important; }
html[data-theme="dark"] .sidebar-profile-menu button { color: var(--d-text) !important; background: transparent !important; }
html[data-theme="dark"] .sidebar-profile-menu button:hover { background: var(--d-hover) !important; }
html[data-theme="dark"] .sidebar-profile-menu small { color: var(--d-muted) !important; }

/* Headings and text */
html[data-theme="dark"] .workspace #projectTitle,
html[data-theme="dark"] .workspace :is(h1, h2, h3, h4, strong),
html[data-theme="dark"] :where(#modal, dialog, .login-panel, #taskDetails) :is(h1, h2, h3, h4, strong) { color: var(--d-text) !important; }
html[data-theme="dark"] .workspace #projectMeta,
html[data-theme="dark"] .workspace :is(p, small),
html[data-theme="dark"] :where(#modal, dialog, .login-panel, #taskDetails) :is(p, small) { color: var(--d-muted) !important; }
html[data-theme="dark"] .workspace .view-tabs button { color: var(--d-muted) !important; }
html[data-theme="dark"] .workspace .view-tabs button.active { color: var(--d-accent) !important; border-bottom-color: var(--d-accent) !important; }
html[data-theme="dark"] .workspace #projectIcon { background: var(--d-accent-bg) !important; }

/* Controls */
html[data-theme="dark"] :where(.workspace, #modal, dialog, .login-panel, #taskDetails, .sidebar) :where(input:not([type="checkbox"], [type="radio"], [type="color"]), select, textarea) {
  background-color: var(--d-surface-2) !important; color: var(--d-text) !important; border-color: var(--d-border-strong) !important;
}
html[data-theme="dark"] :where(.workspace, #modal, dialog, .login-panel, #taskDetails) :is(input, textarea)::placeholder { color: var(--d-muted) !important; }
html[data-theme="dark"] :where(.workspace, #modal, dialog, #taskDetails) button:where(:not(.primary, .danger-confirm-button, .overview-person, .overview-remove, .home-project-tile, [data-home-tab], .home-show-all, .list-project-link, .planning-name, .planning-project, [data-list-section-add], [data-list-add-section], .password-toggle, .my-task-check, [data-toast-action], #newTask, #taskToolbarAdd, [data-home-action], .calendar-chip, .task-card, .my-task-row, .overview-task-row, .calendar-row, .timeline-row, .home-project, .complete-toggle, .calendar-jump)) {
  background-color: var(--d-surface-2) !important; color: var(--d-text-2) !important; border-color: var(--d-border-strong) !important;
}
html[data-theme="dark"] .workspace #searchInput { background-color: var(--d-surface-2) !important; }
html[data-theme="dark"] :where(.workspace, #modal, dialog, .login-panel, #taskDetails) :is(button.primary, #newTask, #taskToolbarAdd, #settingsBackup) { background: var(--d-accent-strong) !important; border-color: var(--d-accent-strong) !important; color: #fff !important; }
html[data-theme="dark"] .workspace #boardMyTasks[aria-pressed="true"],
html[data-theme="dark"] .inbox-view .segmented button.active { background: var(--d-accent-bg) !important; color: var(--d-accent) !important; border-color: var(--d-accent-strong) !important; }

/* Generic cards and panels */
html[data-theme="dark"] :is(
  .board-view .column, .list-view .list-shell, .my-tasks-view .my-task-group, .inbox-view .inbox-stack,
  .dashboard-view .overview-hero, .dashboard-view .dash-panel, .calendar-view .calendar-month, .calendar-view .calendar-agenda,
  .files-view .file-tile, .settings-view .settings-card, .timeline-view .timeline-shell, .home-view .home-card,
  .reports-view .dash-panel, .team-directory, .team-access-guide, .audit-filters, .audit-results, .rules-toolbar, .rule-flow-card,
  .team-view .team-table-wrap, .team-view .team-role-grid > *, .empty-state, .state-panel
) { background: var(--d-surface) !important; border-color: var(--d-border) !important; color: var(--d-text) !important; }
html[data-theme="dark"] :is(
  .dashboard-view .overview-stat, .settings-view .settings-overview article, .home-view .home-stats article, .workspace > #summary .metric,
  :is(.report-overview, .team-overview) > *, .list-view .section-row, .list-view .list-header-row,
  .my-tasks-view .my-task-group > header, .calendar-view .calendar-weekday, .timeline-view .timeline-scale, .files-view .file-tile .attachment-card,
  .files-view .file-tile .attachment-media-button
) { background: var(--d-surface-2) !important; border-color: var(--d-border) !important; }

/* Rows */
html[data-theme="dark"] :is(
  .board-view .task-card, .list-view .list-task-row, .list-view .quick-task-row, .my-tasks-view .my-task-row, .inbox-view .inbox-item,
  .calendar-view .calendar-row, .calendar-view .calendar-day, .timeline-view .timeline-row, .files-view .file-tile > button,
  .settings-view :is(.pill-row, .backup-row, .automation), .dashboard-view .overview-task-row, .home-view .home-project,
  .audit-view .audit-row, .reports-view :is(.progress-row, .workload-row, .report-row)
) { background: var(--d-surface) !important; border-color: var(--d-border) !important; }
html[data-theme="dark"] .board-view .task-card { background: var(--d-surface-2) !important; }
html[data-theme="dark"] :is(
  .board-view .task-card, .list-view .list-task-row, .my-tasks-view .my-task-row, .inbox-view .inbox-item, .calendar-view .calendar-row,
  .timeline-view .timeline-row, .settings-view :is(.pill-row, .automation), .dashboard-view .overview-task-row, .home-view .home-project
):hover { background: var(--d-hover) !important; }
html[data-theme="dark"] .board-view .task-card:is(:hover, :focus-within, .active) { border-color: var(--d-accent-strong) !important; }
html[data-theme="dark"] .calendar-view .calendar-day:is(.outside, .weekend) { background: #19161f !important; }
html[data-theme="dark"] .calendar-view .calendar-day.outside .calendar-day-number { color: #5d566c !important; }
html[data-theme="dark"] .calendar-view .calendar-day-number { color: var(--d-text-2) !important; }
html[data-theme="dark"] .calendar-view .calendar-day.today .calendar-day-number { background: var(--d-accent-strong) !important; color: #fff !important; }
html[data-theme="dark"] .inbox-view .inbox-item.unread { background: #211c2d !important; }
html[data-theme="dark"] .board-view .task-card-title,
html[data-theme="dark"] .list-view .list-task-main strong,
html[data-theme="dark"] .my-tasks-view .my-task-main strong { color: var(--d-text) !important; }
html[data-theme="dark"] .board-view .task-card-description,
html[data-theme="dark"] .list-view .list-cell,
html[data-theme="dark"] .board-count,
html[data-theme="dark"] .list-view .list-header-row span { color: var(--d-muted) !important; }
html[data-theme="dark"] .board-view .board-quick-task input,
html[data-theme="dark"] .list-view .quick-task-row input { background: transparent !important; color: var(--d-accent) !important; border: 0 !important; }

/* Pills and badges */
html[data-theme="dark"] :is(.task-priority-pill, .board-priority, .my-task-row .priority, .status-pill) { background: var(--d-surface-3) !important; color: var(--d-text-2) !important; }
html[data-theme="dark"] :is(.task-priority-pill.urgent, .board-priority.urgent, .my-task-row .priority.urgent, .status-pill[data-status="blocked"], .status-chip.off_track) { background: var(--d-danger-bg) !important; color: var(--d-danger) !important; }
html[data-theme="dark"] :is(.task-priority-pill.high, .board-priority, .my-task-row .priority.high, .status-chip.at_risk) { background: var(--d-warn-bg) !important; color: var(--d-warn) !important; }
html[data-theme="dark"] :is(.task-priority-pill.low, .my-task-row .priority.low) { background: var(--d-info-bg) !important; color: var(--d-info) !important; }
html[data-theme="dark"] :is(.status-pill[data-status="done"], .status-chip) { background: var(--d-ok-bg) !important; color: var(--d-ok) !important; }
html[data-theme="dark"] :is(.status-pill[data-status="active"], .settings-pill) { background: var(--d-accent-bg) !important; color: var(--d-accent) !important; }
html[data-theme="dark"] .tag { background: color-mix(in srgb, var(--tag, #7954d6) 22%, #1c1924) !important; color: color-mix(in srgb, var(--tag, #7954d6) 45%, #fff) !important; }
html[data-theme="dark"] .due-badge { color: var(--d-muted) !important; }
html[data-theme="dark"] .due-badge.overdue { color: var(--d-danger) !important; }
html[data-theme="dark"] .due-badge.today { color: var(--d-accent) !important; }
html[data-theme="dark"] .due-badge.done { color: var(--d-ok) !important; }
html[data-theme="dark"] .calendar-view .calendar-chip { background: var(--d-accent-bg) !important; color: var(--d-text) !important; }
html[data-theme="dark"] .calendar-view .calendar-chip.overdue { background: var(--d-danger-bg) !important; color: var(--d-danger) !important; }
html[data-theme="dark"] .calendar-view .calendar-chip.done { background: var(--d-ok-bg) !important; color: #9fb897 !important; }
html[data-theme="dark"] .home-view .home-stats article.alert { background: var(--d-danger-bg) !important; }
html[data-theme="dark"] .home-view .home-stats article.alert strong { color: var(--d-danger) !important; }
html[data-theme="dark"] .home-view .home-onboarding { background: linear-gradient(135deg, #2a2340, var(--d-surface) 60%) !important; border-color: #3d3358 !important; }
html[data-theme="dark"] :is(meter, .home-project-progress, .home-onboarding-progress, .board-checklist-meter, .list-checklist-mini i) { background: var(--d-surface-3) !important; }
html[data-theme="dark"] .avatar,
html[data-theme="dark"] .avatar-stack .avatar { border-color: var(--d-surface) !important; }

/* Task card (details) */
html[data-theme="dark"] #taskDetails,
html[data-theme="dark"] #taskDetails :is(.concept-body, .concept-work, .details-head, .panel, .details-section, .comment-form, .task-actions-menu) { background: var(--d-surface) !important; color: var(--d-text) !important; border-color: var(--d-border) !important; }
html[data-theme="dark"] #taskDetails .concept-meta { background: var(--d-surface-2) !important; border-color: var(--d-border) !important; }
html[data-theme="dark"] #taskDetails :is(.task-section-chip select, .attachment-dropzone, .concept-tabs) { background: var(--d-surface-2) !important; border-color: var(--d-border) !important; color: var(--d-text-2) !important; }
html[data-theme="dark"] #taskDetails .ghost-icon img,
html[data-theme="dark"] .task-actions-menu img { filter: invert(0.85); }
html[data-theme="dark"] #taskDetails :is(.field > span, .concept-kicker, .panel-head, summary) { color: var(--d-muted) !important; }
html[data-theme="dark"] #detailsBackdrop,
html[data-theme="dark"] .details-backdrop { background: #0008 !important; }

/* Dialogs and login */
html[data-theme="dark"] #modal,
html[data-theme="dark"] dialog,
html[data-theme="dark"] .global-search-modal,
html[data-theme="dark"] .login-screen .login-panel { background: var(--d-surface) !important; border-color: var(--d-border) !important; color: var(--d-text) !important; }
html[data-theme="dark"] #modal menu { background: var(--d-surface-2) !important; border-color: var(--d-border) !important; }
html[data-theme="dark"] .login-screen { background: var(--d-bg) !important; }
html[data-theme="dark"] .login-screen .login-brand { color: var(--d-text) !important; }
html[data-theme="dark"] :where(#modal, .login-panel) .field > span { color: var(--d-muted) !important; }
html[data-theme="dark"] .toast { background: var(--d-surface-3) !important; color: var(--d-text) !important; }
html[data-theme="dark"] .more-actions > div,
html[data-theme="dark"] .project-actions > div,
html[data-theme="dark"] .global-search-panel,
html[data-theme="dark"] .project-appearance-popover { background: var(--d-surface-2) !important; border-color: var(--d-border) !important; color: var(--d-text) !important; }
html[data-theme="dark"] .more-actions > div button,
html[data-theme="dark"] .project-actions > div button { color: var(--d-text-2) !important; background: transparent !important; }
html[data-theme="dark"] .more-actions > div button:hover { background: var(--d-hover) !important; }

/* Icons drawn from dark SVG files */
html[data-theme="dark"] :is(.board-view .task-card-menu img, .workspace img[src^="/icons/lucide/"]) { filter: invert(0.85); }

/* Ghost buttons keep a transparent background in dark mode too. */
html[data-theme="dark"] .workspace :is(.view-tabs button, .column-actions button, .board-quick-task button, .board-card-actions button, .section-row button, .task-checklist-toggle, .sidebar-collapse, .calendar-chip),
html[data-theme="dark"] #taskDetails :is(.ghost-icon, .concept-tabs button, .small-action, .panel-head button) { background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; }
html[data-theme="dark"] .workspace .column-actions button { color: var(--d-muted) !important; }
html[data-theme="dark"] .workspace .view-tabs button:not(.active) { color: var(--d-muted) !important; }
html[data-theme="dark"] .calendar-view .calendar-chip { background-color: var(--d-accent-bg) !important; }
html[data-theme="dark"] .calendar-view .calendar-chip.overdue { background-color: var(--d-danger-bg) !important; }
html[data-theme="dark"] .calendar-view .calendar-chip.done { background-color: var(--d-ok-bg) !important; }
html[data-theme="dark"] .home-view .home-card > header button,
html[data-theme="dark"] .files-view .files-toolbar button,
html[data-theme="dark"] .workspace details.more-actions > summary,
html[data-theme="dark"] .workspace .avatar-more { background: var(--d-surface-2) !important; border-color: var(--d-border-strong) !important; color: var(--d-text-2) !important; }
html[data-theme="dark"] .home-view .home-onboarding li button { background: var(--d-accent-strong) !important; color: #fff !important; }
html[data-theme="dark"] .board-view .board-card-tags .tag,
html[data-theme="dark"] .list-view .list-task-tags .tag,
html[data-theme="dark"] .settings-view .pill-row .tag { background: color-mix(in srgb, var(--tag, #7954d6) 22%, #1c1924) !important; color: color-mix(in srgb, var(--tag, #7954d6) 45%, #fff) !important; }
html[data-theme="dark"] .board-view .board-empty-column,
html[data-theme="dark"] .board-view .column-empty { background: transparent !important; border-color: var(--d-border-strong) !important; }

html[data-theme="dark"] .list-view .complete-circle,
html[data-theme="dark"] .board-view .card-complete { background-color: var(--d-surface-2) !important; border-color: var(--d-border-strong) !important; }
html[data-theme="dark"] .list-view .quick-task-row input,
html[data-theme="dark"] .board-view .board-quick-task input { background-color: transparent !important; border-color: transparent !important; }

/* Task card details */
html[data-theme="dark"] #taskDetails :is(#taskName, #taskDescription) { background-color: transparent !important; border-color: transparent !important; }
html[data-theme="dark"] #taskDetails :is(#taskName, #taskDescription):focus { background-color: var(--d-surface-2) !important; border-color: var(--d-border-strong) !important; }
html[data-theme="dark"] #taskDetails .task-section-chip,
html[data-theme="dark"] #taskDetails .task-section-chip select { background-color: var(--d-accent-bg) !important; color: var(--d-accent) !important; border-color: transparent !important; }
html[data-theme="dark"] #taskDetails :is(.subtask-progress, .task-card-progress, .task-work-panel > summary, .panel-head) { background-color: transparent !important; }
html[data-theme="dark"] #taskDetails :is(.subtask-progress, .task-card-progress) i,
html[data-theme="dark"] #taskDetails .task-work-panel::after { background-color: var(--d-surface-3) !important; }
html[data-theme="dark"] #taskDetails .task-work-panel { border-color: var(--d-border) !important; box-shadow: none !important; }
html[data-theme="dark"] #taskDetails :is(.tag-picker label, .tag-picker .tag, .tag-field .tag) { background: color-mix(in srgb, var(--tag, #7954d6) 22%, #1c1924) !important; color: color-mix(in srgb, var(--tag, #7954d6) 45%, #fff) !important; border-color: transparent !important; }
html[data-theme="dark"] #taskDetails :is(hr, .concept-meta > * + *) { border-color: var(--d-border) !important; }

/* Remaining light surfaces found page by page */
html[data-theme="dark"] .workspace :is(.inbox-toolbar, .list-checklist-mini, .rules-page-head) { background-color: transparent !important; }
html[data-theme="dark"] .workspace :is(.segmented, .empty, th, .team-count, .team-role-icon, .rule-card-controls, .rule-node-icon, .settings-view b) { background-color: var(--d-surface-2) !important; border-color: var(--d-border) !important; color: var(--d-text-2) !important; }
html[data-theme="dark"] .workspace .rule-node-icon { background-color: var(--d-accent-bg) !important; color: var(--d-accent) !important; }
html[data-theme="dark"] .workspace .rule-node-icon.green { background-color: var(--d-ok-bg) !important; color: var(--d-ok) !important; }
html[data-theme="dark"] .workspace .rule-node-icon.blue { background-color: var(--d-info-bg) !important; color: var(--d-info) !important; }
html[data-theme="dark"] .calendar-view .calendar-jump { background-color: var(--d-accent-bg) !important; color: var(--d-accent) !important; }
html[data-theme="dark"] .workspace .rule-flow-card :is(span, div):not(.rule-node-icon) { background-color: transparent !important; }

/* Text that stayed dark on dark surfaces */
html[data-theme="dark"] .workspace :is(td, .progress-row span, .workload-row span, .report-row span, .audit-row span, .attachment-media-button span, .rule-flow-card span) { color: var(--d-text-2) !important; }
html[data-theme="dark"] .app .sidebar-collapse { color: var(--d-muted) !important; }
html[data-theme="dark"] .calendar-view .calendar-day.outside .calendar-day-number { color: #736c85 !important; }
}