/* =====================================================
   GH DRAWER V2 STYLES (Desktop First)
===================================================== */
.drawer {
    width: 260px;
    height: 100%;
    background: #111;
    border-right: 2px solid #fdff55;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 30px;
    box-sizing: border-box;
    box-shadow: 5px 0 20px rgba(0,0,0,0.5);
    transition: transform 0.3s ease; /* Smooth slide animation */
    z-index: 900;
}

.drawer-logo {
    width: 140px; margin-bottom: 20px;
    filter: drop-shadow(0 0 10px #00eaff55);
    transition: transform 0.3s;
}
.drawer-logo:hover { transform: scale(1.05); }

.welcome-text { color: #888; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
#drawerUserName { font-size: 18px; font-weight: bold; color: #00eaff; text-shadow: 0 0 8px #00eaff55; margin-top: 5px; }

/* LINKS */
.drawer-link {
    width: 100%; padding: 15px 30px; color: #fff; text-decoration: none;
    font-size: 16px; font-weight: bold; transition: 0.2s ease;
    border-left: 4px solid transparent; box-sizing: border-box;
}
.drawer-link:hover { background: #1a1a1a; color: #fdff55; border-left: 4px solid #fdff55; text-shadow: 0 0 10px #fdff55; }
.drawer-link.admin-link { color: #fdff55; margin-top: 10px; }
.drawer-link.admin-link:hover { background: #222; box-shadow: inset 0 0 15px #fdff5522; }

/* LOGOUT */
.drawer-logout-container { margin-top: auto; width: 100%; padding: 20px; box-sizing: border-box; }
.drawer-logout {
    width: 100%; padding: 12px; background: transparent; border: 2px solid #ff4444;
    color: #ff4444; border-radius: 6px; font-weight: bold; cursor: pointer; transition: 0.2s ease;
}
.drawer-logout:hover { background: #ff4444; color: #000; box-shadow: 0 0 15px #ff4444; }

/* =========================================
   MOBILE OPTIMIZATION (Max Width: 768px)
========================================= */
@media (max-width: 768px) {
    /* 1. Hide Drawer Off-Screen by Default */
    .drawer {
        position: fixed;
        top: 70px; /* Below Header */
        bottom: 0;
        left: 0;
        transform: translateX(-100%); /* Slide it away */
        width: 260px;
    }

    /* 2. Class to Slide it Back In */
    .drawer.active {
        transform: translateX(0);
        box-shadow: 10px 0 50px rgba(0,0,0,0.8);
    }

    /* 3. The Hamburger Button (Visible only on mobile) */
    .mobile-menu-btn {
        display: block !important; /* Force show */
        position: fixed;
        bottom: 20px; right: 20px; /* Floating Action Button style */
        width: 50px; height: 50px;
        background: #fdff55; color: #000;
        border-radius: 50%; border: none;
        font-size: 24px; box-shadow: 0 0 15px #fdff55;
        z-index: 2000; cursor: pointer;
    }
}

/* Hide toggle button on Desktop */
.mobile-menu-btn { display: none; }