/* ============================================================================
   DARK MODE OVERRIDES
   Comprehensive overrides for elements with hardcoded light colors
   ============================================================================ */

/* Every rule below ships as a PAIR: a `[data-theme="dark"] …` half for the
   explicit choice, and a `:root:not([data-theme="light"]) …` half inside
   `@media (prefers-color-scheme: dark)` for the system default. The two halves
   must declare the same properties — the system half is one specificity step
   heavier, so it wins wherever both match. */

/* Planner - Today Calendar / Timeline Panel */
[data-theme="dark"] .today-calendar,
[data-theme="dark"] .timeline-header {
    background: var(--bg-secondary) !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .today-calendar,
    :root:not([data-theme="light"]) .timeline-header {
        background: var(--bg-secondary) !important;
    }
}

/* Planner - Toggle buttons container */
[data-theme="dark"] .planner-scope-toggle,
[data-theme="dark"] .today-view-toggle {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .planner-scope-toggle,
    :root:not([data-theme="light"]) .today-view-toggle {
        background: var(--bg-tertiary);
        border-color: var(--border-light);
    }
}

/* Toggle buttons - active state */
[data-theme="dark"] .scope-toggle-btn.active,
[data-theme="dark"] .view-toggle-btn.active,
[data-theme="dark"] .tasks-filter-btn.active {
    background: var(--bg-elevated) !important;
    color: var(--text-primary);
    box-shadow: var(--shadow-1);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .scope-toggle-btn.active,
    :root:not([data-theme="light"]) .view-toggle-btn.active,
    :root:not([data-theme="light"]) .tasks-filter-btn.active {
        background: var(--bg-elevated) !important;
        color: var(--text-primary);
        box-shadow: var(--shadow-1);
    }
}

/* Toggle button hover */
[data-theme="dark"] .scope-toggle-btn:hover:not(.active),
[data-theme="dark"] .view-toggle-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .scope-toggle-btn:hover:not(.active),
    :root:not([data-theme="light"]) .view-toggle-btn:hover:not(.active) {
        background: rgba(255, 255, 255, 0.05);
    }
}

/* Tasks View - Main content area */
[data-theme="dark"] .tasks-main-content {
    background: var(--bg-main);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tasks-main-content {
        background: var(--bg-main);
    }
}

/* Task rows in all-tasks view */
[data-theme="dark"] .all-tasks-row {
    background: var(--bg-card);
    border-color: var(--border-light);
}

[data-theme="dark"] .all-tasks-row:hover {
    background: var(--bg-elevated);
    border-color: var(--border-medium);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .all-tasks-row {
        background: var(--bg-card);
        border-color: var(--border-light);
    }
    :root:not([data-theme="light"]) .all-tasks-row:hover {
        background: var(--bg-elevated);
        border-color: var(--border-medium);
    }
}

/* Dashboard stat cards */
[data-theme="dark"] .dashboard-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
}

[data-theme="dark"] .dashboard-stat-card.clickable:hover {
    background: var(--bg-elevated);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .dashboard-stat-card {
        background: var(--bg-card);
        border: 1px solid var(--border-light);
    }
    :root:not([data-theme="light"]) .dashboard-stat-card.clickable:hover {
        background: var(--bg-elevated);
    }
}

/* Week view columns - base styles now use var(--bg-card) */
/* Keep elevated background for today column in dark mode */
[data-theme="dark"] .week-day-column.is-today,
[data-theme="dark"] .day-column.is-today {
    background: var(--bg-elevated);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .week-day-column.is-today,
    :root:not([data-theme="light"]) .day-column.is-today {
        background: var(--bg-elevated);
    }
}

/* Timeline events */
[data-theme="dark"] .timeline-event,
[data-theme="dark"] .calendar-event-item {
    background: var(--bg-elevated);
    border-color: var(--border-light);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .timeline-event,
    :root:not([data-theme="light"]) .calendar-event-item {
        background: var(--bg-elevated);
        border-color: var(--border-light);
    }
}

/* Sidebar panels */
[data-theme="dark"] .directory-panel,
[data-theme="dark"] .tasks-sidebar,
[data-theme="dark"] .notes-sidebar,
[data-theme="dark"] .projects-sidebar {
    background: var(--bg-sidebar);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .directory-panel,
    :root:not([data-theme="light"]) .tasks-sidebar,
    :root:not([data-theme="light"]) .notes-sidebar,
    :root:not([data-theme="light"]) .projects-sidebar {
        background: var(--bg-sidebar);
    }
}

/* Sidebar section styling in dark mode */
[data-theme="dark"] .tasks-panel-section {
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-md);
}

[data-theme="dark"] .notes-section-header {
    background: rgba(255, 255, 255, 0.02);
    border-top: none;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tasks-panel-section {
        background: rgba(255, 255, 255, 0.02);
        border-radius: var(--radius-md);
    }

    :root:not([data-theme="light"]) .notes-section-header {
        background: rgba(255, 255, 255, 0.02);
        border-top: none;
        margin-top: var(--space-3);
        padding-top: var(--space-3);
        border-radius: var(--radius-md) var(--radius-md) 0 0;
    }
}

/* Account and member cards in dark mode */
[data-theme="dark"] .connected-account-card,
[data-theme="dark"] .team-member-item,
[data-theme="dark"] .pending-invite-item {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--border-light);
}

