/* ============================================================================
   PAGE LAYOUTS - Dark mode backgrounds
   ============================================================================ */

/* Page content containers */
[data-theme="dark"] .tasks-page-content,
[data-theme="dark"] .notes-page-content,
[data-theme="dark"] .projects-page-content {
    background: var(--bg-main) !important;
}

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

/* Left panels (sidebars) */
[data-theme="dark"] .tasks-left-panel,
[data-theme="dark"] .notes-left-panel,
[data-theme="dark"] .projects-left-panel {
    background: var(--bg-sidebar) !important;
    border-color: var(--border-light);
}

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

/* Main content areas */
[data-theme="dark"] .tasks-main-content,
[data-theme="dark"] .notes-main-content,
[data-theme="dark"] .projects-main-content {
    background: var(--bg-main) !important;
}

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

/* Dashboard overview containers */
[data-theme="dark"] .dashboard-overview {
    background: transparent;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .dashboard-overview {
        background: transparent;
    }
}

/* Force all stat cards dark regardless of context */
[data-theme="dark"] .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-stat-card {
        background: var(--bg-card) !important;
        border: 1px solid var(--border-light) !important;
    }
}

/* Week planner background */
[data-theme="dark"] .week-planner {
    background: var(--bg-main) !important;
}

[data-theme="dark"] .week-planner-container {
    background: var(--bg-secondary) !important;
}

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

/* Panel headers */
[data-theme="dark"] .tasks-panel-header,
[data-theme="dark"] .notes-panel-header,
[data-theme="dark"] .projects-panel-header {
    background: var(--bg-sidebar);
    border-color: var(--border-light);
}

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

/* Week view controls */
[data-theme="dark"] .control-segment {
    background: var(--bg-tertiary) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .week-control-btn {
    background: transparent !important;
    color: var(--text-tertiary) !important;
}

[data-theme="dark"] .week-control-btn.active {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-1) !important;
}

[data-theme="dark"] .week-control-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-secondary) !important;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .control-segment {
        background: var(--bg-tertiary) !important;
        box-shadow: none !important;
    }
    :root:not([data-theme="light"]) .week-control-btn {
        background: transparent !important;
        color: var(--text-tertiary) !important;
    }
    :root:not([data-theme="light"]) .week-control-btn.active {
        background: var(--bg-elevated) !important;
        color: var(--text-primary) !important;
        box-shadow: var(--shadow-1) !important;
    }
    :root:not([data-theme="light"]) .week-control-btn:hover:not(.active) {
        background: rgba(255, 255, 255, 0.05) !important;
        color: var(--text-secondary) !important;
    }
}