@layer components {
    /* --- 1. Global Layout (Mobile & Desktop) --- */
    .dashboard-layout {
        display: grid;
        grid-template-columns: 5rem 1fr;
        min-height: 100dvh;
        transition: grid-template-columns 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        width: 100%;
        overflow-x: hidden;
    }

    /* --- 2. Sidebar Styles --- */
    .sidebar {
        width: 5rem;
        height: auto;
        position: sticky;
        top: 0;
        background-color: var(--ocean-900);
        border-right: 1px solid var(--border-color);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-block: 1rem;
        flex-shrink: 0;
        z-index: 70;
        gap: 1.5rem;
        overflow-y: auto;
        overflow-x: visible;
        box-sizing: border-box;
        transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        padding 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        border-color 0.4s;
    }

    /* --- Brand --- */
    .sidebar__brand {
        width: 100%;
    }

    .sidebar__brand-link {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        text-decoration: none;
    }

    /* Surfer icon gradient crossfade */
    .sidebar__logo .logo-surfer-base,
    .sidebar__logo .logo-surfer-gradient {
        transition: opacity 0.3s ease;
    }

    .sidebar__logo .logo-surfer-gradient {
        opacity: 0;
    }

    .sidebar__brand-link:hover .logo-surfer-gradient,
    .sidebar__brand-link.active .logo-surfer-gradient {
        opacity: 1;
    }

    .sidebar__brand-link:hover .logo-surfer-base,
    .sidebar__brand-link.active .logo-surfer-base {
        opacity: 0;
    }

    .sidebar__theme-toggle {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sidebar__theme-toggle--bottom {
        margin: 0 auto;
    }

    /* --- Theme Pill (icon + wave) --- */
    .theme-pill {
        position: relative;
        width: 3.75rem;
        min-height: 2.25rem;
        height: 2.25rem;
        flex-shrink: 0;
        border-radius: 0.5rem;
        border: 1px solid var(--border-color);
        overflow: hidden;
        transition: border-color 0.3s ease, background-color 0.5s ease;
    }

    :root[data-theme="dark"] .theme-pill { background-color: rgba(15, 23, 42, 0.6); }
    :root[data-theme="light"] .theme-pill { background-color: rgba(186, 230, 253, 0.15); }

    .theme-pill:hover {
        border-color: var(--accent-primary);
    }

    .theme-pill:active {
        transform: scale(0.95);
    }

    /* Icon */
    .theme-pill__icon {
        position: relative;
        z-index: 1;
        font-size: 1rem;
        color: var(--text-muted);
        transition: color 0.3s ease, transform 0.5s ease;
        margin-top: -0.15rem;
    }

    .theme-pill:hover .theme-pill__icon {
        color: var(--accent-primary);
    }

    :root[data-theme="dark"] .theme-pill__icon { transform: rotate(0deg); }
    :root[data-theme="light"] .theme-pill__icon { transform: rotate(360deg); }

    /* Wave decoration at bottom */
    .theme-pill__wave {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0.5rem;
        transition: fill 0.5s ease, opacity 0.3s ease;
    }

    :root[data-theme="dark"] .theme-pill__wave path { fill: rgba(45, 212, 191, 0.15); }
    :root[data-theme="light"] .theme-pill__wave path { fill: rgba(45, 212, 191, 0.25); }

    .theme-pill:hover .theme-pill__wave path { fill: rgba(45, 212, 191, 0.35); }

    /* --- 3. Closed State (Checked) --- */

    /* 1. Collapse the Grid Column (Main Content becomes full width) */
    body:has(#sidebar-toggle:checked) .dashboard-layout {
        grid-template-columns: 0rem 1fr;
    }

    /* 2. Collapse the Sidebar Container */
    body:has(#sidebar-toggle:checked) .sidebar {
        width: 0rem !important;
        min-width: 0rem; /* Allow shrinking to 0 */
        padding: 0;
        border-right-color: transparent;
        overflow: visible; /* Prevent clipping the fixed toggle button */
    }

    /* 3. Hide Sidebar Internal Content (Nav, Logo, User) */
    /* We hide everything EXCEPT the toggle button so it stays visible */
    body:has(#sidebar-toggle:checked) .sidebar > *:not(.sidebar-toggle-btn) {
        display: none;
        opacity: 0;
        pointer-events: none;
    }

    /* --- 4. Main Content --- */
    .main-content {
        min-width: 0;
        transition: margin 0.3s;
    }

    /* --- 5. Toggle Button (Floating Fixed) --- */


    .sidebar-toggle-btn:hover {
        color: var(--text-main);
        background: color-mix(in srgb, var(--text-main) 20%, transparent);
    }

    /* Toggle Buttons */
    .sidebar-toggle-btn {
        position: fixed;
        bottom: 1rem;
        left: 1rem;
        z-index: 45;
        background: var(--bg-surface);
        color: var(--text-main);
        border: 1px solid var(--border-color);
        padding: 0.5rem;
        border-radius: 0.25rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
        height: 1rem;
    }
    .sidebar-toggle-btn:hover { background: color-mix(in srgb, var(--text-main) 10%, transparent); }

    /* Icon Animation */
    .sidebar-toggle-btn .material-symbols-outlined {
        transition: transform 0.4s;
        transform: rotate(0deg); /* Arrow points Left (Open state) */
    }

    /* Rotate Arrow when Closed */
    body:has(#sidebar-toggle:checked) .sidebar-toggle-btn .material-symbols-outlined {
        transform: rotate(180deg); /* Arrow points Right (Closed state) */
    }

    /* --- 6. Desktop Overrides --- */
    @media (min-width: 1024px) {
        .mobile-only {
            display: none !important;
        }

        /* Force Layout Open */
        .dashboard-layout {
            grid-template-columns: 5rem 1fr !important;
        }

        .sidebar {

        }

        /* Ensure content is always visible on desktop */
        .sidebar > *:not(.sidebar-toggle-btn) {
            display: flex !important; /* Restore flex display for nav items */
            opacity: 1 !important;
            pointer-events: auto !important;
        }

        /* Specific overrides for non-flex children if needed */
        .sidebar__brand, .sidebar__user {
            display: block !important;
        }
    }
}