[data-theme="dark"] .connected-account-card:hover,
[data-theme="dark"] .team-member-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .connected-account-card.needs-reconnect {
    background: rgba(245, 158, 11, 0.1);
    border-color: var(--color-amber);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .connected-account-card,
    :root:not([data-theme="light"]) .team-member-item,
    :root:not([data-theme="light"]) .pending-invite-item {
        background: rgba(255, 255, 255, 0.03);
        border-color: var(--border-light);
    }

    :root:not([data-theme="light"]) .connected-account-card:hover,
    :root:not([data-theme="light"]) .team-member-item:hover {
        background: rgba(255, 255, 255, 0.05);
    }

    :root:not([data-theme="light"]) .connected-account-card.needs-reconnect {
        background: rgba(245, 158, 11, 0.1);
        border-color: var(--color-amber);
    }
}

/* Support info grid in dark mode */
[data-theme="dark"] .support-info-grid {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-light);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .support-info-grid {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--border-light);
    }
}

/* Input fields and controls in dark mode */
[data-theme="dark"] .setting-control select,
[data-theme="dark"] .setting-control input[type="time"],
[data-theme="dark"] .setting-control input[type="text"],
[data-theme="dark"] .setting-control input[type="email"] {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-medium);
}

[data-theme="dark"] .setting-control select:focus,
[data-theme="dark"] .setting-control input[type="time"]:focus,
[data-theme="dark"] .setting-control input[type="text"]:focus,
[data-theme="dark"] .setting-control input[type="email"]:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-blue);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .setting-control select,
    :root:not([data-theme="light"]) .setting-control input[type="time"],
    :root:not([data-theme="light"]) .setting-control input[type="text"],
    :root:not([data-theme="light"]) .setting-control input[type="email"] {
        background: rgba(255, 255, 255, 0.05);
        border-color: var(--border-medium);
    }

    :root:not([data-theme="light"]) .setting-control select:focus,
    :root:not([data-theme="light"]) .setting-control input[type="time"]:focus,
    :root:not([data-theme="light"]) .setting-control input[type="text"]:focus,
    :root:not([data-theme="light"]) .setting-control input[type="email"]:focus {
        background: rgba(255, 255, 255, 0.08);
        border-color: var(--accent-blue);
    }
}

/* Buttons in dark mode */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-tertiary {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-medium);
}

[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-tertiary:hover {
    background: rgba(255, 255, 255, 0.08);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .btn-secondary,
    :root:not([data-theme="light"]) .btn-tertiary {
        background: rgba(255, 255, 255, 0.05);
        border-color: var(--border-medium);
    }

    :root:not([data-theme="light"]) .btn-secondary:hover,
    :root:not([data-theme="light"]) .btn-tertiary:hover {
        background: rgba(255, 255, 255, 0.08);
    }
}

/* Note cards and Project cards */
[data-theme="dark"] .note-card,
[data-theme="dark"] .project-card,
[data-theme="dark"] .dashboard-project-row,
[data-theme="dark"] .dashboard-note-card {
    background: var(--bg-card);
    border-color: var(--border-light);
}

[data-theme="dark"] .note-card:hover,
[data-theme="dark"] .project-card:hover,
[data-theme="dark"] .dashboard-project-row:hover,
[data-theme="dark"] .dashboard-note-card:hover {
    background: var(--bg-elevated);
    border-color: var(--border-medium);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .note-card,
    :root:not([data-theme="light"]) .project-card,
    :root:not([data-theme="light"]) .dashboard-project-row,
    :root:not([data-theme="light"]) .dashboard-note-card {
        background: var(--bg-card);
        border-color: var(--border-light);
    }
    :root:not([data-theme="light"]) .note-card:hover,
    :root:not([data-theme="light"]) .project-card:hover,
    :root:not([data-theme="light"]) .dashboard-project-row:hover,
    :root:not([data-theme="light"]) .dashboard-note-card:hover {
        background: var(--bg-elevated);
        border-color: var(--border-medium);
    }
}

/* Modals and Dropdowns */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .task-modal-content,
[data-theme="dark"] .note-modal-content,
[data-theme="dark"] .project-modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .context-menu {
    background: var(--bg-elevated);
    border-color: var(--border-light);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .modal-content,
    :root:not([data-theme="light"]) .task-modal-content,
    :root:not([data-theme="light"]) .note-modal-content,
    :root:not([data-theme="light"]) .project-modal-content,
    :root:not([data-theme="light"]) .dropdown-menu,
    :root:not([data-theme="light"]) .context-menu {
        background: var(--bg-elevated);
        border-color: var(--border-light);
    }
}

/* Snackbar dark mode */
[data-theme="dark"] .snackbar {
    background: var(--bg-elevated);
    border-color: var(--border-light);
}

[data-theme="dark"] .snackbar-open:hover {
    background: rgba(91, 159, 227, 0.14);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .snackbar {
        background: var(--bg-elevated);
        border-color: var(--border-light);
    }

    :root:not([data-theme="light"]) .snackbar-open:hover {
        background: rgba(91, 159, 227, 0.14);
    }
}

/* Input fields */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
    color: var(--text-primary);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-quaternary);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) input[type="text"],
    :root:not([data-theme="light"]) input[type="email"],
    :root:not([data-theme="light"]) input[type="password"],
    :root:not([data-theme="light"]) input[type="search"],
    :root:not([data-theme="light"]) textarea,
    :root:not([data-theme="light"]) select {
        background: var(--bg-tertiary);
        border-color: var(--border-light);
        color: var(--text-primary);
    }
    :root:not([data-theme="light"]) input::placeholder,
    :root:not([data-theme="light"]) textarea::placeholder {
        color: var(--text-quaternary);
    }
}

/* Backlog task items */
[data-theme="dark"] .backlog-task-item {
    background: var(--bg-card);
}

[data-theme="dark"] .backlog-task-item:hover {
    background: var(--bg-elevated);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .backlog-task-item {
        background: var(--bg-card);
    }
    :root:not([data-theme="light"]) .backlog-task-item:hover {
        background: var(--bg-elevated);
    }
}