/* Correctifs finaux pour éviter les conflits menu mobile / sidebar */

/* MASQUER TOUTES LES BARRES DE DÉFILEMENT SUR MOBILE */
@media (max-width: 767px) {
    /* Masquer les scrollbars WebKit (Chrome, Safari, Edge) */
    * {
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE et Edge */
    }
    
    *::-webkit-scrollbar {
        display: none !important; /* Chrome, Safari, Opera */
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
    }
    
    /* Désactiver overflow sur les cartes de statistiques */
    .stats-card-mobile,
    .stats-card-mobile .card-body,
    .card.stats-card-mobile {
        overflow: hidden !important;
        overflow-y: hidden !important;
        overflow-x: hidden !important;
    }
    
    /* Désactiver overflow sur toutes les cartes en général (sauf celles qui en ont vraiment besoin) */
    .card:not(.modal-content):not(.dropdown-menu):not(.table-responsive),
    .card-body:not(.modal-body),
    .card-header:not(.modal-header) {
        overflow: hidden !important;
        overflow-y: hidden !important;
        overflow-x: hidden !important;
    }
}

/* CORRECTION CRITIQUE : Z-index pour le menu mobile */
.mobile-bottom-nav {
    z-index: 1050 !important;
}

/* Désactiver le menu mobile du bas quand une modale est ouverte */
body:has(.modal.show) .mobile-bottom-nav,
body:has(#editTimeEntryModal.show) .mobile-bottom-nav,
body:has(#createTimeEntryModal.show) .mobile-bottom-nav {
    pointer-events: none !important;
    z-index: 1040 !important;
}

/* Désactiver l'overlay mobile quand une modale est ouverte */
body:has(.modal.show) .mobile-menu-overlay,
body:has(#editTimeEntryModal.show) .mobile-menu-overlay,
body:has(#createTimeEntryModal.show) .mobile-menu-overlay {
    pointer-events: none !important;
    z-index: 1040 !important;
    display: none !important;
}

/* Désactiver le menu mobile lui-même quand une modale est ouverte */
body:has(.modal.show) .mobile-menu,
body:has(#editTimeEntryModal.show) .mobile-menu,
body:has(#createTimeEntryModal.show) .mobile-menu {
    pointer-events: none !important;
    z-index: 1040 !important;
}

/* FORCER L'INTERACTIVITÉ DE TOUTES LES MODALES ET LEUR CONTENU */
.modal.show {
    pointer-events: auto !important;
}

.modal.show .modal-dialog {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 1071 !important;
}

.modal.show .modal-content {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 1072 !important;
}

/* Exception : le backdrop doit rester cliquable pour fermer la modale, mais en dessous */
.modal-backdrop.show {
    z-index: 1050 !important; /* Réduit pour être bien en dessous */
}

/* CRITIQUE : Le backdrop ne doit PAS intercepter les clics sur le contenu de la modale */
.modal.show {
    z-index: 1080 !important; /* Augmenté pour être bien au-dessus */
    pointer-events: none !important; /* La modale elle-même ne capture pas les clics */
}

.modal.show .modal-dialog {
    z-index: 1081 !important;
    pointer-events: auto !important; /* Le dialog capture les clics */
    position: relative !important;
}

.modal.show .modal-content {
    z-index: 1082 !important;
    pointer-events: auto !important; /* Le contenu capture les clics */
    position: relative !important;
}

/* IMPORTANT : Le backdrop ne doit PAS bloquer les clics sur le contenu de la modale */
.modal.show .modal-dialog {
    pointer-events: auto !important;
    z-index: 1081 !important;
    position: relative !important;
}

.modal.show .modal-content {
    pointer-events: auto !important;
    z-index: 1082 !important;
    position: relative !important;
}

.modal.show .modal-body,
.modal.show .modal-footer {
    pointer-events: auto !important;
    z-index: 1082 !important;
    position: relative !important;
}

/* S'assurer que tous les éléments interactifs dans les modales sont cliquables */
.modal.show input,
.modal.show select,
.modal.show textarea,
.modal.show button,
.modal.show a,
.modal.show label,
.modal.show .btn,
.modal.show .form-control,
.modal.show .form-select,
.modal.show .select2-container,
.modal.show .select2-selection,
.modal.show .select2-dropdown {
    pointer-events: auto !important;
    cursor: auto !important;
    position: relative !important;
    z-index: 1073 !important;
}

/* Spécifique pour les inputs et textareas */
.modal.show input[type="text"],
.modal.show input[type="date"],
.modal.show input[type="time"],
.modal.show input[type="number"],
.modal.show textarea {
    cursor: text !important;
}

/* Spécifique pour les boutons */
.modal.show button,
.modal.show .btn,
.modal.show a {
    cursor: pointer !important;
}

.mobile-menu-overlay {
    z-index: 1055 !important; /* Augmenter pour être au-dessus des modals */
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(2px) !important;
}

.mobile-menu {
    z-index: 1056 !important; /* Au-dessus de l'overlay */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    max-width: 85% !important;
    height: 100vh !important;
    background: white !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1) !important;
    overflow-y: auto !important;
}

.mobile-menu.show {
    transform: translateX(0) !important;
}

/* CORRECTION CRITIQUE : Résoudre le conflit des boutons fa-bars */
@media (max-width: 767px) {
    /* Masquer le bouton toggle de la sidebar sur mobile quand bottom nav est présent */
    .mobile-bottom-nav ~ .sidebar-toggle,
    .navbar .sidebar-toggle {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Alternative : Si le bottom nav n'est pas présent, garder le bouton sidebar */
    body:not(:has(.mobile-bottom-nav)) .sidebar-toggle {
        display: inline-block !important;
        visibility: visible !important;
    }
    
    /* Forcer le contenu à respecter le bottom nav */
    .main-content {
        min-height: calc(100vh - 60px - env(safe-area-inset-bottom)) !important;
        margin-left: 0 !important;
        padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important;
        overflow-x: hidden;
    }
    
    /* S'assurer que les modals apparaissent au-dessus du menu mobile */
    .modal {
        z-index: 1060 !important;
        pointer-events: auto !important;
    }
    
    .modal.show {
        pointer-events: auto !important;
    }
    
    .modal.show .modal-dialog,
    .modal.show .modal-content,
    .modal.show .modal-body,
    .modal.show .modal-header,
    .modal.show .modal-footer {
        pointer-events: auto !important;
    }
    
    .modal.show input,
    .modal.show select,
    .modal.show textarea,
    .modal.show button,
    .modal.show a,
    .modal.show label {
        pointer-events: auto !important;
    }
    
    /* Modale d'édition d'activité - z-index encore plus élevé pour garantir la visibilité */
    #editTimeEntryModal {
        z-index: 1070 !important;
        pointer-events: auto !important;
    }
    
    #editTimeEntryModal .modal-dialog,
    #editTimeEntryModal .modal-content,
    #editTimeEntryModal .modal-body,
    #editTimeEntryModal .modal-header,
    #editTimeEntryModal .modal-footer,
    #editTimeEntryModal input,
    #editTimeEntryModal select,
    #editTimeEntryModal textarea,
    #editTimeEntryModal button,
    #editTimeEntryModal a {
        pointer-events: auto !important;
    }
    
    /* Modale de création d'activité - z-index élevé */
    #createTimeEntryModal {
        z-index: 1070 !important;
        pointer-events: auto !important;
    }
    
    #createTimeEntryModal .modal-dialog,
    #createTimeEntryModal .modal-content,
    #createTimeEntryModal .modal-body,
    #createTimeEntryModal .modal-header,
    #createTimeEntryModal .modal-footer,
    #createTimeEntryModal input,
    #createTimeEntryModal select,
    #createTimeEntryModal textarea,
    #createTimeEntryModal button,
    #createTimeEntryModal a {
        pointer-events: auto !important;
    }
    
    .modal-backdrop {
        z-index: 1059 !important;
    }
    
    /* IMPORTANT : Le backdrop ne doit PAS bloquer les clics sur le contenu de la modale */
    .modal.show .modal-dialog,
    .modal.show .modal-content {
        pointer-events: auto !important;
        z-index: 1071 !important;
        position: relative !important;
    }
    
    .modal.show .modal-content {
        z-index: 1072 !important;
    }
    
    /* Backdrop spécifique pour les modales d'activité - doit être EN DESSOUS de la modale */
    #editTimeEntryModal + .modal-backdrop,
    body:has(#editTimeEntryModal.show) .modal-backdrop {
        z-index: 1050 !important; /* En dessous de la modale (1080) */
    }
    
    #createTimeEntryModal + .modal-backdrop,
    body:has(#createTimeEntryModal.show) .modal-backdrop {
        z-index: 1050 !important; /* En dessous de la modale (1080) */
    }
    
    /* GARANTIR que le contenu de la modale est au-dessus et cliquable */
    #editTimeEntryModal.show .modal-dialog {
        z-index: 1071 !important;
        position: relative !important;
    }
    
    #editTimeEntryModal.show .modal-content {
        z-index: 1072 !important;
        position: relative !important;
        pointer-events: auto !important;
    }
    
    #createTimeEntryModal.show {
        z-index: 1080 !important;
        pointer-events: none !important;
    }
    
    #createTimeEntryModal.show .modal-dialog {
        z-index: 1081 !important;
        position: relative !important;
        pointer-events: auto !important;
    }
    
    #createTimeEntryModal.show .modal-content {
        z-index: 1082 !important;
        position: relative !important;
        pointer-events: auto !important;
    }
    
    /* Masquer complètement la sidebar sur mobile quand bottom nav présent */
    .sidebar,
    .sidebar-overlay {
        display: none !important;
        visibility: hidden !important;
        transform: translateX(-100%) !important;
    }
    
    /* Corriger le spacing du navbar sans le bouton sidebar */
    .navbar .container-fluid {
        padding-left: 1rem !important;
    }
    
    /* Navbar brand ajustements quand pas de bouton sidebar */
    .navbar-brand {
        font-size: 1.1rem !important;
        margin-left: 0 !important;
    }
    
    /* Éviter les conflits de positionnement */
    .fixed-top {
        z-index: 1040 !important;
    }
    
    /* Corriger tout padding/margin conflictuel sur main-content */
    .main-content,
    .main-content.expanded,
    .main-content.full-width {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* PRIORITÉ ÉLEVÉE : Règles desktop spécifiques */
@media (min-width: 768px) {
    /* S'assurer que les modales d'activité sont toujours visibles sur desktop */
    #editTimeEntryModal {
        z-index: 1070 !important;
        pointer-events: auto !important;
    }
    
    #editTimeEntryModal .modal-dialog,
    #editTimeEntryModal .modal-content,
    #editTimeEntryModal .modal-body,
    #editTimeEntryModal .modal-header,
    #editTimeEntryModal .modal-footer,
    #editTimeEntryModal input,
    #editTimeEntryModal select,
    #editTimeEntryModal textarea,
    #editTimeEntryModal button,
    #editTimeEntryModal a {
        pointer-events: auto !important;
    }
    
    #createTimeEntryModal {
        z-index: 1070 !important;
        pointer-events: auto !important;
    }
    
    #createTimeEntryModal .modal-dialog,
    #createTimeEntryModal .modal-content,
    #createTimeEntryModal .modal-body,
    #createTimeEntryModal .modal-header,
    #createTimeEntryModal .modal-footer,
    #createTimeEntryModal input,
    #createTimeEntryModal select,
    #createTimeEntryModal textarea,
    #createTimeEntryModal button,
    #createTimeEntryModal a {
        pointer-events: auto !important;
    }
    
    /* Backdrop pour les modales d'activité sur desktop */
    body:has(#editTimeEntryModal.show) .modal-backdrop,
    body:has(#createTimeEntryModal.show) .modal-backdrop {
        z-index: 1069 !important;
        pointer-events: auto !important;
    }
    .mobile-bottom-nav,
    .mobile-menu,
    .mobile-menu-overlay {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Override complet des règles .main-content sur desktop */
    #mainContent.main-content,
    .main-content#mainContent,
    div.main-content,
    main.main-content {
        margin-left: 280px !important;
        padding: 2rem !important;
        padding-top: calc(2rem + 80px) !important; /* Respecter l'espace navbar */
        padding-bottom: 2rem !important; /* Retirer le padding mobile */
        min-height: calc(100vh - 80px) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow-x: auto !important;
        overflow-y: auto !important;
        width: calc(100% - 280px) !important;
        max-width: none !important;
    }
    
    /* États de la sidebar sur desktop */
    .main-content.expanded,
    #mainContent.main-content.expanded {
        margin-left: 70px !important;
        width: calc(100% - 70px) !important;
    }
    
    .main-content.full-width,
    #mainContent.main-content.full-width {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    /* Restaurer l'affichage normal de la sidebar et son bouton toggle */
    .sidebar {
        display: block !important;
        visibility: visible !important;
        position: fixed !important;
        z-index: 1000 !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    /* Permettre le masquage de la sidebar avec la classe hidden */
    .sidebar.hidden {
        transform: translateX(-100%) !important;
        box-shadow: none !important;
    }
    
    /* Sidebar visible (par défaut) */
    .sidebar:not(.hidden) {
        transform: translateX(0) !important;
    }
    
    .sidebar-toggle {
        display: inline-block !important;
        visibility: visible !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        z-index: 1050 !important;
        position: relative !important;
    }
    
    .sidebar-toggle:hover {
        opacity: 0.8 !important;
    }
    
    .sidebar-toggle:active {
        opacity: 0.6 !important;
    }
    
    .sidebar-overlay {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* S'assurer que body n'a pas de styles mobiles sur desktop */
    body {
        padding-bottom: 0 !important;
        overflow-x: auto !important;
    }
    
    /* Annuler toutes les corrections container mobile */
    .container-fluid,
    .container {
        padding-bottom: 0 !important;
        margin-bottom: inherit !important;
    }
}

/* Transition fluide entre mobile et desktop */
@media (min-width: 768px) and (max-width: 991px) {
    /* Tablet : comportement hybride */
    .main-content {
        margin-left: 200px !important;
    }
}

/* PRIORITÉ ÉLEVÉE : Override des règles inline du layout */
@media (max-width: 767px) {
    /* Override des règles .main-content définies dans le layout */
    #mainContent.main-content,
    .main-content#mainContent,
    div.main-content,
    main.main-content {
        margin-left: 0 !important;
        padding: 1rem !important;
        padding-top: calc(1rem + 80px) !important; /* Espace pour navbar fixe */
        padding-bottom: calc(60px + 1rem + env(safe-area-inset-bottom)) !important; /* Espace pour bottom nav */
        min-height: calc(100vh - 80px - 60px) !important; /* Hauteur - navbar - bottom nav */
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        transition: none !important; /* Désactiver les transitions sur mobile */
    }
    
    /* Override des variations de .main-content */
    .main-content.expanded,
    .main-content.full-width,
    #mainContent.main-content.expanded,
    #mainContent.main-content.full-width {
        margin-left: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Éviter que des éléments flottent en bas de page */
    .container-fluid,
    .container {
        margin-bottom: 0 !important;
        padding-bottom: calc(60px + 1rem + env(safe-area-inset-bottom)) !important;
    }
    
    /* S'assurer que les cards et autres éléments ne dépassent pas */
    .card,
    .row,
    .col {
        margin-bottom: 1rem !important;
    }
    
    /* Forcer les sections à avoir au moins un style de base */
    section:not([class]),
    div:not([class]) {
        min-height: auto !important;
        display: block !important;
        visibility: visible !important;
    }
    
    /* Éviter les débordements de contenu */
    * {
        box-sizing: border-box !important;
    }
    
    /* Override les règles média queries du layout */
    body {
        overflow-x: hidden !important;
    }
    
    /* Corrections spécifiques pour éviter les éléments flottants */
    .navbar + * {
        margin-top: 0 !important;
    }
    
    /* S'assurer que le contenu ne dépasse pas la zone visible */
    html, body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
}

/* Corrections pour les très petits écrans */
@media (max-width: 480px) {
    .main-content {
        padding: 0.5rem !important;
        padding-bottom: calc(60px + 0.5rem + env(safe-area-inset-bottom)) !important;
    }
    
    .navbar-brand {
        font-size: 1rem !important;
    }
}

/* ===== CORRECTIONS POUR LES CAS EDGE ===== */

/* Correction pour orientation change sur mobile */
@media (max-width: 767px) and (orientation: landscape) {
    .main-content {
        padding-top: calc(1rem + 60px) !important; /* Réduire sur paysage */
    }
    
    .mobile-bottom-nav {
        height: 50px !important;
    }
    
    .bottom-nav-bar {
        height: 50px !important;
        padding: 0.25rem 0 !important;
    }
}

/* Corrections pour les composants Livewire */
[wire\\:loading] {
    z-index: 1100 !important;
}

.livewire-modal {
    z-index: 1070 !important;
}

/* Corrections pour les éléments flottants et sticky */
@media (max-width: 767px) {
    .sticky-top,
    .fixed-top:not(.navbar) {
        top: 80px !important; /* Après la navbar */
    }
    
    .fixed-bottom:not(.mobile-bottom-nav) {
        bottom: 60px !important; /* Au-dessus du bottom nav */
    }
    
    /* Éviter les débordements des tooltips et popovers */
    .tooltip,
    .popover {
        z-index: 1100 !important;
    }
    
    /* Corrections pour les dropdowns */
    .dropdown-menu {
        max-height: 50vh !important;
        overflow-y: auto !important;
        z-index: 1080 !important;
    }
}

/* ===== TRANSITIONS FLUIDES ET PERFORMANCE ===== */

/* Optimisation des transitions */
.main-content,
.sidebar,
.mobile-bottom-nav,
.mobile-menu {
    will-change: transform, margin, padding !important;
    backface-visibility: hidden !important;
    -webkit-font-smoothing: antialiased !important;
}

/* Transition entre breakpoints */
@media (max-width: 768px) {
    /* Désactiver les transitions pendant le resize pour éviter les glitches */
    .main-content,
    .sidebar {
        transition: none !important;
    }
}

@media (min-width: 769px) {
    /* Réactiver les transitions sur desktop */
    .main-content {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .sidebar {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}

/* ===== CORRECTIONS FINALES GLOBALES ===== */

/* S'assurer qu'aucun élément ne dépasse */
@media (max-width: 767px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        position: relative !important;
    }
    
    /* Correction pour tous les containers */
    .container,
    .container-fluid,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Éviter les débordements sur les éléments de base */
    section,
    article,
    div[class*="col-"],
    .card,
    .row {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* ===== PRINT STYLES ===== */

@media print {
    .mobile-bottom-nav,
    .mobile-menu,
    .mobile-menu-overlay,
    .sidebar-toggle {
        display: none !important;
    }
    
    .main-content {
        margin-left: 0 !important;
        padding: 1rem !important;
    }
}

/* ===== PRÉCHARGEMENT ET OPTIMISATION ===== */

/* ===== STYLES SPÉCIFIQUES POUR LE MENU MOBILE ===== */

/* État initial du menu mobile (caché) */
.mobile-menu-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 1055 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.mobile-menu-overlay.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.mobile-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    max-width: 85% !important;
    height: 100vh !important;
    background: white !important;
    z-index: 1056 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1) !important;
    overflow-y: auto !important;
    display: block !important;
    visibility: visible !important;
}

.mobile-menu.show {
    transform: translateX(0) !important;
}

.mobile-menu-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1.5rem 1rem !important;
    background: linear-gradient(135deg, #00AE9E 0%, #33C2B5 100%) !important;
    color: white !important;
    border-bottom: 1px solid rgba(255,255,255,0.2) !important;
}

.mobile-menu-header .btn-close {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
    background: none !important;
    border: none !important;
    font-size: 1.2rem !important;
    padding: 0.5rem !important;
    cursor: pointer !important;
}

.mobile-menu-body {
    padding: 1rem 0 !important;
}

.mobile-menu-item {
    display: flex !important;
    align-items: center !important;
    padding: 1rem 1.5rem !important;
    color: #343a40 !important;
    text-decoration: none !important;
    transition: background 0.2s ease !important;
    border: none !important;
    background: transparent !important;
    width: 100% !important;
    text-align: left !important;
    cursor: pointer !important;
}

.mobile-menu-item:hover,
.mobile-menu-item:active {
    background: #f8f9fa !important;
    color: #00AE9E !important;
    text-decoration: none !important;
}

.mobile-menu-item i {
    width: 24px !important;
    text-align: center !important;
    color: #6c757d !important;
    margin-right: 1rem !important;
}

.mobile-menu-item:hover i,
.mobile-menu-item:active i {
    color: #00AE9E !important;
}

/* Bouton Menu dans le bottom nav */
.mobile-bottom-nav .nav-item[onclick="toggleMobileMenu()"] {
    background: transparent !important;
    border: none !important;
    padding: 0.25rem !important;
    min-height: 50px !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: all 0.2s ease !important;
}

.mobile-bottom-nav .nav-item[onclick="toggleMobileMenu()"]:hover {
    background: rgba(0, 174, 158, 0.1) !important;
    transform: scale(1.05) !important;
}

.mobile-bottom-nav .nav-item[onclick="toggleMobileMenu()"]:active {
    transform: scale(0.95) !important;
}

/* Styles pour les sous-menus mobile */
.mobile-submenu {
    background: rgba(0, 174, 158, 0.05) !important;
    margin: 0.5rem 0 !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 0 !important;
}

.mobile-submenu-title {
    padding: 0.5rem 1.5rem !important;
    color: #00AE9E !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
}

.mobile-submenu-item {
    padding: 0.75rem 2rem !important;
    font-size: 0.9rem !important;
}

/* ===== STYLES POUR FORMULAIRE DE CRÉATION D'ACTIVITÉ ===== */

/* Heures début et fin sur la même ligne sur mobile */
@media (max-width: 767px) {
    .mobile-time-inline {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    .mobile-time-inline .form-label {
        font-size: 0.9rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .mobile-time-inline .form-control {
        font-size: 0.95rem !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    /* S'assurer que les colonnes prennent bien 50% chacune */
    .mobile-time-inline.col-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    /* Espacement entre les champs durée et heures */
    .col-12.col-md-6:has(input[name="duree_heures"]) {
        margin-bottom: 1rem !important;
    }
}

/* ===== STYLES POUR BOUTONS D'ACTION MOBILES ===== */
@media (max-width: 767px) {
    /* Boutons d'action sur la même ligne sur mobile */
    .action-buttons-mobile {
        flex-wrap: nowrap !important;
        gap: 0.25rem !important;
        justify-content: space-between !important;
    }
    
    .action-btn-mobile {
        flex: 1 !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8rem !important;
        white-space: nowrap !important;
        min-width: 0 !important;
        max-width: 120px !important;
    }
    
    .action-btn-mobile i {
        font-size: 0.8rem !important;
    }
    
    .btn-text-mobile {
        font-size: 0.75rem !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Cards du formulaire avec padding réduit */
    .card-body.p-2.p-md-4 {
        padding: 1rem !important;
    }
    
    .card-header.p-2.p-md-4 {
        padding: 1rem !important;
    }
    
    /* Réduire l'espacement sur mobile */
    .mb-3.mb-md-4 {
        margin-bottom: 1rem !important;
    }
}

/* Pour très petits écrans, rendre les boutons encore plus compacts */
@media (max-width: 360px) {
    .action-btn-mobile {
        padding: 0.4rem 0.5rem !important;
        font-size: 0.7rem !important;
        max-width: 100px !important;
    }
    
    .btn-text-mobile {
        font-size: 0.7rem !important;
    }
    
    .action-btn-mobile i {
        font-size: 0.7rem !important;
        margin-right: 0.25rem !important;
    }
}

/* ===== STYLES POUR LES CARTES DE STATISTIQUES MOBILES ===== */

/* Sur mobile, optimiser l'affichage des 3 cartes sur la même ligne */
@media (max-width: 767px) {
    .stats-mobile-row {
        margin-bottom: 1rem !important;
    }
    
    .stats-card-mobile {
        min-height: 120px !important;
        overflow: hidden !important;
        overflow-y: hidden !important;
        overflow-x: hidden !important;
    }
    
    .stats-card-mobile .card-body {
        padding: 0.75rem 0.5rem !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        overflow: hidden !important;
        overflow-y: hidden !important;
        overflow-x: hidden !important;
    }
    
    /* Icons plus petites sur mobile */
    .stats-icon-mobile {
        width: 32px !important;
        height: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Badges plus compacts */
    .stats-badge-mobile {
        font-size: 0.65rem !important;
        padding: 0.15rem 0.4rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 80px !important;
    }
    
    /* Numéros plus petits mais visibles */
    .stats-number-mobile {
        font-size: 1.25rem !important;
        line-height: 1.1 !important;
        margin-bottom: 0.25rem !important;
    }
    
    /* Labels plus petits */
    .stats-label-mobile {
        font-size: 0.7rem !important;
        line-height: 1.1 !important;
        margin-bottom: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        height: 2.2rem !important;
    }
    
    /* Header section des cartes */
    .stats-card-mobile .d-flex {
        margin-bottom: 0.5rem !important;
    }
    
    /* Espacement réduit entre les cartes */
    .stats-mobile-row .col-4 {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
    
    .stats-mobile-row .col-4:first-child {
        padding-left: 0.5rem !important;
    }
    
    .stats-mobile-row .col-4:last-child {
        padding-right: 0.5rem !important;
    }
}

/* Optimisations pour très petits écrans (320px) */
@media (max-width: 360px) {
    .stats-badge-mobile {
        font-size: 0.6rem !important;
        padding: 0.1rem 0.3rem !important;
        max-width: 60px !important;
    }
    
    .stats-number-mobile {
        font-size: 1.1rem !important;
    }
    
    .stats-label-mobile {
        font-size: 0.65rem !important;
        height: 2rem !important;
    }
    
    .stats-icon-mobile {
        width: 28px !important;
        height: 28px !important;
    }
    
    .stats-card-mobile {
        min-height: 110px !important;
    }
}

/* Sur desktop, maintenir le style normal */
@media (min-width: 768px) {
    .stats-card-mobile .card-body {
        padding: 1.5rem !important;
    }
    
    .stats-icon-mobile {
        width: auto !important;
        height: auto !important;
        padding: 1rem !important;
    }
    
    .stats-number-mobile {
        font-size: 2rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .stats-label-mobile {
        font-size: 1rem !important;
        height: auto !important;
        -webkit-line-clamp: unset !important;
    }
    
    .stats-badge-mobile {
        font-size: 0.875rem !important;
        padding: 0.5rem 0.75rem !important;
        max-width: none !important;
    }
}

/* ===== STYLES POUR FILTRES MOBILES ===== */

@media (max-width: 767px) {
    /* Labels des filtres plus compacts sur mobile */
    .filter-label-mobile {
        font-size: 0.75rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    /* Inputs des filtres plus compacts */
    .filter-input-mobile {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Colonnes des dates sur la même ligne */
    .col-6.col-md-3 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    .col-6.col-md-3:first-child {
        padding-left: 0 !important;
    }
    
    .col-6.col-md-3:last-child {
        padding-right: 0 !important;
    }
    
    /* Formulaire de filtres plus compact */
    .card-body form.row.g-3 {
        gap: 0.75rem !important;
    }
}

/* ===== STYLES POUR DATES REPORTING MOBILES ===== */

@media (max-width: 767px) {
    /* Dates début et fin reportings sur la même ligne */
    /* Forcer le conteneur row à utiliser flexbox */
    #filterForm.row {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    
    /* Forcer explicitement les deux divs de dates à rester sur la même ligne */
    #dateRangeGroup.reporting-date-col,
    #dateEndGroup.reporting-date-col {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        min-width: 0 !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    #dateRangeGroup.reporting-date-col {
        padding-left: 0 !important;
        padding-right: 0.5rem !important;
    }
    
    #dateEndGroup.reporting-date-col {
        padding-left: 0.5rem !important;
        padding-right: 0 !important;
    }
    
    .reporting-date-label {
        font-size: 0.75rem !important;
        margin-bottom: 0.25rem !important;
        line-height: 1.2 !important;
    }
    
    .reporting-date-input {
        padding: 0.6rem !important;
        font-size: 0.9rem !important;
    }
}

/* ===== STYLES POUR MODALE DE CRÉATION D'ACTIVITÉ ===== */

/* Modale responsive */
@media (max-width: 767px) {
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
        min-height: calc(100vh - 1rem) !important;
    }
    
    .modal-content {
        min-height: calc(100vh - 1rem) !important;
        border-radius: 15px !important;
    }
    
    .modal-header {
        padding: 1rem !important;
        border-radius: 15px 15px 0 0 !important;
    }
    
    .modal-title {
        font-size: 1.1rem !important;
    }
    
    .modal-body {
        padding: 0 !important;
        flex: 1 !important;
    }
    
    .modal-body .p-3.p-md-4 {
        padding: 1rem !important;
    }
    
    .modal-footer {
        padding: 1rem !important;
        border-radius: 0 0 15px 15px !important;
    }
    
    /* Champs de formulaire dans la modale */
    .modal .form-control,
    .modal .form-select {
        padding: 0.75rem !important;
        font-size: 1rem !important;
    }
    
    .modal .form-label {
        font-size: 0.9rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Boutons de la modale sur mobile */
    .modal-footer .d-flex .btn {
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
        border-radius: 10px !important;
    }
    
    /* Heures sur la même ligne dans la modale */
    .modal .mobile-time-inline .form-control {
        padding: 0.6rem !important;
        font-size: 0.95rem !important;
    }
    
    .modal .mobile-time-inline .form-label {
        font-size: 0.85rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    /* Affichage durée calculée */
    .modal #modal_duration_display {
        background: rgba(0, 174, 158, 0.05) !important;
        padding: 0.5rem !important;
        border-radius: 8px !important;
        border-left: 3px solid #00AE9E !important;
        font-size: 0.9rem !important;
    }
    
    .modal #modal_duration_display.text-danger {
        background: rgba(220, 53, 69, 0.05) !important;
        border-left-color: #dc3545 !important;
    }
    
    .modal #modal_duration_display.text-success {
        background: rgba(40, 167, 69, 0.05) !important;
        border-left-color: #28a745 !important;
    }
}

/* Très petits écrans */
@media (max-width: 360px) {
    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        min-height: 100vh !important;
    }
    
    .modal-content {
        min-height: 100vh !important;
        border-radius: 0 !important;
    }
    
    .modal-header,
    .modal-footer {
        border-radius: 0 !important;
    }
    
    .modal-title {
        font-size: 1rem !important;
    }
    
    .modal-footer .d-flex .btn {
        font-size: 0.8rem !important;
        padding: 0.6rem 0.8rem !important;
    }
}

/* Sur desktop, style normal */
@media (min-width: 768px) {
    .modal-lg {
        max-width: 800px !important;
    }
    
    .modal-body .p-3.p-md-4 {
        padding: 2rem !important;
    }
}

/* ===== STYLES POUR VUE PILIERS ===== */

/* Toolbar mobile - Boutons toggle sur la même ligne */
@media (max-width: 767px) {
    .toolbar-mobile {
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
    }
    
    .search-input-mobile {
        font-size: 0.9rem !important;
        padding: 0.6rem 0.75rem 0.6rem 2.5rem !important;
        min-width: 0 !important;
    }
    
    .view-toggle-mobile {
        flex-shrink: 0 !important;
        min-width: 80px !important;
    }
    
    .view-btn-mobile {
        padding: 0.6rem !important;
        font-size: 0.9rem !important;
        min-width: 40px !important;
    }
    
    /* Header stats améliorées */
    .header-stats-row {
        gap: 0.5rem !important;
        margin-bottom: 0 !important;
    }
    
    .header-stat-card {
        min-height: 80px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        align-items: center !important;
        text-align: center !important;
        padding: 0.75rem 0.5rem !important;
    }
    
    .header-stat-label {
        font-size: 0.65rem !important;
        line-height: 1.1 !important;
        margin-bottom: 0.5rem !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        height: 2rem !important;
    }
    
    .header-stat-number {
        font-size: 1.8rem !important;
        line-height: 1 !important;
    }
    
    /* Menu 3 points des cartes piliers */
    .pilier-dropdown {
        top: 0.5rem !important;
        left: 0.5rem !important;
    }
    
    .pilier-menu-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.8rem !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
    }
    
    .pilier-menu-btn:hover {
        background: rgba(255, 255, 255, 1) !important;
        transform: scale(1.05) !important;
    }
    
    /* Ajustement des cartes de piliers */
    .pilier-card-container .card-header {
        padding-top: 3rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .pilier-card-container .card-body {
        padding: 1rem !important;
    }
}

/* Très petits écrans */
@media (max-width: 360px) {
    .view-toggle-mobile {
        min-width: 70px !important;
    }
    
    .view-btn-mobile {
        padding: 0.5rem !important;
        font-size: 0.8rem !important;
        min-width: 35px !important;
    }
    
    .header-stat-card {
        min-height: 70px !important;
        padding: 0.5rem 0.25rem !important;
    }
    
    .header-stat-label {
        font-size: 0.6rem !important;
        height: 1.8rem !important;
    }
    
    .header-stat-number {
        font-size: 1.5rem !important;
    }
    
    .pilier-menu-btn {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.75rem !important;
    }
}

/* Sur desktop, styles normaux */
@media (min-width: 768px) {
    .header-stat-card {
        padding: 1.5rem !important;
        min-height: auto !important;
    }
    
    .header-stat-label {
        font-size: 0.875rem !important;
        height: auto !important;
        -webkit-line-clamp: unset !important;
    }
    
    .header-stat-number {
        font-size: 2rem !important;
    }
    
    .pilier-menu-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
    }
}

/* Préchargement des éléments */
@media (max-width: 767px) {
    .mobile-bottom-nav {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        animation: slideInFromBottom 0.3s ease !important;
    }
}

@keyframes slideInFromBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ===== DEBUGGING : Forcer l'affichage du menu mobile ===== */
@media (max-width: 767px) {
    /* S'assurer que les éléments du menu sont visibles quand la classe .show est active */
    .mobile-menu-overlay.show {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 1055 !important;
        background: rgba(0, 0, 0, 0.6) !important;
        backdrop-filter: blur(2px) !important;
    }
    
    .mobile-menu.show {
        display: block !important;
        visibility: visible !important;
        z-index: 1056 !important;
        transform: translateX(0) !important;
    }
    
    /* Override toute transition qui pourrait causer des problèmes */
    body.menu-open {
        overflow: hidden !important;
    }

    /* STYLES POUR BOUTONS TOGGLE VUE REPORTINGS */
    .reporting-view-toggle-mobile .reporting-view-btn-mobile {
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* STYLES POUR CARTES DE STATISTIQUES DASHBOARD */
    .dashboard-stats-row .col-4 {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }

    .dashboard-stats-card .card-body {
        padding: 0.5rem !important;
    }

    .dashboard-stats-icon {
        padding: 0.5rem !important;
    }

    .dashboard-stats-badge {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    .dashboard-stats-number {
        font-size: 1.5rem !important;
    }

    .dashboard-stats-label {
        font-size: 0.7rem !important;
        line-height: 1.2 !important;
        -webkit-line-clamp: 2 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* STYLES POUR CARTE PROGRESSION (4EME CARTE) */
    .dashboard-progression-card .card-body {
        padding: 0.75rem !important;
    }

    .dashboard-progression-card h2 {
        font-size: 2rem !important;
    }

    /* STYLES POUR FILTRES - TOUTES LES PAGES */
    /* Masquer toutes les sections de filtres par défaut sur mobile */
    [id*="FilterFormContainer"]:not(.filters-visible),
    [id*="filterFormContainer"]:not(.filters-visible) {
        display: none !important;
    }
    
    /* Afficher les filtres quand la classe filters-visible est présente */
    [id*="FilterFormContainer"].filters-visible,
    [id*="filterFormContainer"].filters-visible {
        display: block !important;
    }
    
    /* Style pour les boutons toggle filtres */
    [onclick*="toggleFilterSection"],
    [onclick*="toggleFilters"] {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    /* STYLES POUR FILTRES TIME-ENTRIES */
    /* S'assurer que les champs de date sont sur la même ligne */
    .time-entry-date-col.col-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    .time-entry-date-col.col-6:first-of-type {
        padding-left: 0 !important;
        padding-right: 0.5rem !important;
    }
    
    .time-entry-date-col.col-6:last-of-type {
        padding-left: 0.5rem !important;
        padding-right: 0 !important;
    }
}

/* Sur desktop, toujours afficher les filtres */
@media (min-width: 768px) {
    [id*="FilterFormContainer"],
    [id*="filterFormContainer"] {
        display: block !important;
    }
    
    /* Forcer l'affichage sur desktop même sans classe */
    [id*="FilterFormContainer"]:not(.filters-visible),
    [id*="filterFormContainer"]:not(.filters-visible) {
        display: block !important;
    }
}

/* Sur desktop, toujours afficher les filtres */
@media (min-width: 768px) {
    #filterFormContainer {
        display: block !important;
    }
}