@media (max-width: 767.98px) {
	
	 

    #map-quartieri {
        height: 300px;  /* Riduce l'altezza delle mappe */
    }

    .bar-cell {
        height: 20px;  /* Riduce l'altezza delle barre nella tabella */
    }
    
    .value {
        font-size: 0.85rem;  /* Riduce la dimensione del testo nelle barre */
    }

    .tooltip {
        font-size: 12px;  /* Riduce la dimensione del testo del tooltip */
        padding: 4px;  /* Riduce il padding del tooltip */
    }

    #tabella-serie-storica1 th, #tabella-serie-storica1 td {
        padding: 8px;  /* Riduce il padding delle celle della tabella */
    }

    .it-header-center-content-wrapper .it-brand-text h2 {
        font-size: 1.5rem;  /* Mantieni questa regola per il titolo del brand */
    }
	.it-hero-wrapper {
    min-height: 0px !important;

}
  [data-bs-toggle="sticky"] {
        position: static !important; /* Remove sticky behavior on mobile */
    }

}

/* La header sta sempre sopra */
.it-header-wrapper { position: relative; z-index: 2000; }
.it-header-navbar-wrapper .navbar .dropdown-menu { z-index: 2050; }

/* La sidebar sinistra sticky sta sotto */
@media (min-width: 992px) {
  #left-menu-wrapper { position: sticky; top: 80px; z-index: 100; }
}

/* Evita ritagli dei dropdown accanto alla sidebar */
.it-sidebar-wrapper,
#left-menu-wrapper { overflow: visible; }

.hero-text-preview {
  max-height: 150px;
  overflow: hidden;
  position: relative;
}

.hero-text-preview::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}

#readMoreBtn {
  margin-top: 1rem;
}

/* Stili personalizzati per Messina In Cifre */
.it-header-center-wrapper {
    background-color: #0066CC;
}

.it-header-center-content-wrapper .it-brand-text {
    color: white;
}

.it-footer {
    background-color: var(--bs-dark);
}



@media (max-width: 767.98px) {
    .it-header-center-content-wrapper .it-brand-text h2 {
        font-size: 1.5rem;
    }
}
.sticky-top {
    position: sticky;
    top: 0;
    z-index: 10200!important;
}


#messina-map-1, #messina-map-2, #messina-map-vecchiaia, #messina-map-dipendenza,#messina-map-ricambio, #messina-map-figli {
    width: 100%; /* Lascia che Chart.js gestisca questo */
    height: 650px !important; /* Forza l'altezza */
    background-color: transparent; /* Rimuove il background grigio scuro */
    border-radius: 0; /* Rimuove il border radius */
    padding: 0; /* Rimuove il padding */
    max-width: 100%; /* Previene overflow */
    object-fit: contain; /* Mantiene le proporzioni */
}

#wasteChart, #percentageChangeChart, #wastePerCapitaChart, #registrate-chart, #evoluzione-prezzi, #evoluzione-indice-prezzi, #priceIndexChart, #mobilitaChart, #chart-popolazione, #chart-prescolare-obbligo, #chart-forza-lavoro-adulta, #chart-senile, #mobilitaChart, #priceIndexChart2 {
    width: 100%;
    
    max-height: 50vh; /* limita l'altezza al 80% dell'altezza della viewport */
}

#incomeChart, #incomeDonutChart, #incomeTimeSeriesChart, #incomeBarChart,#hotelChartExtra, #hotelChart,#statisticheAnnualiChart,#clientiItalianiChart,#clientiStranieriChart,#clientiTotaleChart {
    width: 100%;
    
    max-height: 30vh; /* limita l'altezza al 80% dell'altezza della viewport */
}




/* Media query per schermi mobili */
@media screen and (max-width: 768px) {
	#grafico-comunita-straniere {
		max-height: 400px; /* o l'altezza massima desiderata */
		}
	
    #messina-map-1, #messina-map-2, #messina-map-vecchiaia, #messina-map-dipendenza, #messina-map-ricambio, #messina-map-figli {
        height: 350px !important; /* Altezza ridotta per schermi mobili */
        padding: 0 !important; /* Rimuove il padding anche in mobile */
        margin: 0 auto; /* Centra il canvas */
        display: block;
        max-width: 95%; /* Limita la larghezza */
    }
	#grafico-comunita-straniere, #piramide-popolazione-straniera, #piramide-popolazione, #grafico-circoscrizioni {
    max-height: 350px; /* o l'altezza massima desiderata */
	}
}

#grafico-comunita-straniere, #piramide-popolazione-straniera, #piramide-popolazione, #grafico-circoscrizioni {
    max-height: 900px; /* o l'altezza massima desiderata */
}

#nomi-cloud-2023, #cognomi-cloud-2023 {
    max-height: 700px; /* o l'altezza massima desiderata */
}

#nomi-nati-2023, #nomi-nati-1923 {
    max-height: 700px; /* o l'altezza massima desiderata */
}

