/* ================================================================
   SIDEBAR LAYOUT — GeometryLitePC.io Full-Height Sidebar
   ================================================================
   The sidebar background extends from header to the very bottom
   of the page (including behind the footer) as a continuous column.

   Key technique:
   • body::before creates a fixed-width column on the left
   • .nav-sidebar stays sticky for scrolling nav content
   • Footer content is offset to avoid the sidebar column
   ================================================================ */


/* ==========================================================
   0. SIDEBAR COLOR VARIABLES
   ========================================================== */
:root {
    --sidebar-bg: var(--nav-bg);
    --sidebar-text: var(--text-primary);
    --sidebar-text-secondary: var(--text-secondary);
    --sidebar-text-muted: var(--text-muted);
    --sidebar-border: var(--border);
    --sidebar-hover-bg: var(--primary-light);
    --sidebar-hover-text: var(--primary);
    --sidebar-active-bg: var(--primary-light);
    --sidebar-active-text: var(--primary);
    --sidebar-glow: rgba(93, 95, 239, 0.15);
}

body.dark-mode {
    --sidebar-bg: #0B0E14;
    --sidebar-text: #d4d8e2;
    --sidebar-text-secondary: #9aa5b5;
    --sidebar-text-muted: #5c6a7e;
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
    --sidebar-hover-text: #f0f2f5;
    --sidebar-active-bg: rgba(93, 95, 239, 0.15);
    --sidebar-active-text: #a5b4fc;
    --sidebar-glow: rgba(59, 130, 246, 0.12);
}


/* ==========================================================
   1. FULL-PAGE SIDEBAR COLUMN (body::before)
   ========================================================== 
   This pseudo-element creates a background column that spans
   the ENTIRE page height — from header to the very bottom,
   including behind the footer. Unlike main-layout::before,
   this covers everything. */

body::before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: var(--nav-width);
    height: 100vh;
    background: var(--sidebar-bg);
    z-index: 1;
    pointer-events: none;
    border-right: 1px solid var(--sidebar-border);
}

/* Subtle blue glow on the sidebar right edge (geometrylitepc.io style) */
body::after {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: var(--nav-width);
    width: 1px;
    height: 100vh;
    background: linear-gradient(to bottom,
            transparent 0%,
            var(--sidebar-glow) 20%,
            rgba(93, 95, 239, 0.25) 50%,
            var(--sidebar-glow) 80%,
            transparent 100%);
    z-index: 2;
    pointer-events: none;
}

/* Remove the old main-layout::before — replaced by body::before */
.main-layout::before {
    display: none !important;
}


/* ==========================================================
   2. SIDEBAR — Sticky, Full Remaining Height
   ========================================================== */
.nav-sidebar {
    background: var(--sidebar-bg) !important;
    border-right: none !important;
    z-index: 3;
    position: fixed !important;
    top: var(--header-height) !important;
    left: 0;
    width: var(--nav-width) !important;
    height: calc(100vh - var(--header-height)) !important;
    overflow-y: auto;
    padding: 12px 12px 12px 10px;
    margin: 0 !important;
}


/* ==========================================================
   3. SEAMLESS INTEGRATION — No Gaps
   ========================================================== */
