/* --- 1. BASE & FONT --- */
html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f9fafb; /* Grigio chiarissimo moderno */
    color: #1e293b; /* Ardesia scuro per leggibilità */
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* Gestiamo lo scroll internamente */
}

/* --- 2. LAYOUT CONDIVISO (Sidebar + Content) --- */
/* Questo gestisce l'altezza fissa e lo scroll interno per tutte le pagine */
.gestione-container {
    height: calc(100vh - 60px); /* Adatta all'altezza della Navbar */
    overflow: hidden;
    background-color: #fff;
}

/* Colonna Sinistra (Filtri) */
.sidebar-col {
    background-color: #ffffff;
    border-right: 1px solid #e2e8f0;
    height: 100%;
    display: flex;
    flex-direction: column;
    z-index: 10;
}

/* Colonna Destra (Dati/Mappa) */
.content-col {
    background-color: #f8fafc;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Header Sticky (Titoli) */
.sticky-top-title {
    flex-shrink: 0;
    background-color: #ffffff;
    padding: 1rem 1.25rem;
    margin: 0;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 600;
    color: #0f172a;
    display: flex;
    align-items: center;
    height: 60px; /* Altezza uniforme */
}

/* Aree Scrollabili */
.filter-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.25rem;
}

.content-scrollable {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* Footer dei Filtri (Bottoni) */
.filter-footer {
    flex-shrink: 0;
    background-color: #ffffff;
    border-top: 1px solid #e2e8f0;
    padding: 1rem 1.25rem;
}

/* --- 3. NAVMENU STYLE --- */
.main-navbar {
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    height: 60px;
    padding: 0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.navbar-nav .nav-link {
    color: #64748b !important;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0 1rem !important;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

    .navbar-nav .nav-link i {
        font-size: 1.1rem;
        color: #94a3b8;
        margin-top: -2px;
    }

    .navbar-nav .nav-link:hover {
        color: #0d6efd !important;
        background-color: #f8fafc;
    }

        .navbar-nav .nav-link:hover i {
            color: #0d6efd;
        }

    .navbar-nav .nav-link.active {
        color: #0d6efd !important;
        border-bottom: 2px solid #0d6efd;
        background-color: #f0f9ff; /* Sfondo azzurrino attivo */
    }

        .navbar-nav .nav-link.active i {
            color: #0d6efd;
        }

/* --- 4. COMPONENTI UI --- */
.btn-primary {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    font-weight: 500;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

    .btn-primary:hover {
        background-color: #0b5ed7 !important;
    }

.form-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.form-select, .form-control {
    border-color: #cbd5e1;
    font-size: 0.9rem;
}

    .form-select:focus, .form-control:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.15);
    }

/* --- 5. ANIMAZIONI --- */
.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mappa */
#map-container {
    width: 100%;
    height: 100%;
    background-color: #eef2f6;
}

.comune-label {
    font-family: 'Inter', sans-serif;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

    .comune-label.label-trasparente {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    }
/* --- MOBILE OPTIMIZATION (SBLOCCO SCROLL) --- */
@media (max-width: 991.98px) {
    /* Su mobile, rimuoviamo il blocco dell'altezza 100vh */
    html, body, .page, .gestione-container, .regionali-container {
        height: auto !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
    }

    /* La colonna dei contenuti (dove c'è la mappa) deve avere spazio */
    .content-col, .col-md-9, #data-content {
        height: auto !important;
        min-height: 500px; /* Altezza minima garantita per la mappa */
        overflow: visible !important;
    }

    /* Nascondiamo la scrollbar laterale nativa se non serve */
    .filter-content {
        max-height: 70vh; /* Evita che i filtri siano troppo lunghi */
    }
}