/* --- LAPS Core Styles (Production Grade) --- */

/* 1. Sleek Scrollbars (The "Terminal" Look) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; border: 1px solid #0f172a; }
::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Utility: Hide scrollbar but allow scrolling */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 2. Animations */
.fade-in { animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.pulse-glow {
    animation: pulseGlow 2s infinite;
}
@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* --- THE GLASS EFFECT (Glassmorphism) --- */
.glass-panel {
    background: rgba(17, 24, 39, 0.75); /* Gray-900 with opacity */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* 3. Sidebar Mechanics */
#sidebar {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 16rem; /* Default w-64 */
    overflow: hidden; /* Prevents text overflow during transition */
}

/* 3. Sidebar Transitions */
.sidebar-transition {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* The Collapsed State */
body.sidebar-closed #sidebar {
    width: 5rem; /* w-20 */
}

/* Hide text when collapsed */
body.sidebar-closed .sidebar-text {
    opacity: 0;
    pointer-events: none;
    display: none; /* Hard hide to prevent layout shifts */
}

/* Center icons when collapsed */
body.sidebar-closed .sidebar-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

/* Adjust logo when collapsed */
body.sidebar-closed .logo-text {
    display: none;
}

/* Desktop Collapsed State */
@media (min-width: 768px) {
    body.sidebar-closed #sidebar {
        width: 5rem;
    }
    body.sidebar-closed .sidebar-text {
        opacity: 0;
        pointer-events: none;
        display: none;
    }
    body.sidebar-closed .sidebar-link {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }
    body.sidebar-closed .logo-text {
        display: none;
    }
}

/* 4. Mobile Sidebar Logic (Slide-In) */
@media (max-width: 767px) {
    /* Sidebar is hidden by default via Tailwind 'hidden' class */
    
    /* When Open: Force display and fixed position */
    body.sidebar-mobile-open #sidebar {
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 16rem;
        z-index: 50; /* Above everything */
        box-shadow: 10px 0 25px -5px rgba(0, 0, 0, 0.5);
    }

    /* Backdrop Overlay */
    body.sidebar-mobile-open::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(2px);
        z-index: 40; /* Below sidebar, above content */
        animation: fadeIn 0.2s ease-out;
    }
}