/* ══ Look moderno e minimale — SOLO stile (nessun id/struttura/callback toccati) ══
   Caricato per ultimo (zz-). Scala tipografica con minimo leggibile + superfici pulite. */

:root {
  --mz-radius: 14px;
  --mz-radius-sm: 10px;
  --mz-line: rgba(128, 128, 128, 0.22);
  --mz-font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "Twemoji Mozilla";
}

/* ── Tipografia: base 16px, nessun testo sotto i 14px ───────────────────────── */
html { font-size: 17px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--mz-font);
  font-size: 1rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1:not(.st-page *), h2:not(.st-page *), h3:not(.st-page *), h4:not(.st-page *), h5:not(.st-page *), h6:not(.st-page *) { font-family: var(--mz-font); letter-spacing: -0.015em; line-height: 1.25; font-weight: 700; }
h4:not(.st-page *) { font-size: 1.5rem; } h5:not(.st-page *) { font-size: 1.25rem; } h6:not(.st-page *) { font-size: 1.05rem; }
small:not(.st-page *),
.small:not(.st-page *),
.text-muted:not(.st-page *),
.form-text:not(.st-page *),
label:not(.st-page *),
.form-label:not(.st-page *),
.badge:not(.st-page *),
caption:not(.st-page *),
.nav-link:not(.st-page *),
.dropdown-item:not(.st-page *),
.btn:not(.st-page *),
.btn-sm:not(.st-page *),
td:not(.st-page *),
th:not(.st-page *),
.table:not(.st-page *),
.list-group-item:not(.st-page *),
.tooltip-inner:not(.st-page *),
.popover-body:not(.st-page *),
.leaflet-popup-content:not(.st-page *),
.leaflet-tooltip:not(.st-page *) {
  font-size: max(0.9rem, 15px);
}
small:not(.st-page *), .small:not(.st-page *) { font-size: 0.9rem !important; }
.text-muted { opacity: 1; color: var(--bs-secondary-color) !important; }
label, .form-label { font-weight: 600; }

/* testi inline minuscoli (px/rem) ovunque nel sito */
[style*="font-size: 8px"]:not(.st-page *),
[style*="font-size: 9px"]:not(.st-page *),
[style*="font-size: 10px"]:not(.st-page *),
[style*="font-size: 11px"]:not(.st-page *),
[style*="font-size: 12px"]:not(.st-page *),
[style*="font-size: 13px"]:not(.st-page *),
[style*="font-size: 0.6rem"]:not(.st-page *),
[style*="font-size: 0.65rem"]:not(.st-page *),
[style*="font-size: 0.7rem"]:not(.st-page *),
[style*="font-size: 0.75rem"]:not(.st-page *),
[style*="font-size: 0.78rem"]:not(.st-page *),
[style*="font-size: 0.8rem"]:not(.st-page *) {
  font-size: 14px !important;
}
[style*="font-size: 8px"] *, [style*="font-size: 9px"] *, [style*="font-size: 10px"] *,
[style*="font-size: 11px"] *, [style*="font-size: 12px"] * { font-size: inherit; }

/* grafici Plotly e mappe: etichette leggibili */
.js-plotly-plot:not(.st-graph *) .xtick text, .js-plotly-plot .ytick text, .js-plotly-plot .legendtext,
.js-plotly-plot .g-xtitle text, .js-plotly-plot .g-ytitle text { font-size: 13px !important; }
.leaflet-container { font-family: var(--mz-font); font-size: 14px; }
.leaflet-control-attribution { font-size: 12px !important; }

/* ── Superfici: piatte, bordo sottile, raggio ampio, niente ombre pesanti ───── */
.card, .modal-content, .dropdown-menu, .popover, .list-group, .accordion-item, .alert,
.toast, .offcanvas { border-radius: var(--mz-radius) !important; }
.card, .alert, .toast { border: 1px solid var(--mz-line) !important; box-shadow: none !important; }
.card-header { background: transparent !important; border-bottom: 1px solid var(--mz-line); font-weight: 600; }
.modal-content, .dropdown-menu, .popover { border: 1px solid var(--mz-line) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22) !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }
hr { opacity: 1; border-color: var(--mz-line); }

/* ── Controlli ───────────────────────────────────────────────────────────────── */
.btn { border-radius: var(--mz-radius-sm); font-weight: 600; letter-spacing: 0; padding: 0.5rem 1rem;
  transition: background-color .15s ease, border-color .15s ease, transform .12s ease; }
