/* Responsive global */
@media (max-width: 768px) {
    body {
        margin-left: 0 !important;
    }
    
    .navbar {
        margin-left: 0 !important;
        left: 0 !important;
        padding-left: 60px !important;
    }
    
    .main-content {
        margin-left: 0 !important;
        margin-top: 70px !important;
        padding: 20px 15px !important;
    }
    
    .content-card {
        padding: 15px !important;
        margin-bottom: 15px !important;
    }
    
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        font-size: 14px;
    }
    
    .btn {
        font-size: 14px;
        padding: 8px 12px;
    }
    
    .form-control,
    .form-select {
        font-size: 16px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .page-header h1,
    .page-header h2 {
        font-size: 20px !important;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Notifications dropdown responsive */
@media (max-width: 768px) {
    /* Forcer le dropdown à se centrer */
    .notification-dropdown,
    .dropdown-menu.show {
        position: fixed !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        right: auto !important;
        width: 90vw !important;
        max-width: 400px !important;
        top: 60px !important;
        margin: 0 !important;
    }
    
    /* Si c'est un dropdown Bootstrap */
    .dropdown-menu[data-bs-popper] {
        left: 50% !important;
        transform: translateX(-50%) !important;
        right: auto !important;
    }
    
    /* Ajuster l'icône de notification */
    .notification-bell {
        position: relative;
    }
    
    /* Badge de compteur */
    .notification-badge {
        font-size: 10px !important;
    }
}

/* Page notifications responsive */
@media (max-width: 768px) {
    .notification-item {
        padding: 15px !important;
        font-size: 14px !important;
    }
    
    .notification-item .notification-title {
        font-size: 14px !important;
    }
    
    .notification-item .notification-time {
        font-size: 12px !important;
    }
}

/* Dropdown notifications dans navbar - Responsive */
@media (max-width: 768px) {
    /* Forcer le dropdown à être centré et visible */
    .dropdown-menu.show,
    .notification-dropdown.show {
        position: fixed !important;
        left: 5% !important;
        right: 5% !important;
        top: 60px !important;
        transform: none !important;
        width: 90% !important;
        max-width: none !important;
        margin: 0 !important;
    }
    
    /* Pour les dropdowns Bootstrap */
    .dropdown-menu[data-bs-popper] {
        left: 5% !important;
        right: 5% !important;
        transform: none !important;
    }
}