/* Styles personnalisés pour l'application de gestion de mâts */

/* Fix z-index pour modal au-dessus de la carte Leaflet */
#modal {
    z-index: 10000 !important;
}

#modal > div:first-child {
    z-index: 10001 !important;
}

.leaflet-container {
    z-index: 1 !important;
}

/* Sous-onglets */
.sub-tabs {
    border-bottom: 1px solid #E5E7EB;
    margin-bottom: 1.5rem;
}

.sub-tab {
    padding: 0.75rem 1.5rem;
    border-bottom: 2px solid transparent;
    font-weight: 500;
    color: #6B7280;
    transition: all 0.2s;
    cursor: pointer;
}

.sub-tab:hover {
    color: #FF6600;
}

.sub-tab.active {
    color: #FF6600;
    border-bottom-color: #FF6600;
}

.nav-tab {
    padding: 1rem 1.5rem;
    border-bottom: 3px solid transparent;
    font-weight: 500;
    color: #6B7280;
    transition: all 0.2s;
}

.nav-tab:hover {
    color: #FF6600;
    background-color: #F9FAFB;
}

.nav-tab.active {
    color: #FF6600;
    border-bottom-color: #FF6600;
    background-color: #F9FAFB;
}

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

.fade-in {
    animation: fadeIn 0.3s ease-in;
}

/* Scrollbar personnalisée */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #F3F4F6;
}

::-webkit-scrollbar-thumb {
    background: #9CA3AF;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6B7280;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
}

/* ==================== RESPONSIVE DESIGN ==================== */

/* Menu burger mobile */
#mobile-menu-button {
    display: none;
}

/* Cacher le menu mobile et overlay sur desktop */
#mobile-nav,
#mobile-overlay {
    display: none;
}

/* Sur desktop uniquement */
@media (min-width: 1025px) {
    #desktop-nav {
        display: flex !important;
    }
}

@media (max-width: 1024px) {
    /* Afficher le bouton burger sur tablette et mobile */
    #mobile-menu-button {
        display: block !important;
    }
    
    /* Cacher la navigation desktop par défaut */
    #desktop-nav {
        display: none !important;
    }
    
    /* Navigation mobile */
    #mobile-nav {
        display: block;
        position: fixed;
        top: 0;
        left: -100%;
        width: 280px;
        height: 100vh;
        background: white;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        transition: left 0.3s ease;
        z-index: 1000;
        overflow-y: auto;
    }
    
    #mobile-nav.open {
        left: 0;
    }
    
    /* Overlay pour fermer le menu */
    #mobile-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    }
    
    #mobile-overlay.active {
        display: block;
    }
    
    /* Navigation mobile items */
    .mobile-nav-item {
        display: block;
        padding: 1rem 1.5rem;
        color: #374151;
        border-bottom: 1px solid #E5E7EB;
        transition: background-color 0.2s;
    }
    
    .mobile-nav-item:hover,
    .mobile-nav-item.active {
        background-color: #FFF3E0;
        color: #FF6600;
    }
    
    .mobile-nav-item i {
        width: 24px;
        margin-right: 12px;
    }
}

/* Tableaux responsive */
@media (max-width: 768px) {
    /* Forcer le scroll horizontal sur les tableaux */
    .overflow-x-auto {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Réduire le padding des cellules sur mobile */
    table td,
    table th {
        padding: 0.5rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Cartes au lieu de tableaux pour certaines vues */
    .mobile-card-view {
        display: block !important;
    }
    
    .desktop-table-view {
        display: none !important;
    }
}

/* Desktop - tableaux normaux */
@media (min-width: 769px) {
    .mobile-card-view {
        display: none !important;
    }
    
    .desktop-table-view {
        display: table !important;
    }
}

/* Header responsive */
@media (max-width: 640px) {
    header h1 {
        font-size: 1.25rem !important;
    }
    
    header .flex {
        flex-wrap: wrap;
    }
    
    /* Boutons plus petits sur mobile */
    button {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }
    
    /* Modals plein écran sur mobile */
    #modal-container > div > div {
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        max-height: 100vh !important;
    }
}

/* Grilles responsive */
@media (max-width: 1024px) {
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 640px) {
    .grid-cols-4,
    .grid-cols-3,
    .grid-cols-2 {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    
    /* Dashboard cards en colonne unique */
    .dashboard-metrics {
        gap: 1rem;
    }
}

/* Cartes Leaflet responsive */
@media (max-width: 768px) {
    #map {
        height: 300px !important;
    }
}

/* Formulaires responsive */
@media (max-width: 640px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    
    form input,
    form select,
    form textarea {
        font-size: 16px !important; /* Évite le zoom sur iOS */
    }
}