/* Stile dell'area autisti (SPA). Gemello di public/css/panel.css per le classi condivise:
   la SPA non carica quel file, quindi .brand-chip, .brand-logo*, .btn-back, .mappa* e i
   badge sono duplicati di proposito.

   La SPA non ha aree, quindi un solo set di token, con gli stessi quattro ruoli di
   panel.css (superficie / testo sulla superficie / inchiostro / fondini): se il colore ha
   del testo sopra e' --panel-accent, se il colore E' il testo o il segno e' --panel-ink.
   Questo blocco e' l'unico punto del frontend in cui compaia un colore o un tema. */
body {
    --panel-navbar:       #043786;   /* blu del marchio, bianco sopra: 11.08:1 */
    --panel-accent:       #043786;
    --panel-accent-fg:    #fff;
    --panel-accent-hover: #032C6B;   /* 13.32:1 */
    --panel-ink:          #043786;   /* su bianco: 11.08:1 */
    --panel-ink-hover:    #2A5598;   /* su bianco:  7.37:1 */
    --bs-link-color:       var(--panel-ink);
    --bs-link-hover-color: var(--panel-ink-hover);
}
[data-bs-theme="dark"] body {
    /* Come in panel.css: la superficie deve fare >=3:1 contro il fondo (#043786 fa 1.39)
       e l'inchiostro >=4.5:1 anche dentro le card #2b3035 (dove #7591BC cadrebbe a 4.14). */
    --panel-accent:       #4F73AA;   /* bianco sopra 4.81:1; contro il fondo 3.21:1 */
    --panel-accent-hover: #7591BC;
    --panel-ink:          #9BAFCF;   /* 6.92:1 sul fondo, 5.98:1 nelle card */
    --panel-ink-hover:    #C0CDE1;   /* 9.59:1 */
}

/* Bootstrap definisce --bs-box-shadow* solo nel tema chiaro: senza queste tre righe in
   dark ogni .shadow-sm sparisce. Nessun call site da toccare. */
[data-bs-theme="dark"] {
    --bs-box-shadow-sm: 0 .125rem .25rem rgba(0,0,0,.45);
    --bs-box-shadow:    0 .5rem 1rem rgba(0,0,0,.55);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0,0,0,.6);
}

.btn-primary {
    --bs-btn-color: var(--panel-accent-fg);
    --bs-btn-bg: var(--panel-accent);
    --bs-btn-border-color: var(--panel-accent);
    --bs-btn-hover-color: var(--panel-accent-fg);
    --bs-btn-hover-bg: var(--panel-accent-hover);
    --bs-btn-hover-border-color: var(--panel-accent-hover);
    --bs-btn-active-color: var(--panel-accent-fg);
    --bs-btn-active-bg: var(--panel-accent-hover);
    --bs-btn-active-border-color: var(--panel-accent-hover);
    --bs-btn-disabled-color: var(--panel-accent-fg);
    --bs-btn-disabled-bg: var(--panel-accent);
    --bs-btn-disabled-border-color: var(--panel-accent);
}

/* Bootstrap colora <a> col triplet --bs-link-color-rgb: la variabile sopra da sola non
   basterebbe. */
a       { color: var(--panel-ink); }
a:hover { color: var(--panel-ink-hover); }

.lang-flag { cursor: pointer; font-size: 1.6rem; display: inline-block; padding: .1rem .3rem; }
.lang-flag.lang-active { opacity: .3; pointer-events: none; }

/* Selettore tema, gemello di panel.css (markup in src/tema.php). */
.tema-scelta { display: inline-flex; gap: .1rem; }
.tema-btn { background: none; border: 0; padding: .15rem .35rem; line-height: 0; color: inherit; cursor: pointer; }
.tema-btn svg { width: 1.15rem; height: 1.15rem; display: block; }
.tema-btn:disabled { opacity: .3; cursor: default; }

.card-home { cursor: pointer; transition: transform .08s ease, box-shadow .08s ease; }
.card-home:hover { transform: translateY(-2px); box-shadow: var(--bs-box-shadow) !important; }
.card-home .card-body { min-height: 88px; color: var(--bs-body-color); }
/* --bs-secondary e' un grigio fisso nei due temi; --bs-secondary-color si inverte. */
.card-home-icon { width: 2rem; height: 2rem; color: var(--bs-secondary-color); opacity: .85; }

.btn-back::before { content: "\2190"; margin-right: .45em; font-weight: 600; }

/* Barra in alto: e' una superficie di brand in entrambi i temi, gemella di .navbar-panel.
   Non si usa .bg-dark, che vale #212529 - cioe' ESATTAMENTE --bs-body-bg del tema scuro:
   barra e pagina diventerebbero lo stesso pixel. */
.navbar-brandbar { background-color: var(--panel-navbar) !important; }

/* Logo nel chip bianco (barra scura) e versione grande sulla card di login. Il chip resta
   bianco anche in dark: il segno vuole fondo chiaro (docs/DECISIONI.md). La versione grande
   invece NON prende nessuna piastra - verificato che sul fondo scuro regge da sola, mentre
   un riquadro bianco a 180px sarebbe la cosa piu' luminosa di una schermata di login. */
.brand-chip { display: inline-flex; align-items: center; background: #fff; border-radius: 6px; padding: 3px 7px; line-height: 0; }
.brand-logo { height: 50px; width: auto; display: block; }
.brand-logo-card { width: 180px; max-width: 70%; height: auto; }

/* Gemella di panel.css: sostituisce .text-bg-light, che non si inverte. */
.text-bg-neutral { color: var(--bs-body-color) !important; background-color: var(--bs-secondary-bg) !important; }

/* Quiet zone del QR TOTP, gemella di panel.css: qrcode.js non lascia margine attorno ai
   moduli e su fondo scuro diversi lettori falliscono. Vale in entrambi i temi. */
#totp-qr img, #totp-qr canvas { background: #fff; padding: 12px; border-radius: 6px; }

/* === MAPPE (Leaflet self-hosted) ===
   Gemelle delle classi in panel.css: la SPA non carica quel file. L'altezza esplicita non e'
   decorativa - Leaflet misura il contenitore e un div alto 0 non disegna niente. */
.mappa { height: 300px; border-radius: .375rem; z-index: 0; }
.mappa-pin svg { display: block; color: var(--panel-ink); filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
/* Tile chiari dentro una UI scura: inversione piu' rotazione di tinta (senza hue-rotate
   l'acqua diventerebbe arancione). Sul pane, cosi' spilli e attribuzione restano intatti. */
[data-bs-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.92) saturate(.85); }
[data-bs-theme="dark"] .leaflet-container { background: var(--bs-tertiary-bg); }

/* Bottoni "Come arrivare": icona + parola sulla stessa riga, l'icona non si deforma quando
   il bottone si stringe (flex: 0 0 auto). */
.btn-naviga { display: inline-flex; align-items: center; gap: .3rem; }
.btn-naviga svg { width: 14px; height: 14px; flex: 0 0 auto; }