/**
 * Stili Cartina Geografica
 * Contiene gli stili per la mappa ECharts, breadcrumb e legenda.
 */

/* ==========================================================================
   Contenitore Cartina
   ========================================================================== */

.cartina-container {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 400px;
    background-color: var(--bs-tertiary-bg);
    border-radius: 0.5rem;
    overflow: hidden;
}

.cartina-container canvas {
    border-radius: 0.5rem;
}

/* ==========================================================================
   Breadcrumb Navigazione
   ========================================================================== */

.breadcrumb-cartina {
    background-color: var(--bs-tertiary-bg);
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
}

.breadcrumb-cartina .breadcrumb {
    margin-bottom: 0;
    padding: 0;
    background-color: transparent;
    font-size: 0.875rem;
}

.breadcrumb-cartina .breadcrumb-item {
    color: var(--bs-secondary-color);
}

.breadcrumb-cartina .breadcrumb-item a {
    color: var(--bs-link-color);
    text-decoration: none;
}

.breadcrumb-cartina .breadcrumb-item a:hover {
    color: var(--bs-link-hover-color);
    text-decoration: underline;
}

.breadcrumb-cartina .breadcrumb-item.active {
    color: var(--bs-body-color);
    font-weight: 500;
}

.breadcrumb-cartina .breadcrumb-item + .breadcrumb-item::before {
    content: ">";
    color: var(--bs-secondary-color);
}

/* ==========================================================================
   Slideshow Styles
   ========================================================================== */

.slideshow-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: calc(100vh - 150px);
}

.slideshow-header {
    background-color: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.slideshow-titolo {
    color: var(--bs-body-color);
}

.slideshow-contenuto {
    flex: 1;
    overflow: auto;
}

.slideshow-controlli {
    background-color: var(--bs-tertiary-bg);
    border-top: 1px solid var(--bs-border-color);
}

/* Indicatore pallini */
.slideshow-indicatore {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
}

/* Il bottone e' l'area cliccabile reale (24px, WCAG 2.5.8 Target Size
   Minimum) — il pallino visivo resta piccolo (12px) e vive nello
   pseudo-elemento ::after, centrato, cosi' l'aspetto non cambia rispetto a
   prima ma l'area attivabile e' piu' grande. Ora e' un <button> vero
   (gestoreSlideshow.js), non piu' uno <span>: reset dei default browser. */
.indicatore-pallino {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    position: relative;
    cursor: pointer;
}

.indicatore-pallino::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--bs-border-color);
    transform: translate(-50%, -50%);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.indicatore-pallino:hover::after {
    background-color: var(--bs-tertiary-color);
    transform: translate(-50%, -50%) scale(1.2);
}

.indicatore-pallino.attivo::after {
    background-color: var(--bs-primary);
    transform: translate(-50%, -50%) scale(1.2);
}

.indicatore-numeri {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

/* Contatore compatto "N / M" per il paginatore mobile — nascosto di default,
   mostrato solo sotto i 768px (vedi media query responsive sotto). */
.slideshow-contatore-mobile {
    display: none;
}

/* ==========================================================================
   Bottoni Zoom Cartina
   ========================================================================== */

/* Overlay assoluto ancorato al div host della mappa (position:relative
   impostato da JS in gestoreCartina.js/_creaControlliZoom), non un
   elemento separato: sparisce automaticamente col resto quando la
   slide cambia. Stile Google Maps: contenitore unico con angoli
   arrotondati in basso a destra, due bottoni quadrati impilati
   separati da un filo divisorio — alternativa a puntatore singolo e
   operabile da tastiera al Ctrl+rotellina nativo di ECharts (che da
   solo non è raggiungibile senza mouse/trackpad). */
.h-100[id^="slideshow-cartina-"] { position: relative; }
.cartina-zoom-controlli {
    position: absolute; bottom: .5rem; right: .5rem; z-index: 5;
    display: flex; flex-direction: column;
    border-radius: .25rem; overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.cartina-zoom-controlli button {
    width: 2.25rem; height: 2.25rem; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 0;
}
.cartina-zoom-controlli button + button { border-top: 1px solid var(--bs-border-color); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .cartina-container {
        min-height: 300px;
    }

    .cartina-legenda {
        max-width: 150px;
        font-size: 0.7rem;
    }
}

/* Paginatore compatto ("Simple mode", pattern ufficiale del componente
   Paginazione di Bootstrap Italia): sotto i 768px di spazio DISPONIBILE
   sostituisco pallini + bottoni a piena larghezza (che da soli occupavano
   gran parte dello schermo, vedi nota sopra su .slide-contenuto-interno)
   con una singola riga stretta "< 2 / 15 >" — recupero spazio verticale
   per il contenuto vero della slide.
   Container query invece di @media (cambiata il 10/9): la soglia deve
   reagire allo spazio vero lasciato da .slideshow-con-sidebar (dichiarato
   container in dashboard.css), non alla larghezza della finestra — con la
   sidebar "Indice" aperta la finestra puo' restare sopra i 768px mentre lo
   spazio reale per il paginatore e' gia' sotto, e senza questo la pagina
   intera andava in overflow orizzontale (bug WCAG 1.4.4/1.4.10 trovato
   testando lo zoom al 200%). */
@container slideshow-area (max-width: 768px) {
    .slideshow-controlli {
        gap: 0.5rem;
    }

    .slideshow-controlli .btn {
        flex: 0 0 auto;
    }

    .testo-pulsante-slide {
        display: none;
    }

    .slideshow-indicatore {
        display: none;
    }

    .slideshow-contatore-mobile {
        display: inline-flex;
        align-items: center;
    }

    /* Il contatore in alto (.slideshow-pagina) diventa ridondante con quello
       compatto nel paginatore in basso su uno schermo gia' stretto. */
    .slideshow-pagina {
        display: none;
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Focus styles per navigazione tastiera */
.cartina-controlli .btn:focus-visible,
.indicatore-pallino:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Reduce motion per utenti con preferenza */
@media (prefers-reduced-motion: reduce) {
    .indicatore-pallino::after,
    .cartina-controlli .btn {
        transition: none;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .cartina-legenda,
    .cartina-tooltip,
    .cartina-controlli .btn {
        border-width: 2px;
        border-color: var(--bs-emphasis-color);
    }

    .indicatore-pallino.attivo::after {
        background-color: var(--bs-emphasis-color);
    }
}