/* ==========================================================================
   STILI GENERALI & VARIABILI
   Definiamo la tavolozza colori per garantire coerenza in tutta l'app.
   ========================================================================== */
:root {
    --urban-navy: #1e293b;    /* Blu ardesia: usato per navbar e testi principali (professionale) */
    --urban-accent: #334155;  /* Grigio fumo: per elementi secondari */
    --ts-blue: #dc2626;       /* Blu Trieste: colore ufficiale per i dati di Trieste */
    --ta-red: #2563eb;        /* Rosso Taranto: colore ufficiale per i dati di Taranto */
    --bg-light: #f1f5f9;      /* Grigio chiarissimo: sfondo riposante per la dashboard */
}

body {
    font-family: 'Inter', sans-serif; /* Font moderno ottimizzato per la leggibilità numerica */
    background-color: var(--bg-light);
    color: #0f172a; /* Testo quasi nero per il massimo contrasto */
}

/* ==========================================================================
   NAVBAR (RE-DESIGN SOBRIO)
   ========================================================================== */
.navbar-uni {
    background: var(--urban-navy) !important;
    color: white;
    padding: 0.8rem 0;
    /* Nuova linea grigio chiaro */
    border-bottom: 3px solid #e2e8f0; 
}

.navbar-brand {
    color: white !important;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ==========================================================================
   FILTRI (GESTIONE DOPPIO CONTRASTO)
   Abbiamo filtri sia su sfondo scuro (navbar) che su sfondo chiaro (sopra le mappe).
   ========================================================================== */
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.filter-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 2px;
}

/* Variante: Filtri dentro la NAVBAR (Sfondo Navy) */
.navbar-uni .filter-label {
    color: #94a3b8; /* Colore tenue per non appesantire la barra */
}

.navbar-uni .form-select-sm {
    font-size: 0.8rem;
    border: 1px solid #475569;
    background-color: #1e293b;
    color: #ffffff;
}

/* Variante: Filtri nel CORPO della pagina (Sfondo chiaro sopra le mappe) */
.filter-group .form-select-sm {
    font-size: 0.85rem;
    border: 1px solid #cbd5e1;
    background-color: #ffffff;
    color: #0f172a;
}

/* Forza il testo delle select a restare scuro per evitare bug di visualizzazione */
select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* ==========================================================================
   CARD ACCADEMICHE (KPI & GRAFICI)
   Design pulito ispirato alle pubblicazioni scientifiche.
   ========================================================================== */
.academic-card {
    background: white;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Ombra leggerissima per profondità */
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease-in-out;
}

/* Effetto elevazione al passaggio del mouse per feedback utente */
.academic-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

/* ==========================================================================
   TITOLI DI SEZIONE
   ========================================================================== */
.section-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--urban-navy);
    margin-bottom: 1.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid #e2e8f0;
    display: inline-block; /* Impedisce alla linea di toccare i bordi laterali */
}

/* ==========================================================================
   RANKING & MAPPE
   Configurazione dei contenitori per Plotly e per le liste a lato.
   ========================================================================== */
.ranking-container {
    background-color: #fafafa;
    border-right: 1px solid #e2e8f0;
    /* Serve a gestire liste lunghe di circoscrizioni senza rompere il layout */
    overflow-y: auto; 
    max-height: 480px; 
}

.map-academic {
    min-height: 480px;
    width: 100%;
    background: white;
}

/* Bande colorate sopra i box delle città */
.bg-primary { background-color: var(--urban-navy) !important; }
.bg-danger { background-color: #991b1b !important; }

/* ==========================================================================
   UTILITIES & FIX PLOTLY
   ========================================================================== */
.text-primary { color: var(--ts-blue) !important; } /* Classe per testi legati a Trieste */
.text-danger { color: var(--ta-red) !important; }   /* Classe per testi legati a Taranto */

/* Nasconde la barra degli strumenti di Plotly che sporca il design */
.js-plotly-plot .plotly .modebar { display: none !important; }

/* Personalizzazione scrollbar (solo browser Webkit: Chrome, Safari, Edge) */
.ranking-container::-webkit-scrollbar {
    width: 4px;
}
.ranking-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

/* ==========================================================================
   MODALI & TOOLTIP (UI AVANZATA)
   ========================================================================== */
.modal-content { border-radius: 10px; }
.modal-header {
    background-color: var(--urban-navy) !important;
    border-radius: 10px 10px 0 0;
}

/* Stile tecnico per i tooltip al passaggio del mouse sui KPI */
.custom-tooltip .tooltip-inner {
    background-color: #1e293b !important;
    color: #f8fafc;
    font-size: 0.75rem;
    padding: 8px 12px;
    border-radius: 2px;
    text-align: left;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 250px;
}

/* Animazione fluida per la comparsa dei tooltip */
.tooltip.fade.show {
    opacity: 1;
    transform: translateY(-2px);
    transition: opacity 0.15s linear, transform 0.15s ease-out;
}


body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container-fluid.p-4 {
    flex: 1; /* Spinge il footer verso il basso se il contenuto è scarso */
}


/* Effetto hover discreto per il link dello sviluppatore */
.highlight-link {
    transition: opacity 0.2s ease;
}
.highlight-link:hover {
    opacity: 0.8;
    text-decoration: underline !important;
}