/* New task input area */
[data-theme="dark"] .new-task-input-wrapper,
[data-theme="dark"] .day-new-task {
    background: var(--bg-card);
    border-color: var(--border-light);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .new-task-input-wrapper,
    :root:not([data-theme="light"]) .day-new-task {
        background: var(--bg-card);
        border-color: var(--border-light);
    }
}

/* Search modal */
[data-theme="dark"] .search-modal-content {
    background: var(--bg-elevated);
}

[data-theme="dark"] .search-input-wrapper {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
}

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

/* Settings panel */
[data-theme="dark"] .settings-panel {
    background: var(--bg-main);
}

[data-theme="dark"] .settings-section {
    background: var(--bg-card);
    border-color: var(--border-light);
}

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

    :root:not([data-theme="light"]) .settings-section {
        background: var(--bg-card);
        border-color: var(--border-light);
    }
}

/* Drag preview */
[data-theme="dark"] .drag-preview {
    background: var(--bg-elevated);
    border-color: var(--border-medium);
}

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

/* Calendar events in timeline */
[data-theme="dark"] .timeline-slot {
    border-color: var(--border-light);
}

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

/* Scheduled task slots */
[data-theme="dark"] .scheduled-task-slot {
    background: var(--bg-card);
}

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

/* Empty states */
[data-theme="dark"] .empty-state {
    color: var(--text-secondary);
}

[data-theme="dark"] .empty-state-image {
    opacity: 0.35;
    filter: brightness(0.85);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .empty-state {
        color: var(--text-secondary);
    }
    :root:not([data-theme="light"]) .empty-state-image {
        opacity: 0.35;
        filter: brightness(0.85);
    }
}

/* Flat task rows */
[data-theme="dark"] .flat-task-row:hover {
    background: var(--accent-blue-light);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .flat-task-row:hover {
        background: var(--accent-blue-light);
    }
}

/* Week planner header */
[data-theme="dark"] .week-planner-header {
    background: var(--bg-secondary);
    border-color: var(--border-light);
}

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

/* Day column header */
[data-theme="dark"] .day-column-header,
[data-theme="dark"] .week-day-header {
    background: var(--bg-card);
}

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

/* Event cards in timeline (calendar events) */
[data-theme="dark"] .event-card {
    background: var(--bg-card) !important;
    border-color: var(--border-light) !important;
}

/* border-color above is a four-side !important shorthand — keep the Area edge */
[data-theme="dark"] .has-area-color .event-card.is-task {
    border-left-color: var(--calendar-color) !important;
}

[data-theme="dark"] .event-card:hover {
    background: var(--bg-elevated) !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .event-card {
        background: var(--bg-card) !important;
        border-color: var(--border-light) !important;
    }
    :root:not([data-theme="light"]) .has-area-color .event-card.is-task {
        border-left-color: var(--calendar-color) !important;
    }
    :root:not([data-theme="light"]) .event-card:hover {
        background: var(--bg-elevated) !important;
    }
}

/* Timeline unscheduled tasks */
[data-theme="dark"] .timeline-unscheduled-task {
    background: var(--bg-card) !important;
}

[data-theme="dark"] .timeline-unscheduled-task:hover {
    background: var(--bg-elevated) !important;
}

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

/* Week timeline events */
[data-theme="dark"] .week-timeline-event {
    background: var(--bg-card) !important;
    border-color: var(--border-light) !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .week-timeline-event {
        background: var(--bg-card) !important;
        border-color: var(--border-light) !important;
    }
}

/* The border-color shorthands above (Today's .event-card and the week's cards) are four-side
   !important, so they greyed every calendar event's edge in dark mode too: keep its colour — its
   Area's or calendar's (--calendar-color, from AreaColor.eventEdge) — as in light mode. */
[data-theme="dark"] .event-card:not(.is-task),
[data-theme="dark"] .week-timeline-event {
    border-left-color: var(--calendar-color, var(--border-light)) !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .event-card:not(.is-task),
    :root:not([data-theme="light"]) .week-timeline-event {
        border-left-color: var(--calendar-color, var(--border-light)) !important;
    }
}

/* Week task items - base styles now use var(--bg-card) */

/* Force stat cards dark - stronger specificity */
[data-theme="dark"] .dashboard-stats-row .dashboard-stat-card,
[data-theme="dark"] .notes-stats .dashboard-stat-card,
[data-theme="dark"] .projects-stats .dashboard-stat-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-light) !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .dashboard-stats-row .dashboard-stat-card,
    :root:not([data-theme="light"]) .notes-stats .dashboard-stat-card,
    :root:not([data-theme="light"]) .projects-stats .dashboard-stat-card {
        background: var(--bg-card) !important;
        border: 1px solid var(--border-light) !important;
    }
}

/* Task list items in tasks view — card styles handle background via .tasks-view .task-row */

/* Task row hover state */
[data-theme="dark"] .task-row:hover,
[data-theme="dark"] .task-row.dropdown-active {
    background: var(--bg-elevated);
}

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

/* Timeline header title area */
[data-theme="dark"] .timeline-title-area,
[data-theme="dark"] .timeline-header-left {
    color: var(--text-primary);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .timeline-title-area,
    :root:not([data-theme="light"]) .timeline-header-left {
        color: var(--text-primary);
    }
}

/* Timeline grid lines */
[data-theme="dark"] .timeline-grid,
[data-theme="dark"] .timeline-hour-row {
    border-color: var(--border-light) !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .timeline-grid,
    :root:not([data-theme="light"]) .timeline-hour-row {
        border-color: var(--border-light) !important;
    }
}

/* Event title text color */
[data-theme="dark"] .event-title {
    color: var(--text-primary);
}

[data-theme="dark"] .event-time,
[data-theme="dark"] .event-duration {
    color: var(--text-secondary);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .event-title {
        color: var(--text-primary);
    }
    :root:not([data-theme="light"]) .event-time,
    :root:not([data-theme="light"]) .event-duration {
        color: var(--text-secondary);
    }
}

/* Today calendar gradient background override */
[data-theme="dark"] .today-calendar {
    background: var(--bg-secondary) !important;
    background-image: none !important;
}

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