.btn-sm { padding: 0.4rem 0.8rem; }
.btn:not(:disabled):hover { transform: translateY(-1px); }
.btn-group > .btn, .btn-group-vertical > .btn { border-radius: 0; transform: none; }
.btn-group > .btn:first-child { border-radius: var(--mz-radius-sm) 0 0 var(--mz-radius-sm); }
.btn-group > .btn:last-child  { border-radius: 0 var(--mz-radius-sm) var(--mz-radius-sm) 0; }
.form-control, .form-select, .Select-control, .dash-dropdown, .dash-input {
  border-radius: var(--mz-radius-sm) !important; font-size: 1rem; min-height: 40px; }
.form-control:focus, .form-select:focus { box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.25) !important; }
.badge { border-radius: 999px; font-weight: 600; padding: 0.4em 0.8em; letter-spacing: 0; }

/* ── Tab minimali (sottolineatura) ───────────────────────────────────────────── */
.nav-tabs { border-bottom: 1px solid var(--mz-line); gap: 4px; }
.nav-tabs .nav-link { border: 0 !important; border-bottom: 2px solid transparent !important;
  border-radius: 0 !important; background: transparent !important; padding: 0.7rem 1.1rem; font-weight: 600;
  opacity: 0.75; }
.nav-tabs .nav-link:hover { opacity: 1; }
.nav-tabs .nav-link.active { opacity: 1; border-bottom-color: #3498db !important; }

/* ── Navbar, tabelle, scrollbar ─────────────────────────────────────────────── */
.navbar { border-bottom: 1px solid var(--mz-line); box-shadow: none !important; }
.navbar .nav-link { font-size: 0.95rem; font-weight: 600; }
.table > :not(caption) > * > * { padding: 0.7rem 0.9rem; border-color: var(--mz-line); }
.table thead th { font-weight: 700; text-transform: none; letter-spacing: 0; }
* { scrollbar-width: thin; scrollbar-color: rgba(128, 128, 128, 0.45) transparent; }

/* ── Spazio e contenuto: respiro generoso ───────────────────────────────────── */
.container, .container-fluid { max-width: 1680px; }
p:not(.st-page *) { margin-bottom: 0.9rem; }
@media (max-width: 576px) { body { font-size: 1rem; } .btn { padding: 0.55rem 1rem; } }

/* ── Barra informativa località (city-note) ─────────────────────────────────── */
.city-note { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 20px; border-bottom: 1px solid var(--mz-line); }
.city-note-place { font-size: 1.05rem; font-weight: 700; white-space: nowrap;
  padding: 4px 14px; border-radius: 999px; background: rgba(52, 152, 219, 0.16); }
.city-note-text { font-size: 1rem; line-height: 1.5; color: var(--bs-secondary-color); flex: 1 1 420px; }

/* ══ Scala tipografica coerente: tutto entra a zoom 100% ═══════════════════════
   I token originali (fino a 3.6rem) facevano uscire navbar e pagine dallo schermo. */
:root {
  --font-size-secondary: 1.1rem;
  --font-size-primary: 1.25rem;
  --font-size-highlight: 1.45rem;
  --font-size-title: 1.9rem;
  --font-size-display: 2.9rem;
  --font-size-critical: 2.7rem;
  --font-size-icon: 2.3rem;
  --nav-action-icon-size: 22px;
}
@media (max-width: 992px) { :root { --font-size-display: 2.5rem; --font-size-critical: 2.4rem; } }

#main-navbar.app-navbar { min-height: 72px; padding: 0.6rem 1.4rem !important; }
#main-navbar .container, #main-navbar .container-fluid { gap: 12px; flex-wrap: wrap; }
#main-navbar .navbar-brand { font-size: 1.5rem; gap: 12px; margin-right: 0.5rem; }
#main-navbar .navbar-brand::before { height: 30px; width: 6px; }
#main-navbar .navbar-nav { gap: 4px; flex-wrap: wrap; }
#main-navbar .nav-link, #main-navbar .dropdown-toggle {
  min-height: 46px; padding: 0.45rem 0.95rem !important; font-size: 1.15rem; font-weight: 600; }