body {
    font-family: 'Titillium Web', sans-serif;
}

.it-header-slim-wrapper.is-sticky {
    z-index: 1030; /* Usa un valore alto, ma inferiore a quello di eventuali modali */
}

.icon-white {
    fill: white !important;
}

#readMoreBtn {
            display: inline-block;
            margin-top: 1rem;
            z-index: 10;
            position: relative;
        }

        .hero-text-preview {
            max-height: 100px;
            overflow: hidden;
            position: relative;
        }

/* Hero Bootstrap Italia - Mobile preview */
.hero-mobile-preview {
    max-height: 60px;
    overflow: hidden;
    position: relative;
}

.hero-mobile-preview::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.8));
}

/* Responsive adjustments per hero Bootstrap Italia */
@media (max-width: 767.98px) {
    .it-hero-wrapper {
        min-height: 60vh;
    }
}

/* Enhanced card backgrounds - Bootstrap Italia compliant */
.card-wrapper .card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
    border: 1px solid rgba(0,102,204,0.2) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 8px !important;
}

.card-wrapper .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0066CC, #4dabf7) !important;
    z-index: 1;
}

.card-wrapper .card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(0,102,204,0.2) !important;
}

/* Alternate card styles for visual interest */
.card-wrapper:nth-child(even) .card {
    background: linear-gradient(135deg, #f8f9fd 0%, #e3f2fd 100%) !important;
}

.card-wrapper:nth-child(3n) .card {
    background: linear-gradient(135deg, #f3e5f5 0%, #fce4ec 100%) !important;
}

.card-wrapper:nth-child(3n)::before {
    background: linear-gradient(90deg, #9c27b0, #e91e63) !important;
}

.card-wrapper:nth-child(5n) .card {
    background: linear-gradient(135deg, #e8f5e8 0%, #f1f8e9 100%) !important;
}

.card-wrapper:nth-child(5n)::before {
    background: linear-gradient(90deg, #2e7d32, #66bb6a) !important;
}

/* Category icon enhancement */
.card .categoryicon-top {
    padding: 1.2rem 0 0.8rem 0 !important;
    position: relative;
    z-index: 2;
}

.card .categoryicon-top .icon {
    color: #0066CC !important;
    margin-bottom: 0.5rem !important;
    filter: drop-shadow(0 2px 4px rgba(0,102,204,0.3)) !important;
    font-size: 2rem !important;
}

/* Card content enhancement */
.card .card-body {
    position: relative !important;
    z-index: 2 !important;
    padding: 1.8rem !important;
}

.card .card-title {
    color: #1a1a1a !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
}

.card .card-text {
    color: #666 !important;
    line-height: 1.6 !important;
    margin-bottom: 1.5rem !important;
}

/* Read more link enhancement */
.card .read-more {
    color: #0066CC !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.card .read-more:hover {
    color: #004d99 !important;
    text-decoration: none !important;
}

.card .read-more .icon {
    transition: transform 0.2s ease !important;
    color: #0066CC !important;
}

.card .read-more:hover .icon {
    transform: translateX(4px) !important;
    color: #004d99 !important;
}

/* ===== MIGLIORAMENTI TABELLE ===== */

/* Contenitore tabella responsivo elegante */
.table-responsive {
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border: 1px solid #dee2e6;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Scrollbar personalizzata per le tabelle */
.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #0066cc;
    border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #0052a3;
}

/* Stili per tabelle larghe (molte colonne) */
.wide-table {
    font-size: 0.875rem;
    margin-bottom: 0;
    min-width: 1000px; /* Larghezza minima per forzare scroll orizzontale quando necessario */
}

.wide-table th {
    white-space: nowrap;
    font-weight: 600;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-color: #dee2e6;
    padding: 1rem 0.75rem;
    text-align: center;
    vertical-align: middle;
    font-size: 0.8rem;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #0066cc;
}

.wide-table td {
    white-space: nowrap;
    padding: 0.875rem 0.75rem;
    text-align: center;
    vertical-align: middle;
    border-color: #dee2e6;
    font-weight: 500;
    color: #212529;
    transition: background-color 0.2s ease;
}

/* Prima colonna (indicatori) - stile speciale */
.wide-table th:first-child,
.wide-table td:first-child {
    text-align: left;
    font-weight: 600;
    min-width: 220px;
    max-width: 280px;
    white-space: normal;
    word-wrap: break-word;
    background-color: rgba(0, 102, 204, 0.05);
    border-right: 2px solid #0066cc;
    position: sticky;
    left: 0;
    z-index: 10;
}

.wide-table th:first-child {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    color: #1565c0;
    font-weight: 700;
}

/* Evidenziazione al hover delle righe */
.wide-table tbody tr:hover {
    background-color: rgba(0, 102, 204, 0.08);
    transform: scale(1.01);
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.15);
}

.wide-table tbody tr:hover td:first-child {
    background-color: rgba(0, 102, 204, 0.12);
}

/* Colori alternati per le righe */
.wide-table tbody tr:nth-child(even) {
    background-color: rgba(248, 249, 250, 0.6);
}

.wide-table tbody tr:nth-child(even) td:first-child {
    background-color: rgba(0, 102, 204, 0.08);
}

/* Numeri con formatting elegante */
.wide-table td:not(:first-child) {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    font-size: 0.85rem;
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,249,250,0.9) 100%);
}

/* Responsive design per tabelle larghe */
@media (max-width: 1400px) {
    .wide-table {
        font-size: 0.8rem;
        min-width: 900px;
    }
    
    .wide-table th,
    .wide-table td {
        padding: 0.75rem 0.5rem;
    }
    
    .wide-table th:first-child,
    .wide-table td:first-child {
        min-width: 180px;
        max-width: 220px;
    }
}

@media (max-width: 1200px) {
    .wide-table {
        font-size: 0.75rem;
        min-width: 800px;
    }
    
    .wide-table th,
    .wide-table td {
        padding: 0.625rem 0.4rem;
    }
    
    .wide-table th:first-child,
    .wide-table td:first-child {
        min-width: 160px;
        max-width: 200px;
    }
}

@media (max-width: 768px) {
    .wide-table {
        font-size: 0.7rem;
        min-width: 700px;
    }
    
    .wide-table th,
    .wide-table td {
        padding: 0.5rem 0.3rem;
    }
    
    .wide-table th:first-child,
    .wide-table td:first-child {
        min-width: 140px;
        max-width: 180px;
        font-size: 0.75rem;
    }
}

/* Indicatore di scroll per utenti */
.table-responsive::after {
    content: '↔ Scorri orizzontalmente per vedere tutte le colonne';
    position: absolute;
    bottom: -25px;
    right: 0;
    font-size: 0.7rem;
    color: #6c757d;
    font-style: italic;
}

@media (min-width: 1400px) {
    .table-responsive::after {
        display: none;
    }
}

/* Tooltip per celle con contenuto lungo */
.wide-table td[title]:hover {
    position: relative;
    cursor: help;
}

/* Badge/indicatori per valori speciali */
.highlight-value {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-weight: 600;
    color: #856404;
}

/* ===== TABELLE RIASSUNTIVE (2 COLONNE) ===== */

/* Stili per tabelle riassuntive senza scroll orizzontale */
.summary-table {
    font-size: 0.9rem;
    margin-bottom: 0;
    width: 100%; /* Si adatta al container */
}

.summary-table th {
    font-weight: 600;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-color: #dee2e6;
    padding: 1rem 0.75rem;
    text-align: left;
    vertical-align: middle;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #0066cc;
}

.summary-table td {
    padding: 0.875rem 0.75rem;
    text-align: left;
    vertical-align: middle;
    border-color: #dee2e6;
    font-weight: 500;
    color: #212529;
    transition: background-color 0.2s ease;
}

/* Prima colonna (indicatori) - stile speciale per tabelle riassuntive */
.summary-table th:first-child,
.summary-table td:first-child {
    font-weight: 600;
    background-color: rgba(0, 102, 204, 0.05);
    border-right: 2px solid #0066cc;
    width: 60%; /* Larghezza fissa per la prima colonna */
}

.summary-table th:first-child {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    color: #1565c0;
    font-weight: 700;
}

/* Seconda colonna (valori) */
.summary-table th:last-child,
.summary-table td:last-child {
    text-align: right;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,249,250,0.9) 100%);
    width: 40%; /* Larghezza fissa per la seconda colonna */
}

