/**
 * MOBILE RESPONSIVE CSS
 * Solution simple et efficace pour le burger menu
 */

/* ===========================================
   BURGER MENUS - DESKTOP
   =========================================== */
@media (min-width: 769px) {
    .burger-menu,
    .burger-admin-menu {
        display: none !important;
    }
}

/* ===========================================
   BURGER MENU - MOBILE (768px et moins)
   =========================================== */
@media (max-width: 768px) {

    /* AFFICHE LE BURGER */
    .burger-menu {
        display: block !important;
        position: relative !important;
    }

    .burger-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: none !important;
        border: none !important;
        color: #1e24f5 !important;
        font-size: 24px !important;
        padding: 10px !important;
        cursor: pointer !important;
    }

    .burger-toggle i {
        color: #1e24f5 !important;
    }

    .burger-toggle:hover {
        background: rgba(30, 36, 245, 0.1) !important;
        border-radius: 6px !important;
    }

    /* CACHE LES BOUTONS DESKTOP */
    .navbar .btn-settings,
    .navbar .btn-logout,
    .navbar .help-dropdown,
    .navbar .btn-supervisor,
    .navbar .btn-icon,
    .navbar .btn-help {
        display: none !important;
    }

    /* GARDE LES BURGERS VISIBLES */
    .navbar .burger-menu,
    .navbar .burger-admin-menu {
        display: block !important;
    }

    .navbar .burger-toggle,
    .navbar .burger-admin-toggle {
        display: flex !important;
    }

    /* DROPDOWN DU BURGER */
    .burger-dropdown {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        background: white !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
        min-width: 220px !important;
        margin-top: 10px !important;
        z-index: 9999 !important;
    }

    .burger-dropdown.active {
        display: block !important;
    }

    .burger-dropdown a,
    .burger-dropdown button {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 14px 18px !important;
        color: #333 !important;
        background: white !important;
        border: none !important;
        width: 100% !important;
        text-align: left !important;
        cursor: pointer !important;
        font-size: 15px !important;
        border-bottom: 1px solid #eee !important;
        text-decoration: none !important;
    }

    .burger-dropdown a:hover,
    .burger-dropdown button:hover {
        background: #f5f5f5 !important;
    }

    .burger-dropdown a i,
    .burger-dropdown button i {
        width: 20px !important;
    }

    /* BURGER ADMIN MENU (SUPERADMIN/SUPERVISOR) */
    .burger-admin-menu {
        display: block !important;
        position: relative !important;
        margin-right: 10px !important;
        z-index: 1000 !important;
    }

    .burger-admin-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: none !important;
        border: none !important;
        color: #dc3545 !important;
        font-size: 24px !important;
        padding: 10px !important;
        cursor: pointer !important;
        width: auto !important;
        height: auto !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    .burger-admin-toggle i {
        color: #dc3545 !important;
        font-size: 24px !important;
    }

    .burger-admin-toggle:hover {
        background: rgba(220, 53, 69, 0.1) !important;
        border-radius: 6px !important;
    }

    .burger-admin-dropdown {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        background: white !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
        min-width: 220px !important;
        margin-top: 10px !important;
        z-index: 9999 !important;
    }

    .burger-admin-dropdown.active {
        display: block !important;
    }

    .burger-admin-dropdown a {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 14px 18px !important;
        color: #333 !important;
        background: white !important;
        border: none !important;
        width: 100% !important;
        text-align: left !important;
        cursor: pointer !important;
        font-size: 15px !important;
        border-bottom: 1px solid #eee !important;
        text-decoration: none !important;
    }

    .burger-admin-dropdown a:hover {
        background: #f5f5f5 !important;
    }

    .burger-admin-dropdown a i {
        width: 20px !important;
    }

    /* NAVBAR MOBILE */
    .navbar {
        flex-direction: row !important;
        align-items: center !important;
        padding: 10px 12px !important;
    }

    .navbar-left {
        width: auto !important;
    }

    .navbar-logo .logo-full {
        display: block !important;
        height: 30px !important;
    }

    .navbar-logo .logo-icon {
        display: none !important;
    }

    .navbar-center {
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important;
    }

    .navbar-right {
        width: auto !important;
        display: flex !important;
        justify-content: flex-end !important;
    }

    .status-dropdown {
        max-width: 200px !important;
    }

    .status-label {
        font-size: 10px !important;
    }

    .status-trigger {
        font-size: 12px !important;
        padding: 5px 8px !important;
    }

    /* CARDS MOBILE */
    .dashboard-grid {
        display: flex !important;
        flex-direction: column !important;
    }

    .card-widgets {
        order: 1 !important;
    }

    .card-session {
        order: 2 !important;
    }

    .card-historique {
        order: 3 !important;
    }

    .card-info {
        order: 4 !important;
    }

    /* TOGGLE WIDTH FIX */
    .checkbox-row .toggle-switch {
        width: 50px !important;
        max-width: 50px !important;
        min-width: 50px !important;
    }
}