#main-navbar .dropdown-item { font-size: 1.1rem; }
#main-navbar .navbar-partner-logo { height: 32px; }
@media (max-width: 992px) { #main-navbar.app-navbar { min-height: 60px; padding: 0.45rem 0.9rem !important; } }

/* ══ Pagine regione: identita' distinte (solo layout/stile) ════════════════════
   Rischio sismico = "mappa in primo piano" (rosso): KPI a fascia, mappa a tutta larghezza,
   grafici in fila, metodologia a schede in fondo.
   Retrofit = "banco di lavoro" (verde): strumenti fissi a sinistra, vista di lavoro a destra. */
.pg-seismic { --pg-accent: #e74c3c; }
.pg-retrofit { --pg-accent: #2ecc71; }
.pg-head { display: flex; align-items: center; gap: 14px; margin: 6px 0 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--mz-line); }
.pg-head::before { content: ""; width: 6px; height: 34px; border-radius: 6px; background: var(--pg-bar, #3498db); }
.pg-head h4 { font-size: 1.7rem; letter-spacing: -0.02em; }
.pg-head-seismic  { --pg-bar: #e74c3c; }
.pg-head-retrofit { --pg-bar: #2ecc71; }

.pg-panel { border: 1px solid var(--mz-line); border-radius: var(--mz-radius); padding: 10px; min-width: 0;
  background: rgba(128, 128, 128, 0.05); }
.pg-chart { height: 380px; }
.pg-chart .js-plotly-plot, .pg-chart .dash-graph { height: 100% !important; }
.pg-map-panel .leaflet-container { border-radius: 10px; }

/* KPI */
.pg-kpis .kpi-card-modern { border-radius: var(--mz-radius); border: 1px solid var(--mz-line); box-shadow: none;
  border-top-width: 4px; height: 100%; }
.pg-seismic .pg-kpis .kpi-value { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.02em; }
.pg-retrofit .pg-kpis .kpi-value { font-size: 1.7rem; font-weight: 800; }
.pg-retrofit .pg-kpis .kpi-card-modern { border-top-width: 1px; border-left: 4px solid var(--pg-accent); padding-top: 10px; padding-bottom: 10px; }

/* Rischio sismico: mappa a tutta larghezza, alta */
.pg-seismic .pg-map-hero { height: 66vh; min-height: 480px; }
.pg-seismic .pg-map-hero > .leaflet-container { height: 100% !important; }
.pg-seismic .pg-method .tools-panel { height: auto !important; overflow: visible !important; padding: 18px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px 16px; }
.pg-seismic .pg-method .tools-panel > .panel-section-label { grid-column: 1 / -1; }
.pg-seismic .pg-method .tool-info-card { margin: 0; }

/* Retrofit: barra strumenti fissa a sinistra, mappa media */
.pg-retrofit .pg-map-panel .leaflet-container { height: 58vh !important; min-height: 420px; }
@media (min-width: 992px) {
  .pg-sidebar { position: sticky; top: 84px; align-self: flex-start; }
  .pg-sidebar .tools-panel { height: auto !important; max-height: calc(100vh - 110px); overflow-y: auto; }
}
.pg-retrofit .pg-sidebar .tools-panel { border-left: 4px solid var(--pg-accent); }
.pg-retrofit .pg-sidebar .tool-info-card { border-radius: 8px; }

/* Numeri KPI (perdite, milioni, ecc.): dimensioni contenute, mai a capo */
.kpi-value, .pg-seismic .pg-kpis .kpi-value, .pg-retrofit .pg-kpis .kpi-value {
  font-size: 1.6rem !important; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pg-retrofit .pg-kpis .kpi-value { font-size: 1.4rem !important; }
.kpi-label { font-size: 0.9rem !important; }
.kpi-sub { font-size: 0.85rem !important; }
.ev-kpi h3 { font-size: 1.5rem !important; }
@media (max-width: 576px) { .kpi-value, .pg-seismic .pg-kpis .kpi-value { font-size: 1.35rem !important; } }

/* Valori numerici dentro le card (città, quartiere, province...): contenuti ovunque */
.card h1, .card h2, .card h3, .card .h1, .card .h2, .card .h3 {
  font-size: 1.55rem !important; line-height: 1.2; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.card h6 { font-size: 0.95rem; }
:root { --font-size-display: 2rem; --font-size-critical: 1.9rem; --font-size-icon: 1.8rem; }
@media (max-width: 992px) { :root { --font-size-display: 1.8rem; --font-size-critical: 1.7rem; } }

/* ── Prestazioni: niente sfocature a schermo intero sopra mappe/WebGL/grafici ───
   backdrop-filter forza una nuova sfocatura a ogni ridisegno della mappa sottostante. */
#main-navbar.app-navbar, .evac-sim-panel, .gama-ai-studio-hero, .live-toolbar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.live-hud-chip, .live-legend { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(13, 17, 23, 0.84) !important; }
.evac-sim-panel { background: rgba(10, 15, 30, 0.6) !important; }
body[data-theme="light"] .evac-sim-panel { background: rgba(235, 245, 255, 0.85) !important; }
.card, .ev-panel, .pg-panel { transition: none; }

/* Emoji/simboli: stessa pila ovunque (anche in pulsanti, campi, mappe e popup) */
button, input, select, textarea, .btn, .leaflet-popup-content, .leaflet-tooltip, .Select, .dash-dropdown {
  font-family: var(--mz-font); }
.navbar-partner-logo { max-width: 150px !important; }

/* ── Colonne lunghe scrollabili: niente spazi vuoti ne' pagine infinite ─────────
   Retrofit quartiere/edifici: colonna destra (schede) e scheda edificio hanno altezza massima
   con scroll interno; le colonne non si stirano piu' alla piu' alta. */
.rfq-main-row { align-items: flex-start !important; }
.rfq-scroll .tab-content { max-height: 76vh; overflow-y: auto; padding-right: 6px; }
.rfq-scroll { position: sticky; top: 84px; }
.rfq-card-scroll { max-height: 34vh; overflow-y: auto; }
.rfq-scroll .tab-content::-webkit-scrollbar, .rfq-card-scroll::-webkit-scrollbar, .tools-panel::-webkit-scrollbar { width: 8px; }
/* pannelli strumenti (retrofit/rischio citta', provincia, quartiere): altezza massima + scroll */
.tools-panel { max-height: min(80vh, 780px); overflow-y: auto; }
.pg-seismic .pg-method .tools-panel { max-height: none; }
@media (max-width: 991px) {
  .rfq-scroll { position: static; }
  .rfq-scroll .tab-content { max-height: 60vh; }
  .tools-panel { max-height: 65vh; }
}

/* ══ Card selettore scala (Rischio/Retrofit/EVASIM): una sola colonna centrata ══
   icona al centro, sotto titolo e testo, sotto ancora l'etichetta colorata. */
.sc-panel { width: min(1120px, calc(100vw - 32px)); }
.sc-cards-container { flex-wrap: wrap; gap: 14px; }
.sc-card {
  flex: 1 1 230px; min-width: 0;
  flex-direction: column; align-items: center; text-align: center;
  gap: 10px; padding: 18px 16px 20px;
}
.sc-card > div { width: 100%; }
.sc-icon, .sc-card-accented .sc-icon { margin: 0 auto; flex: 0 0 auto; }
.sc-card .sc-icon { font-size: 2.6rem; }
.sc-title { margin: 0 0 6px; }
.sc-desc { margin: 0 auto; max-width: 34ch; }
.sc-badge { margin-top: 12px; }
.sc-arrow { display: none; }
/* l'accento diventa una riga in alto (al posto del bordo sinistro) */
.sc-card-accented { border-left: 1px solid rgba(255, 255, 255, 0.09); border-top: 3px solid var(--sc-accent, #3498db);
  padding-left: 16px; }
.sc-card-accented:hover { border-left-color: color-mix(in srgb, var(--sc-accent, #3498db) 55%, transparent); }
@media (max-width: 768px) { .sc-card { flex-basis: 100%; flex-direction: column; } }

/* icone card come immagini locali + testi mai tagliati */
.sc-icon-img { width: 2.6rem; height: 2.6rem; display: block; pointer-events: none; user-select: none; }
.sc-card-accented .sc-icon { width: 60px; height: 60px; }
.sc-title, .sc-desc { overflow-wrap: anywhere; }
.sc-badge { max-width: 100%; white-space: normal; text-align: center; }

/* Menu "Utilità": visibile solo agli admin (stessa classe body.is-admin del pannello gestione utenti,
   impostata da auth_ui.py). Nascosto di default, quindi niente lampeggio per gli altri utenti. */
body:not(.is-admin) .top-nav-menu { display: none !important; }

/* ══ Navbar su una sola riga (desktop) ═════════════════════════════════════════
   Quando compare il logo Sapienza (Caso d'uso/Retrofit) lo spazio tra i blocchi si riduce
   invece di mandare i link su una seconda riga. */
@media (min-width: 992px) {
  #main-navbar .container-fluid { flex-wrap: nowrap !important; }
  #main-navbar .navbar-collapse { flex: 1 1 auto !important; flex-basis: auto !important; min-width: 0; flex-wrap: nowrap; }
  #main-navbar .navbar-nav { flex-wrap: nowrap !important; gap: 2px; width: auto; flex: 1 1 auto; min-width: 0; }
  #main-navbar .nav-link, #main-navbar .dropdown-toggle { white-space: nowrap; padding: 0.4rem 0.7rem !important; font-size: 1.05rem; }
  #main-navbar .navbar-brand { flex: 0 0 auto; font-size: 1.35rem; }
  #main-navbar .navbar-partner-logos-item { margin-left: auto; flex: 0 1 auto; min-width: 0; }
  #main-navbar .navbar-partner-logos { gap: 8px; padding-left: 12px; margin-right: 8px; }
  .navbar-partner-logo { height: 28px; max-width: 100px !important; padding: 3px 6px; }
  /* con Sapienza visibile: tutto un po' piu' compatto */
  #main-navbar:has(#navbar-sapienza-link:not([style*="none"])) .nav-link,
  #main-navbar:has(#navbar-sapienza-link:not([style*="none"])) .dropdown-toggle { padding: 0.4rem 0.5rem !important; font-size: 1rem; }
  #main-navbar:has(#navbar-sapienza-link:not([style*="none"])) .navbar-nav { gap: 0; }
  #main-navbar:has(#navbar-sapienza-link:not([style*="none"])) .navbar-partner-logos { gap: 6px; padding-left: 8px; margin-right: 4px; }
  #main-navbar:has(#navbar-sapienza-link:not([style*="none"])) .navbar-brand { font-size: 1.25rem; }
}
/* Con le voci di menu in italiano (piu' lunghe) la riga non stava piu' nello schermo: pulsante impostazioni fuori
   vista tra 992 e ~1500 px. Tre livelli, verificati da 992 a 1920 px in italiano e inglese, anche con il logo Sapienza
   (tests/browser/site_crawl.py). I selettori `:has(...)` pareggiano la specificita' delle regole "con Sapienza" qui sopra. */
@media (min-width: 992px) and (max-width: 1499px) {
  #main-navbar .nav-link, #main-navbar .dropdown-toggle,
  #main-navbar:has(#navbar-sapienza-link:not([style*="none"])) .nav-link,
  #main-navbar:has(#navbar-sapienza-link:not([style*="none"])) .dropdown-toggle { font-size: 0.95rem; padding: 0.35rem 0.45rem !important; }
  #main-navbar .navbar-brand, #main-navbar:has(#navbar-sapienza-link:not([style*="none"])) .navbar-brand { font-size: 1.15rem; }
  #main-navbar.app-navbar { padding: 0.5rem 0.8rem !important; }
}
@media (min-width: 992px) and (max-width: 1399px) {
  #main-navbar .nav-link, #main-navbar .dropdown-toggle,
  #main-navbar:has(#navbar-sapienza-link:not([style*="none"])) .nav-link,
  #main-navbar:has(#navbar-sapienza-link:not([style*="none"])) .dropdown-toggle { font-size: 0.88rem; padding: 0.3rem 0.26rem !important; }
  #main-navbar .navbar-brand, #main-navbar:has(#navbar-sapienza-link:not([style*="none"])) .navbar-brand { font-size: 1rem; gap: 8px; }
  #main-navbar .navbar-brand::before { height: 24px; width: 5px; }
  #main-navbar .navbar-partner-logos, #main-navbar:has(#navbar-sapienza-link:not([style*="none"])) .navbar-partner-logos { gap: 4px; padding-left: 6px; margin-right: 2px; }
  .navbar-partner-logo { height: 22px; max-width: 64px !important; padding: 2px 4px; }
  /* pagine con il logo Sapienza: qui resta solo quello (il logo DISIM e' nel pie' di pagina) */
  #main-navbar:has(#navbar-sapienza-link:not([style*="none"])) .navbar-partner-logo-link:not(#navbar-sapienza-link) { display: none; }
}
@media (min-width: 992px) and (max-width: 1119px) {
  #main-navbar .nav-link, #main-navbar .dropdown-toggle,
  #main-navbar:has(#navbar-sapienza-link:not([style*="none"])) .nav-link,
  #main-navbar:has(#navbar-sapienza-link:not([style*="none"])) .dropdown-toggle { font-size: 0.8rem; padding: 0.25rem 0.22rem !important; }
  #main-navbar .navbar-nav, #main-navbar:has(#navbar-sapienza-link:not([style*="none"])) .navbar-nav { gap: 0; }
  #main-navbar .navbar-partner-logos { display: none; }
  #main-navbar .navbar-brand, #main-navbar:has(#navbar-sapienza-link:not([style*="none"])) .navbar-brand { font-size: 0.92rem; gap: 6px; }
  #main-navbar.app-navbar { padding: 0.5rem 0.5rem !important; }
}

/* ══ Smartphone / tablet ═══════════════════════════════════════════════════════
   Verificato con browser headless (390x844, 820x1180, 1280x720). */
html, body { max-width: 100%; overflow-x: clip; }
.row.g-4, .row.gx-4 { --bs-gutter-x: 1.2rem; }
.cmd-role-notice { white-space: normal !important; margin-left: 0 !important; }
@media (max-width: 576px) {
  #main-navbar .navbar-brand { font-size: 1.05rem; gap: 8px; white-space: nowrap; margin-right: 0; }
  #main-navbar .navbar-brand::before { height: 22px; width: 5px; }
  #main-navbar.app-navbar { padding: 0.4rem 0.7rem !important; }
  .kpi-value, .pg-seismic .pg-kpis .kpi-value, .pg-retrofit .pg-kpis .kpi-value { font-size: 1.1rem !important; white-space: normal; overflow-wrap: anywhere; }
  .card h1, .card h2, .card h3 { font-size: 1.25rem !important; }
  .ev-kpi h3 { font-size: 1.2rem !important; }
  .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .nav-tabs .nav-link { white-space: nowrap; padding: 0.6rem 0.8rem; }
  .pg-head h4 { font-size: 1.35rem; }
  .pg-chart, .ev-h, .ev-h-sm { height: 320px; }
  .toast { max-width: calc(100vw - 20px); }
}
.cmd-time-display { white-space: nowrap; flex: 0 0 auto; }
.cmd-header { flex-wrap: wrap; gap: 8px 16px; }
.cmd-header-left { min-width: 0; flex: 1 1 220px; }

/* Selettore di scala: mai piu' alto dello schermo (scroll interno), senza sfocatura di sfondo */
.sc-backdrop { backdrop-filter: none !important; background: rgba(8, 12, 22, 0.7); }
.sc-panel { max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior: contain; backdrop-filter: none !important; background: rgba(16, 22, 38, 0.97); }
@media (max-width: 991px) {
  .sc-panel { top: 68px; max-height: calc(100dvh - 80px); padding: 14px 14px 18px; }
  .sc-card { padding: 12px 12px 14px; gap: 6px; }
  .sc-card .sc-icon-img { width: 2.1rem; height: 2.1rem; }
  .sc-card-accented .sc-icon { width: 50px; height: 50px; }
  .sc-desc { font-size: 0.95rem; }
}

/* ── Popup mappa: leggibilita' su cellulare e tema chiaro ─────────────────────── */
/* Etichette grigio chiaro (#8f9bad, #7f8c8d...) inline: su sfondo chiaro hanno contrasto < 3:1 */
body[data-theme="light"] .leaflet-popup-content [style*="#8f9bad"],
body[data-theme="light"] .leaflet-popup-content [style*="#7f8c8d"],
body[data-theme="light"] .leaflet-popup-content [style*="#95a5a6"] { color: #4a5568 !important; }
.leaflet-popup-content { max-width: calc(100vw - 72px); overflow-wrap: anywhere; }
.leaflet-popup-content > div { max-width: 100% !important; box-sizing: border-box; }
/* Bottone di chiusura piu' grande da toccare */
.leaflet-container a.leaflet-popup-close-button { width: 32px; height: 32px; font-size: 22px; line-height: 32px; }
#ri-overlay-close-btn { min-width: 32px; min-height: 32px; color: rgba(255,255,255,0.75) !important; font-size: 1.1rem !important; }
@media (max-width: 576px) {
  .leaflet-popup-content { font-size: 14px; }
  .leaflet-popup-content summary { padding: 6px 0; }
}

/* KPI: il corpo del numero segue la larghezza della card (container query), cosi' importi lunghi
   come "€ 13.449 M" non escono piu' dal riquadro; ultima rete: "…" (il valore intero e' nel tooltip). */
.kpi-card-modern { container-type: inline-size; min-width: 0; }
.kpi-value, .pg-seismic .pg-kpis .kpi-value, .pg-retrofit .pg-kpis .kpi-value {
  font-size: clamp(0.95rem, 10.5cqi, 1.9rem) !important; white-space: nowrap !important;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.kpi-sub { overflow: hidden; text-overflow: ellipsis; }

/* Etichette KPI lunghe ("Edifici in danno esteso/completo"): vanno a capo anche senza spazi. */
.kpi-label { overflow-wrap: anywhere; min-width: 0; }

/* Footer con link legali */
.site-footer { padding: 14px 18px 22px; font-size: 0.82rem; opacity: 0.8; text-align: center; border-top: 1px solid rgba(128,128,128,0.25); margin-top: 24px; }
.site-footer a { color: inherit; text-decoration: underline; }
.legal-page .legal-table td, .legal-page .legal-table th { vertical-align: top; font-size: 0.9rem; }
.legal-page h5 { overflow-wrap: anywhere; }

/* ── Cellulare: aree tappabili e riquadri della simulazione ─────────────────────── */
/* link del footer e link di testo: area di tocco >= 32px senza cambiare l'aspetto */
@media (max-width: 768px) {
  .site-footer a { display: inline-block; padding: 8px 6px; }
  .legal-page a, .not-found a { display: inline-block; padding: 6px 0; }
}
/* gruppo dei livelli di zoom (Regione / Comuni / Zone / Edifici): va a capo invece di uscire dal contenitore */
.zoom-nav-group { flex-wrap: wrap; max-width: 100%; row-gap: 4px; }
.zoom-nav { max-width: 100%; }
/* riquadro live EVASIM: i 4 indicatori in griglia 2x2 compatta, senza suggerimento mouse (sul touch non serve) */
@media (max-width: 576px) {
  .live-stage .live-hud { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; top: 8px; left: 8px; right: 128px; }
  .live-stage .live-hud-chip { min-width: 0; padding: 4px 8px; }
  .live-stage .live-hud-label { font-size: 11px; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .live-stage .live-hud-value { font-size: 1rem; }
  .live-hint { display: none; }
  .live-stage .live-placeholder { padding: 0 16px; text-align: center; font-size: 1.1rem !important; }
}

/* EVASIM: su schermi stretti il pannello mappa+navigatore cresce col contenuto e la mappa non scende sotto 300px
   (altrimenti il navigatore dei livelli la schiaccia a ~100px e la scala copre i pulsanti di zoom) */
@media (max-width: 991px) {
  .ev-page .ev-h.ev-flex { height: auto; }
  .ev-page .ev-flex > .ev-fill { flex: 0 0 auto; height: 320px; min-height: 300px; }
}
.leaflet-bottom.leaflet-left .leaflet-control-scale { margin-bottom: 22px; }

/* IstatData: su schermi stretti mappa e grafici si impilano (prima restavano affiancati e i grafici uscivano a destra);
   la legenda dei livelli di rischio scende in basso a sinistra per non coprire i pulsanti di zoom */
@media (max-width: 768px) {
  .istat-split { flex-direction: column !important; }
  .istat-split > .istat-map-panel, .istat-split > .istat-graphs-panel { width: 100% !important; max-width: 100%; padding-left: 0 !important; }
  .istat-map-panel .leaflet-container { height: 62vh !important; min-height: 320px; }
  .istat-map-panel .istat-risk-legend { top: auto; bottom: 34px; right: 8px; padding: 6px 8px; }
  .istat-graphs-panel .js-plotly-plot { max-width: 100%; }
}

/* pulsante "Lancia EVASIM con questo scenario" delle simulazioni di pericolo: il testo va a capo invece di uscire dallo schermo */
.hydro-evasim .btn, .hydro-evasim-btn { white-space: normal; max-width: 100%; text-align: left; }

.city-note-change { margin-left: auto; cursor: pointer; font-weight: 600; font-size: .95rem;
  padding: 6px 16px; border-radius: 999px; border: 1px solid rgba(52, 152, 219, .6);
  background: rgba(52, 152, 219, .16); color: inherit; white-space: nowrap; }
.city-note-change:hover, .city-note-change:focus-visible { background: rgba(52, 152, 219, .32); outline: none; }