/* Evidenziazione al hover delle righe per tabelle riassuntive */
.summary-table tbody tr:hover {
    background-color: rgba(0, 102, 204, 0.08);
    transform: scale(1.01);
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.15);
}

.summary-table tbody tr:hover td:first-child {
    background-color: rgba(0, 102, 204, 0.12);
}

/* Colori alternati per le righe delle tabelle riassuntive */
.summary-table tbody tr:nth-child(even) {
    background-color: rgba(248, 249, 250, 0.6);
}

.summary-table tbody tr:nth-child(even) td:first-child {
    background-color: rgba(0, 102, 204, 0.08);
}

/* ===== ICONE PULSANTI SCARICA ===== */

/* Icone bianche per i pulsanti di download */
.btn .icon {
    fill: white !important;
    color: white !important;
}

.btn-primary .icon,
.btn-primary svg {
    fill: white !important;
    color: white !important;
}

/* Wrapper standard per tutti i grafici */
.chart-container {
  position: relative;   /* richiesto da Chart.js */
  width: 100%;
  height: 420px;        /* regola qui l’altezza a piacere */
  overflow: hidden;
}

.chart-container.tall { height: 560px; }   /* per mappe o grafici alti */

/* Il canvas si adatta al wrapper */
.chart-container > canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* sicurezza: i canvas nelle card non “strabordano” */
.card .card-body canvas {
  max-width: 100%;
}