.main-layout {
    position: relative;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

html,
body {
    padding-left: 0 !important;
    margin-left: 0 !important;
}


/* ==========================================================
   4. HEADER — Above sidebar column
   ========================================================== */
.site-header {
    z-index: 1100;
    position: sticky;
    top: 0;
}


/* ==========================================================
   5. FOOTER — Entire footer offset from sidebar column
   ========================================================== 
   The footer must be pushed right so its background doesn't
   paint over the sidebar column. This allows body::before to
   remain visible behind the footer area. */
.site-footer {
    position: relative;
    z-index: 1;
    margin-left: var(--nav-width) !important;
    width: calc(100% - var(--nav-width));
    /* Constrain width to prevent overflow */
    box-sizing: border-box;
    /* Prevent footer from overlapping sidebar column */
}


/* ==========================================================
   6. SCROLLBAR — Subtle, theme-aware
   ========================================================== */
.nav-sidebar::-webkit-scrollbar {
    width: 5px;
}

.nav-sidebar::-webkit-scrollbar-thumb {
    background: var(--sidebar-border) !important;
    border-radius: 3px;
}

.nav-sidebar::-webkit-scrollbar-track {
    background: transparent;
}


/* ==========================================================
   7. NAV ITEMS — Theme-Aware Styling
   ========================================================== */
.nav-sidebar .nav-item {
    color: var(--sidebar-text) !important;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-sidebar .nav-item i {
    color: var(--sidebar-text-secondary) !important;
    transition: color 0.15s ease;
}

.nav-sidebar .nav-item:hover {
    background: var(--sidebar-hover-bg) !important;
    color: var(--sidebar-hover-text) !important;
}

.nav-sidebar .nav-item:hover i {
    color: var(--sidebar-hover-text) !important;
}

.nav-sidebar .nav-item.active {
    background: var(--sidebar-active-bg) !important;
    color: var(--sidebar-active-text) !important;
    font-weight: 600;
}

.nav-sidebar .nav-item.active i {
    color: var(--sidebar-active-text) !important;
}

/* Semantic icon colors — not theme-dependent */
.nav-sidebar .nav-item.hot i {
    color: var(--hot-color, #ef4444) !important;
}

.nav-sidebar .nav-item.new i {
    color: var(--new-color, #a855f7) !important;
}


/* ==========================================================
   8. DIVIDER & SECTION TITLE
   ========================================================== */
.nav-sidebar .nav-divider {
    background: var(--sidebar-border) !important;
}

.nav-sidebar .nav-section-title {
    color: var(--sidebar-text-muted) !important;
    letter-spacing: 1px;
}


/* ==========================================================
   9. CATEGORY ITEMS
   ========================================================== */
.nav-sidebar .nav-category {
    color: var(--sidebar-text-secondary) !important;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-sidebar .nav-category:hover {
    background: var(--sidebar-hover-bg) !important;
    color: var(--sidebar-hover-text) !important;
}

.nav-sidebar .nav-category.active {
    background: var(--sidebar-active-bg) !important;
    color: var(--sidebar-active-text) !important;
}


/* ==========================================================
   10. NAV-LINK OVERRIDES
   ========================================================== */
.nav-sidebar .nav-link {
    color: var(--sidebar-text) !important;
}

.nav-sidebar .nav-link:hover {
    background: var(--sidebar-hover-bg) !important;
    color: var(--sidebar-hover-text) !important;
}

.nav-sidebar .nav-link.active {
    background: var(--sidebar-active-bg) !important;
    color: var(--sidebar-active-text) !important;
}

body.dark-mode .nav-sidebar .nav-link {
    color: var(--sidebar-text) !important;
}


/* ==========================================================
   11. BOTTOM EDGE GLOW (GeometryLitePC.io blue border)
   ========================================================== */
/* Top edge glow on header bottom */
.site-header {
    border-bottom: 1px solid var(--sidebar-border) !important;
}

body.dark-mode .site-header {
    box-shadow: 0 1px 0 rgba(59, 130, 246, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Bottom page glow effect */
body.dark-mode .site-footer {
    border-top: 1px solid rgba(59, 130, 246, 0.15) !important;
}


/* ==========================================================
   12. RESPONSIVE — Mobile Breakpoints
   ========================================================== */
@media (max-width: 1024px) {

    /* Hide the full-page sidebar column on mobile/tablet */
    body::before,
    body::after {
        display: none !important;
    }

    /* Sidebar drawer: top:0 so background has no gap.
       Header z-index:1100 > sidebar z-index:1002, so header covers sidebar top.
       padding-top pushes menu items below the header. */
    .nav-sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0;
        height: auto !important;
        width: 260px !important;
        z-index: 1002 !important;
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        background: var(--sidebar-bg) !important;
        padding-top: var(--header-height, 56px) !important;
        padding-bottom: 24px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    .nav-sidebar.open {
        transform: translateX(0) !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3);
    }

    /* ===== CRITICAL: Show mobile controls ===== */
    .mobile-menu-btn {
        display: flex !important;
    }

    .mobile-search-btn {
        display: flex !important;
    }

    /* Hide desktop search box — mobile search overlay replaces it */
    .search-box {
        display: none !important;
    }

    /* Switch main layout to single-column block */
    .main-layout {
        display: block !important;
        padding: 0 !important;
    }

    /* Left column hidden on tablet/mobile */
    .left-column {
        display: none !important;
    }

    /* Center content takes full width */
    .center-content {
        padding: 12px;
    }

    /* Right sidebar flows below content */
    .right-sidebar {
        position: static;
        height: auto;
        overflow-y: visible;
        padding: 12px;
        border-left: none;
        border-top: 1px solid var(--sidebar-border);
    }

    /* Reset footer offsets on mobile/tablet */
    .site-footer {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* ===== Mobile menu font — match geometrylitepc.io ===== */
    .nav-sidebar .nav-item {
        font-size: 16px !important;
        font-weight: 600 !important;
        padding: 14px 18px !important;
        gap: 14px !important;
        margin-bottom: 2px !important;
    }

    .nav-sidebar .nav-item i {
        font-size: 20px !important;
        width: 24px !important;
    }

    .nav-sidebar .nav-category {
        font-size: 16px !important;
        font-weight: 500 !important;
        padding: 14px 18px !important;
        gap: 14px !important;
        margin-bottom: 2px !important;
    }

    .nav-sidebar .nav-category img,
    .nav-sidebar .cat-img {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
        border-radius: 8px !important;
    }

    .nav-sidebar .nav-divider {
        margin: 12px 8px !important;
    }
}

/* --- Mobile: ≤768px — Sidebar slightly smaller --- */
@media (max-width: 768px) {
    .nav-sidebar {
        width: 280px !important;
    }

    .center-content {
        padding: 8px;
    }

    .right-sidebar {
        padding: 12px 8px;
    }
}

/* --- Small phone: ≤480px — Sidebar narrower for more space --- */
@media (max-width: 480px) {
    .nav-sidebar {
        width: 260px !important;
    }

    .center-content {
        padding: 6px;
    }

    .right-sidebar {
        padding: 8px 6px;
    }
}


/* ==========================================================
   LANDSCAPE — Compact Sidebar for Short Viewports
   ========================================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .nav-sidebar {
        width: 280px !important;
        padding-top: var(--header-height, 40px) !important;
        padding-bottom: 16px !important;
    }

    .nav-sidebar .nav-item {
        padding: 8px 14px !important;
        font-size: 14px !important;
        gap: 10px !important;
        min-height: 40px !important;
    }

    .nav-sidebar .nav-category {
        padding: 8px 14px !important;
        font-size: 14px !important;
        gap: 10px !important;
        min-height: 40px !important;
    }

    .nav-sidebar .nav-divider {
        margin: 6px 4px !important;
    }

    .nav-sidebar .cat-icon,
    .nav-sidebar .cat-img,
    .nav-sidebar .nav-category img {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
    }
}


/* ==========================================================
   13. THEATER MODE
   ========================================================== */
body.theater-mode .nav-sidebar {
    display: none !important;
}

body.theater-mode::before,
body.theater-mode::after {
    display: none !important;
}

body.theater-mode .site-footer {
    margin-left: 0 !important;
}