/* PARQO — Realizzato da Angelo Lacatena® (lacatenaangelo.it) */

@font-face { font-family: 'Poppins'; font-weight: 400; font-display: swap; src: url('fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-display: swap; src: url('fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url('fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-display: swap; src: url('fonts/poppins-700.woff2') format('woff2'); }

:root {
  --viola: #7b61ff;
  --viola-scuro: #6446f2;
  --viola-chiaro: #f1eeff;
  --viola-bordo: #d9d1ff;
  --sfondo: #f6f7fb;
  --carta: #ffffff;
  --testo: #1c1f2a;
  --tenue: #7a8093;
  --tenue-chiaro: #a3a8b8;
  --bordo: #eceef4;
  --giallo: #fff5d6;
  --giallo-bordo: #f3c74f;
  --rosso: #d63b3b;
  /* Colori delle serie (palette verificata per daltonismo) */
  --serie-da-pagare: #eb6834;
  --serie-pagata: #1baf7a;
  --serie-annullata: #2a78d6;
  /* Parcometri (palette verificata per daltonismo) */
  --parc-1: #7b61ff;
  --parc-2: #eb6834;
  --parc-3: #1baf7a;
  --parc-altri: #a3a8b8;
  /* Fonti di incasso (ordine fisso, palette verificata anche per i daltonici). */
  --fonte-multe: #7b61ff;
  --fonte-monete: #e0457b;
  --fonte-pos: #0e9f9a;
  --fonte-easypark: #d68a00;
  /* Testo degli stati (più scuro, per il contrasto) */
  --txt-da-pagare: #c4540f;
  --txt-pagata: #0f8a5f;
  --txt-annullata: #1f62b8;
  --ombra: 0 1px 2px rgba(28, 31, 42, .04), 0 4px 14px rgba(28, 31, 42, .04);
  --raggio: 14px;
  --lato: 240px;
  --lato-ridotto: 76px;
  --veloce: 180ms cubic-bezier(.2, .7, .2, 1);
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  color: var(--testo);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--sfondo); overflow: hidden; font-size: 14px; -webkit-font-smoothing: antialiased; }
/* Rete di sicurezza: la pagina non scorre MAI di lato (su Windows le barre verticali occupano spazio). */
html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
button, input, select { font: inherit; color: inherit; }
svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sprite { display: none; }
[hidden] { display: none !important; }
h1, h2 { margin: 0; font-weight: 600; }
h1 { font-size: 20px; letter-spacing: -.01em; }
h2 { font-size: 15px; }
.nota { color: var(--tenue); font-size: 12px; margin: 0; line-height: 1.5; }
.link { background: none; border: none; color: var(--viola); cursor: pointer; font-size: 13px; font-weight: 500; text-decoration: none; padding: 2px 4px; border-radius: 6px; }
.link:hover { background: var(--viola-chiaro); }

/* ---------- Cornice a tutto schermo ---------- */
.app { display: grid; grid-template-columns: var(--lato) 1fr; height: 100vh; height: 100dvh; width: 100%; max-width: 100%; transition: grid-template-columns var(--veloce); }
.app.ridotta { grid-template-columns: var(--lato-ridotto) 1fr; }

.lato { background: var(--carta); border-right: 1px solid var(--bordo); display: flex; flex-direction: column; padding: 20px 14px; min-height: 0; overflow: hidden; }
.lato-testa { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 26px; }
.marchio { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marchio img { border-radius: 9px; flex: none; }
.marchio-nome { font-weight: 700; font-size: 18px; letter-spacing: -.01em; line-height: 1.15; white-space: nowrap; }
.menu { display: flex; flex-direction: column; gap: 4px; }
.gruppo { font-size: 11px; color: var(--tenue); margin: 14px 10px 6px; white-space: nowrap; }
.gruppo:first-child { margin-top: 0; }
.voce { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--testo); text-decoration: none; font-weight: 500; white-space: nowrap; position: relative; transition: background var(--veloce), color var(--veloce), transform var(--veloce); }
.voce:hover { background: var(--sfondo); }
.voce.attiva { background: var(--viola); color: #fff; box-shadow: 0 6px 16px rgba(123, 97, 255, .28); }
.contatore { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 600; background: var(--viola-chiaro); color: var(--viola-scuro); padding: 1px 8px; border-radius: 999px; }
.contatore.giallo { background: var(--giallo); color: #8a6100; }
.voce.attiva .contatore { background: rgba(255, 255, 255, .22); color: #fff; }
.lato-piede { margin-top: auto; border-top: 1px solid var(--bordo); padding-top: 14px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--tenue); white-space: nowrap; overflow: hidden; }
.piede-riga { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tema { flex: none; }
.firma { display: flex; flex-direction: column; color: var(--tenue); text-decoration: none; padding: 6px 10px; border-radius: 10px; transition: background var(--veloce); }
.firma strong { color: var(--testo); font-weight: 600; }
.firma:hover { background: var(--viola-chiaro); }
.copyright { padding: 0 10px; font-size: 11px; color: var(--tenue-chiaro); }

/* Menu ridotto: solo icone */
.app.ridotta .marchio-nome, .app.ridotta .voce span, .app.ridotta .gruppo, .app.ridotta .firma, .app.ridotta .copyright, .app.ridotta .contatore { display: none; }
.app.ridotta .piede-riga { justify-content: center; }
.app.ridotta .lato-testa { flex-direction: column; }
.app.ridotta .voce { justify-content: center; padding: 11px; }
.app.ridotta .chiudi-lato svg { transform: scaleX(-1); }

.principale { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.barra { height: 68px; flex: none; display: flex; align-items: center; gap: 16px; padding: 0 28px; background: var(--carta); border-bottom: 1px solid var(--bordo); }
.ricerca { flex: 1; max-width: 420px; display: flex; align-items: center; gap: 10px; background: var(--sfondo); border: 1px solid transparent; border-radius: 12px; padding: 0 14px; height: 42px; color: var(--tenue); transition: border-color var(--veloce), background var(--veloce); }
.ricerca:focus-within { border-color: var(--viola-bordo); background: #fff; }
.ricerca input { border: none; background: none; outline: none; flex: 1; min-width: 0; color: var(--testo); }
.barra-destra { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.icona-btn { position: relative; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--bordo); background: var(--carta); display: grid; place-items: center; cursor: pointer; color: var(--testo); transition: background var(--veloce), border-color var(--veloce); }
.icona-btn:hover { background: var(--sfondo); border-color: #dfe2ea; }
.icona-btn.piccolo { width: 28px; height: 28px; border: none; }
.pallino { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--rosso); color: #fff; font-size: 10px; font-weight: 600; display: grid; place-items: center; border: 2px solid #fff; }
.profilo { display: flex; align-items: center; gap: 10px; padding-left: 12px; border-left: 1px solid var(--bordo); }
.profilo img { border-radius: 50%; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--viola-chiaro); color: var(--viola-scuro); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.profilo div { display: flex; flex-direction: column; line-height: 1.25; }
.profilo strong { font-size: 13px; font-weight: 600; }
.profilo span { font-size: 11px; color: var(--tenue); }
.apri-menu { display: none; }

.contenuto { flex: 1; min-height: 0; min-width: 0; padding: 22px 28px; overflow: hidden; }
.vista { height: 100%; display: flex; flex-direction: column; gap: 16px; min-height: 0; animation: entra 260ms cubic-bezier(.2, .7, .2, 1); }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.vista-testa { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex: none; }
.azioni { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

.btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; border: 1px solid transparent; white-space: nowrap; transition: background var(--veloce), border-color var(--veloce), transform var(--veloce), box-shadow var(--veloce); }
.btn:active { transform: translateY(1px); }
.btn.primario { background: var(--viola); color: #fff; box-shadow: 0 6px 16px rgba(123, 97, 255, .25); }
.btn.primario:hover { background: var(--viola-scuro); box-shadow: 0 8px 20px rgba(123, 97, 255, .32); }
.btn.contorno { background: var(--carta); color: var(--viola); border-color: var(--viola-bordo); }
.btn.contorno:hover { background: var(--viola-chiaro); }
.btn.pericolo { color: var(--rosso); border-color: #f2c9c9; }
.btn.pericolo:hover { background: #fdf0f0; }
.filtro { height: 38px; border: 1px solid var(--bordo); background: var(--carta); border-radius: 10px; padding: 0 12px; cursor: pointer; color: var(--testo); }

.card { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 18px 20px; min-height: 0; }
.card-testa { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; }
.card-testa.separata { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bordo); }

/* ---------- Dashboard ---------- */
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; flex: none; }
.hero-card { border-radius: var(--raggio); padding: 20px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--bordo); box-shadow: var(--ombra); position: relative; overflow: hidden; }
.hero-card.verde { background: radial-gradient(120% 140% at 0% 0%, #e3f7ec 0%, #f6fcf8 55%, #ffffff 100%); }
.hero-card.viola { background: radial-gradient(120% 140% at 100% 0%, #ece7ff 0%, #f8f6ff 55%, #ffffff 100%); }
.hero-etichetta { display: flex; align-items: center; gap: 8px; color: var(--testo); font-weight: 500; }
a.hero-card { color: inherit; text-decoration: none; }
.hero-card.cliccabile { cursor: pointer; transition: box-shadow var(--veloce), transform var(--veloce); }
.hero-card.cliccabile:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(28, 31, 42, .08); }
.hero-sotto { font-size: 12px; color: var(--tenue); text-align: center; }
.hero-sotto:empty { display: none; }
.variazione { font-weight: 600; font-variant-numeric: tabular-nums; }
.variazione.su { color: #12805a; }
.variazione.giu { color: #c2410c; }
.variazione.neutra { color: var(--tenue); font-weight: 500; }
.nota-grafico { font-size: 11px; color: var(--tenue); margin: 6px 0 0; }
.tabella.compatta { font-size: 12px; }
.tabella.compatta td, .tabella.compatta th { padding-left: 8px; padding-right: 8px; }
.hero-valore { font-size: clamp(30px, 4.2vh, 44px); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.bollo { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-style: normal; flex: none; }
.bollo svg { width: 15px; height: 15px; }
.bollo.verde { background: var(--serie-pagata); }
.bollo.viola { background: var(--viola); }
.bollo.grande { width: 48px; height: 48px; }
.bollo.grande svg { width: 22px; height: 22px; }

.kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); flex: none; }
.tile { padding: 14px 18px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; position: relative; }
.tile + .tile::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: var(--bordo); }
.tile-etichetta { font-size: 13px; color: var(--tenue); display: flex; align-items: center; gap: 7px; }
.tile-etichetta svg { width: 16px; height: 16px; }
.tile-valore { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tile-sotto { font-size: 11px; color: var(--tenue); }
.tile.cliccabile { cursor: pointer; border-radius: var(--raggio); transition: background var(--veloce); }
.tile.cliccabile:hover { background: var(--sfondo); }

.dash-griglia { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 16px; }
.grafico-card { display: flex; flex-direction: column; }
.grafico-area { flex: 1; min-height: 140px; position: relative; }
.colonna-destra { display: flex; flex-direction: column; }
.legenda-serie { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--testo); }
.legenda-serie.verticale { flex-direction: column; gap: 8px; margin-bottom: 12px; }
.voce-legenda { display: inline-flex; align-items: center; gap: 7px; }
.voce-legenda b { font-weight: 600; margin-left: auto; padding-left: 12px; }
.legenda-serie.verticale .voce-legenda { display: flex; }
.quadratino { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.quota-svg { display: block; width: 100%; height: 12px; }
.ultime { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 60px; }
.ultime li { display: flex; align-items: center; gap: 12px; padding: 9px 6px; border-radius: 10px; cursor: pointer; transition: background var(--veloce); }
.ultime li:hover { background: var(--sfondo); }
.ultime .icona-auto { width: 34px; height: 34px; border-radius: 10px; background: var(--viola-chiaro); color: var(--viola); display: grid; place-items: center; flex: none; }
.ultime .testo { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.ultime .testo strong { font-weight: 600; font-size: 13px; }
.ultime .testo span { font-size: 11px; color: var(--tenue); }

.giorni-svg { display: block; width: 100%; height: 100%; }
.giorni-svg .griglia { stroke: #f0f1f5; stroke-width: 1; }
.giorni-svg .asse { stroke: #d9dce5; stroke-width: 1; }
.giorni-svg .tacca { font-size: 11px; fill: var(--tenue); font-family: inherit; stroke: none; }
.giorni-svg .valore-colonna { font-size: 11px; font-weight: 600; fill: var(--testo); font-family: inherit; stroke: none; }
.giorni-svg rect { stroke: none; }
.giorni-svg .colonna { transform-box: fill-box; transform-origin: bottom; animation: cresce 520ms cubic-bezier(.2, .7, .2, 1) both; }
.giorni-svg.fermo .colonna { animation: none; }
@keyframes cresce { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.area-colonna { fill: transparent; }
.area-colonna:hover { fill: rgba(123, 97, 255, .06); }
.quota-svg rect { stroke: none; }

/* ---------- Stati ---------- */
.stato { appearance: none; -webkit-appearance: none; border: 1px solid transparent; border-radius: 999px; padding: 4px 26px 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer; background-repeat: no-repeat; background-position: right 9px center; background-size: 10px; transition: filter var(--veloce); }
.stato:hover { filter: brightness(.97); }
.stato.da-pagare { background-color: #fff1e8; color: var(--txt-da-pagare); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23c4540f' stroke-width='1.6'/%3E%3C/svg%3E"); }
.stato.pagata { background-color: #e6f7ef; color: var(--txt-pagata); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230f8a5f' stroke-width='1.6'/%3E%3C/svg%3E"); }
.stato.annullata { background-color: #e7effb; color: var(--txt-annullata); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231f62b8' stroke-width='1.6'/%3E%3C/svg%3E"); }
.etichetta-stato { font-size: 12px; font-weight: 600; }
.etichetta-stato.da-pagare { color: var(--txt-da-pagare); }
.etichetta-stato.pagata { color: var(--txt-pagata); }
.etichetta-stato.annullata { color: var(--txt-annullata); }
.etichetta-stato.attesa { color: #8a6100; }

/* ---------- Tabelle ---------- */
.tabella-card { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 6px 8px 0; }
.tabella-card > .card-testa { padding: 12px 12px 0; }
/* Una scheda per operatore: ognuno ha la sua tabella. */
.schede { display: flex; flex-wrap: wrap; gap: 0 4px; padding: 6px 8px 0; border-bottom: 1px solid var(--bordo); flex: none; }
.scheda { border: none; background: none; padding: 10px 14px 11px; font: inherit; font-size: 13px; font-weight: 500; color: var(--tenue); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; transition: color var(--veloce), border-color var(--veloce); }
.scheda:hover { color: var(--testo); }
.scheda.attiva { color: var(--viola-scuro); border-bottom-color: var(--viola); font-weight: 600; }
.scheda .matricola { font-size: 11px; color: var(--tenue-chiaro); font-weight: 500; }
.scheda .conta { background: #f1f2f6; border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 600; color: var(--tenue); }
.scheda.attiva .conta { background: var(--viola-chiaro); color: var(--viola-scuro); }
.scheda.da-assegnare .conta { background: var(--giallo); color: var(--testo); }
.scelta-parcheggio { max-width: 280px; font-weight: 600; color: var(--viola-scuro); border-color: var(--viola-bordo); background: var(--viola-chiaro); }
.parcheggi-elenco { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; flex: none; }
.parcheggio-card { display: flex; flex-direction: column; gap: 8px; }
.parcheggio-card.scelto { border-color: var(--viola-bordo); box-shadow: 0 0 0 2px var(--viola-chiaro), var(--ombra); }
.parcheggio-card h2 { font-size: 15px; }
.parcheggio-card .dettagli { font-size: 12px; color: var(--tenue); display: flex; flex-direction: column; gap: 2px; }
.parcheggio-card .numeri { display: flex; gap: 14px; font-size: 12px; color: var(--tenue); }
.parcheggio-card .numeri strong { color: var(--testo); font-size: 15px; display: block; }
.pill-multe { align-self: flex-start; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: #e7effb; color: var(--txt-annullata); }
.pill-multe.no { background: #f1f2f6; color: var(--tenue); }
.report-file li { cursor: default; }
.utenti-griglia.parcheggi-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.azioni-riga.orizzontale { flex-direction: row; gap: 14px; margin-top: auto; }
.form-corpo textarea { border: 1px solid var(--bordo); border-radius: 10px; padding: 8px 12px; background: var(--sfondo); color: var(--testo); font: inherit; font-size: 14px; resize: vertical; }
.form-corpo label.spunta { flex-direction: row; align-items: center; gap: 8px; color: var(--testo); font-size: 13px; }
.form-corpo label.spunta input { width: 18px; height: 18px; accent-color: var(--viola); }
.schede-vista { background: none; border-bottom: 1px solid var(--bordo); padding: 0; margin-top: -6px; }
.sotto-vista { display: flex; flex-direction: column; gap: 16px; flex: 1; min-height: 0; }
.conta.giallo { background: var(--giallo); color: #8a6100; }
.avviso-tid { display: flex; flex-direction: column; gap: 10px; background: var(--giallo); border: 1px solid var(--giallo-bordo); border-radius: var(--raggio); padding: 14px 18px; flex: none; }
.avviso-tid .riga-tid { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.avviso-tid strong { font-variant-numeric: tabular-nums; }
.operatore-box { margin-top: 4px; }
.operatore-box select { font: inherit; font-size: 12px; border: 1px solid var(--bordo); border-radius: 8px; padding: 4px 6px; background: #fff; max-width: 170px; }
.operatore-box.verifica select { background: var(--giallo); border-color: var(--giallo-bordo); }
.etichetta-operatore { font-size: 11px; font-weight: 600; color: var(--tenue); }
.ritaglio.operatore { max-width: 220px; height: 36px; }
.scorri { flex: 1; min-height: 0; overflow: auto; }
.tabella { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.tabella th { position: sticky; top: 0; z-index: 2; background: var(--carta); text-align: left; font-size: 11px; font-weight: 500; color: var(--tenue); padding: 12px 14px; border-bottom: 1px solid var(--bordo); white-space: nowrap; }
.tabella td { padding: 10px 14px; border-bottom: 1px solid #f3f4f8; vertical-align: middle; }
.tabella tbody tr { transition: background var(--veloce); }
.tabella tbody tr:hover { background: #faf9ff; }
.tabella tbody tr:last-child td { border-bottom: none; }
.stretta { width: 1%; white-space: nowrap; }
.tabella-piede { display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; font-size: 12px; color: var(--tenue); padding: 10px 14px; border-top: 1px solid var(--bordo); flex: none; }
.legenda-verifica { display: inline-flex; align-items: center; gap: 6px; }
.punto-giallo { width: 10px; height: 10px; border-radius: 3px; background: var(--giallo); border: 1px solid var(--giallo-bordo); display: inline-block; }
.vuoto { text-align: center; color: var(--tenue); padding: 40px 16px; margin: 0; }

.avviso { white-space: nowrap; }
.etichetta-avviso { font-weight: 600; font-size: 12px; color: var(--tenue); }
.campo { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; max-width: 240px; }
.campo input { border: 1px solid transparent; border-radius: 8px; background: transparent; padding: 5px 8px; width: 132px; font-variant-numeric: tabular-nums; transition: border-color var(--veloce), background var(--veloce); }
.campo input.targa { text-transform: uppercase; letter-spacing: .05em; font-weight: 600; width: 112px; }
.campo input.numero { width: 58px; font-weight: 700; font-size: 15px; }
.campo input:hover { border-color: var(--bordo); background: #fff; }
.campo input:focus { outline: none; border-color: var(--viola); background: #fff; box-shadow: 0 0 0 3px var(--viola-chiaro); }
.campo.verifica input { background: var(--giallo); border-color: var(--giallo-bordo); }
.campo::after { content: ''; flex-basis: 100%; order: 2; height: 0; }
.ritaglio { flex: 0 1 auto; width: auto; order: 3; height: 32px; max-width: 190px; object-fit: contain; object-position: left; border-radius: 6px; border: 1px solid var(--bordo); cursor: zoom-in; transition: transform var(--veloce), box-shadow var(--veloce); }
.ritaglio:hover { transform: scale(1.04); box-shadow: var(--ombra); }
.avviso .campo { max-width: 190px; }
.avviso .ritaglio { max-width: 150px; }
.conferma { display: none; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--giallo-bordo); background: #fff; color: #8a6100; cursor: pointer; transition: background var(--veloce); }
.conferma:hover { background: var(--giallo); }
.campo.verifica .conferma, .conferma.visibile { display: inline-block; }
.salvato { color: var(--txt-pagata); font-size: 11px; opacity: 0; transition: opacity .3s; }
.salvato.visibile { opacity: 1; }
.piccolo { font-size: 11px; color: var(--tenue); flex-basis: 100%; }
.segnalazione { font-size: 11px; color: var(--rosso); font-weight: 600; }
.avviso-modulo { font-size: 11px; color: var(--rosso); display: block; }
.stato-box { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 220px; }
.verifica-pagamento { background: var(--giallo); border: 1px solid var(--giallo-bordo); border-radius: 10px; padding: 7px 9px; font-size: 11px; display: flex; flex-direction: column; gap: 6px; line-height: 1.4; }
.verifica-pagamento .azioni { margin-left: 0; gap: 6px; align-items: center; }
.azioni-riga { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
tr.annullata .campo input, tr.annullata .etichetta-avviso { color: var(--tenue-chiaro); text-decoration: line-through; }
tr.annullata .motivo-box input { color: var(--testo); text-decoration: none; }
.motivo-box { margin-top: 4px; max-width: 230px; }
.etichetta-motivo { font-size: 11px; font-weight: 600; color: var(--txt-annullata); }
.campo input.motivo { width: 170px; font-size: 12px; font-weight: 500; text-transform: uppercase; }
.ritaglio.motivo { max-width: 220px; height: 44px; }
tr.annullata .ritaglio { opacity: .5; }

/* ---------- Bonifici ---------- */
.bonifici-griglia { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 16px; }
.colonna-bonifici { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.carica-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; border: 2px dashed var(--viola-bordo); background: #fcfbff; flex: none; transition: background var(--veloce), border-color var(--veloce); }
.carica-card span { font-size: 12px; color: var(--tenue); }
.carica-card.sopra { background: var(--viola-chiaro); border-color: var(--viola); }
.attesa-card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.attesa-card .nota { margin-bottom: 10px; }
.attesa-elenco { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.attesa-elenco li { display: grid; grid-template-columns: 46px 1fr; gap: 10px; padding: 10px; border: 1px solid var(--bordo); border-radius: 12px; }
.attesa-elenco img { width: 46px; height: 74px; object-fit: cover; object-position: top; border-radius: 8px; border: 1px solid var(--bordo); cursor: zoom-in; }
.attesa-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; }
.attesa-testo strong { font-size: 13px; }
.attesa-testo .causale { color: var(--tenue); font-size: 11px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.attesa-azioni { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.attesa-azioni select { flex: 1; min-width: 0; height: 34px; border: 1px solid var(--bordo); border-radius: 8px; padding: 0 8px; font-size: 12px; }
.attesa-azioni .btn { height: 34px; }
.attesa-vuota { color: var(--tenue); font-size: 12px; text-align: center; padding: 20px 0; }

/* ---------- Parcometri ---------- */
.parc-griglia { flex: 0 0 34%; min-height: 200px; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 16px; }
.parc-importo { font-weight: 600; font-variant-numeric: tabular-nums; }
.campo-euro { display: inline-flex; align-items: center; gap: 4px; }
.campo-euro input { width: 96px; border: 1px solid transparent; border-radius: 8px; background: transparent; padding: 5px 8px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; transition: border-color var(--veloce), background var(--veloce); }
.campo-euro input:hover { border-color: var(--bordo); background: #fff; }
.campo-euro input:focus { outline: none; border-color: var(--viola); background: #fff; box-shadow: 0 0 0 3px var(--viola-chiaro); }
.campo-euro.verifica input { background: var(--giallo); border-color: var(--giallo-bordo); }
.campo-euro input[type=date] { width: 140px; text-align: left; font-weight: 500; }
.controlli { display: flex; flex-direction: column; gap: 3px; max-width: 320px; font-size: 11px; }
.controlli .ok { color: var(--txt-pagata); font-weight: 600; }
.controlli .nota-grigia { color: var(--tenue); }
.pill-parc { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
tr.saltato td { color: var(--tenue); background: repeating-linear-gradient(135deg, transparent 0 8px, #f7f8fb 8px 16px); }
.nota-saltato { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-style: italic; }
.nota-saltato svg { width: 14px; height: 14px; }

/* ---------- Report ---------- */
.report-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-content: start; }
.report-card { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.report-card .azioni { margin-left: 0; margin-top: 6px; }
.report-stato { margin: 0; font-weight: 500; }
.report-stato.errore { color: var(--rosso); }
.report-percorso { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--tenue); overflow-wrap: anywhere; }
.elenco-info { margin: 0; padding-left: 18px; line-height: 1.9; }

/* ---------- Filtri a pillola ---------- */
.chip-gruppo { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--bordo); background: var(--carta); border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 500; cursor: pointer; color: var(--tenue); transition: all var(--veloce); }
.chip:hover { color: var(--testo); border-color: #dfe2ea; }
.chip.attivo { background: var(--viola-chiaro); border-color: var(--viola-bordo); color: var(--viola-scuro); }

/* ---------- Rilascio file, avanzamento, suggerimenti, foto ---------- */
.rilascio { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; padding: 40px; background: rgba(28, 31, 42, .45); backdrop-filter: blur(3px); animation: appare 160ms ease-out; }
@keyframes appare { from { opacity: 0; } to { opacity: 1; } }
.rilascio-zona { border: 2px dashed rgba(255, 255, 255, .8); border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #fff; background: rgba(123, 97, 255, .25); transition: background var(--veloce), transform var(--veloce); }
.rilascio-zona svg { width: 40px; height: 40px; }
.rilascio-zona strong { font-size: 20px; font-weight: 600; }
.rilascio-zona.sopra { background: rgba(123, 97, 255, .7); transform: scale(1.015); }

.coda { position: fixed; right: 24px; bottom: 24px; z-index: 40; width: min(420px, calc(100vw - 32px)); background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: 0 16px 40px rgba(28, 31, 42, .16); padding: 14px 16px; animation: sale 240ms cubic-bezier(.2, .7, .2, 1); }
@keyframes sale { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.coda-testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.barra-avanzamento { height: 6px; background: var(--viola-chiaro); border-radius: 999px; overflow: hidden; }
.barra-piena { height: 100%; width: 0; background: var(--viola); border-radius: 999px; transition: width .35s ease; }
.coda-elenco { list-style: none; margin: 10px 0 0; padding: 0; font-size: 12px; max-height: 180px; overflow: auto; display: flex; flex-direction: column; gap: 3px; }
.coda-elenco li { color: var(--tenue); }
.coda-elenco li.ok { color: var(--txt-pagata); }
.coda-elenco li.errore { color: var(--rosso); }
.coda-elenco li.corso { color: var(--testo); font-weight: 600; }

.suggerimento { position: fixed; z-index: 60; pointer-events: none; background: var(--testo); color: #fff; font-size: 12px; border-radius: 10px; padding: 8px 11px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }
.tip-riga { display: flex; align-items: center; gap: 7px; line-height: 1.65; }
.tip-colore { width: 8px; height: 8px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .8); }
.tip-forte { font-weight: 600; }

.finestra { border: none; border-radius: 18px; padding: 0; max-width: min(900px, 94vw); width: 100%; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); }
.finestra[open] { animation: sale 220ms cubic-bezier(.2, .7, .2, 1); }
.finestra::backdrop { background: rgba(28, 31, 42, .5); backdrop-filter: blur(2px); }
.finestra-testa { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--bordo); gap: 8px; }
.finestra-azioni { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; max-width: 100%; }
.finestra-testa { flex-wrap: wrap; }
.finestra-testa strong { min-width: 0; overflow-wrap: anywhere; }
.finestra-azioni select { max-width: 100%; min-width: 0; }
.finestra { overflow-x: hidden; }
.finestra img { display: block; width: 100%; max-height: 78vh; object-fit: contain; background: #1c1f2a; }

.velo { display: none; }

/* ---------- Adattamento agli schermi ---------- */
@media (max-height: 760px) {
  .contenuto { padding: 16px 22px; }
  .vista { gap: 12px; }
  .hero-card { padding: 12px 20px; }
  .tile { padding: 10px 14px; }
  .tile-valore { font-size: 22px; }
}
@media (max-height: 640px) and (min-width: 761px) {
  /* Schermi molto bassi: piuttosto che schiacciare tutto, la dashboard scorre al suo interno. */
  .contenuto { overflow-y: auto; overflow-x: hidden; }
  .vista { height: auto; min-height: 100%; }
  .dash-griglia { min-height: 360px; }
}
@media (max-width: 1180px) {
  .dash-griglia { grid-template-columns: minmax(0, 1.4fr) minmax(250px, 1fr); }
  .azioni .btn span { display: none; }
  .azioni .btn { padding: 0 12px; }
}
@media (max-width: 1024px) {
  .app, .app.ridotta { grid-template-columns: var(--lato-ridotto) 1fr; }
  .app .marchio-nome, .app .voce span, .app .gruppo, .app .firma, .app .copyright, .app .contatore { display: none; }
  .app .piede-riga { justify-content: center; }
  .app .lato-testa { flex-direction: column; }
  .app .voce { justify-content: center; padding: 11px; }
  .chiudi-lato { display: none; }
  .bonifici-griglia { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); }
  .profilo div { display: none; }
}
@media (max-width: 760px) {
  /* Telefono: il menu diventa a scomparsa e la pagina scorre in verticale. */
  body { overflow-y: auto; overflow-x: hidden; overflow-x: clip; }
  .app, .app.ridotta { display: block; height: auto; min-height: 100dvh; }
  .lato { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 30; transform: translateX(-100%); transition: transform 220ms cubic-bezier(.2, .7, .2, 1); }
  .app.menu-aperto .lato { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .2); }
  .app .marchio-nome, .app .voce span, .app .gruppo, .app .firma, .app .copyright, .app .contatore { display: revert; }
  .app .firma { display: flex; }
  .app .piede-riga { justify-content: space-between; }
  .app .voce { justify-content: flex-start; padding: 10px 12px; }
  .app .lato-testa { flex-direction: row; }
  .app.menu-aperto .velo { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(28, 31, 42, .35); }
  .apri-menu { display: grid; }
  .barra { padding: 0 14px; gap: 10px; position: sticky; top: 0; z-index: 20; }
  .profilo { display: none; }
  .contenuto { padding: 14px; overflow: visible; }
  .vista { height: auto; }
  .hero, .dash-griglia, .bonifici-griglia, .parc-griglia { grid-template-columns: 1fr; }
  .parc-griglia { flex: none; }
  .kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile:nth-child(3)::before { display: none; }
  .grafico-area { height: 240px; flex: none; }
  .ultime { max-height: 320px; }
  .tabella-card { max-height: 75vh; }
  .attesa-card { max-height: 60vh; }
  .rilascio { grid-template-columns: 1fr; padding: 20px; }
}
/* ================= Accesso, consultazione, utenti ================= */
.pagina-accesso, .pagina-consulta { overflow-y: auto; overflow-x: hidden; overflow-x: clip; }
.accesso { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px 16px; }
.accesso-card { width: min(420px, 100%); background: var(--carta); border: 1px solid var(--bordo); border-radius: 18px; box-shadow: var(--ombra); padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.accesso-marchio { display: flex; align-items: center; gap: 12px; }
.accesso-marchio img { border-radius: 11px; }
.accesso-marchio div { display: flex; flex-direction: column; line-height: 1.25; }
.accesso-marchio strong { font-size: 16px; }
.accesso-marchio span { font-size: 12px; color: var(--tenue); }
.accesso-form { display: flex; flex-direction: column; gap: 12px; }
.accesso-form p { margin: 0; line-height: 1.5; }
.accesso-form label, .form-corpo label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 500; color: var(--tenue); }
.accesso-form input, .form-corpo input, .form-corpo select { height: 42px; border: 1px solid var(--bordo); border-radius: 10px; padding: 0 12px; background: var(--sfondo); color: var(--testo); font-size: 14px; }
.accesso-form input:focus, .form-corpo input:focus, .form-corpo select:focus { outline: none; border-color: var(--viola); box-shadow: 0 0 0 3px var(--viola-chiaro); }
.accesso-errore { color: var(--rosso); font-size: 12px; font-weight: 500; min-height: 1em; }
.accesso-errore:empty { display: none; }
.btn.largo { width: 100%; justify-content: center; }
.btn:disabled { opacity: .6; cursor: wait; }
.accesso-cambia { font-size: 13px; color: var(--tenue); text-align: center; }
.accesso-azioni { display: flex; gap: 8px; flex-wrap: wrap; }
.accesso-firma { font-size: 12px; color: var(--tenue); margin: 0; }
.accesso-firma a { color: var(--testo); font-weight: 600; text-decoration: none; }
.consulta-testa { height: 68px; display: flex; align-items: center; gap: 16px; padding: 0 28px; background: var(--carta); border-bottom: 1px solid var(--bordo); position: sticky; top: 0; z-index: 5; }
.consulta { padding: 22px 28px; display: flex; flex-direction: column; gap: 16px; height: calc(100dvh - 68px); }
.consulta .tabella-card { flex: 1; }
.anteprima { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 28px; background: var(--viola-chiaro); color: var(--viola-scuro); border-bottom: 1px solid var(--viola-bordo); font-size: 13px; }
.anteprima .btn { height: 34px; }
.conteggio-grande { color: var(--tenue); font-weight: 500; }
.targa-fissa { letter-spacing: .05em; }
.utenti-griglia { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr); gap: 16px; }
.recupero-barra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 12px 8px; }
.recupero-barra .nota { flex: 1 1 320px; }
.recupero-barra .azioni { margin-left: auto; }
.campo-euro.campo-testo { width: 100%; max-width: 200px; min-width: 0; }
.campo-euro.campo-testo input { width: 100%; min-width: 0; text-align: left; font-weight: 500; }
.campo-euro { max-width: 100%; }
.campo-euro input { max-width: 100%; }
tr.chiusa td { background: #e6f7ef; }
:root[data-theme="dark"] tr.chiusa td { background: #15332a; }
.finestra img.qr-2fa { display: block; width: 220px; height: 220px; max-height: none; margin: 4px auto; border-radius: 10px; background: #fff; padding: 6px; object-fit: contain; }
.chiave-2fa { font-family: ui-monospace, Consolas, monospace; font-size: 12px; background: var(--sfondo); padding: 2px 6px; border-radius: 6px; user-select: all; }
.codici-recupero { font-family: ui-monospace, Consolas, monospace; font-size: 16px; line-height: 1.8; letter-spacing: .08em; background: var(--sfondo); border: 1px solid var(--bordo); border-radius: 10px; padding: 12px 16px; margin: 0; columns: 2; text-align: center; user-select: all; }
.campo-codice { font-size: 22px !important; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.icona-btn.scudo-attivo { color: var(--txt-pagata); border-color: #bfe8d6; }
.icona-btn.scudo-consigliato { color: #8a6100; background: var(--giallo); border-color: var(--giallo-bordo); }
.etichetta-stato.neutra { color: var(--tenue); }
#cardAziende { margin-top: 18px; }
.pill-ruolo.titolare { background: #efeaff; color: #5a3ee6; }
.voce.solo-founder { display: none !important; }
#vista-utenti.senza-registro .utenti-griglia { grid-template-columns: minmax(0, 1fr); }
.etichetta-stato.bloccato { color: var(--rosso); }
.pill-ruolo { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--viola-chiaro); color: var(--viola-scuro); }
.pill-ruolo.utente { background: var(--giallo); color: #8a6100; }
tr.richiesta td { background: var(--giallo); }
.segnalazione-gialla { font-size: 11px; font-weight: 600; color: #8a6100; margin-top: 2px; }
.ultime.registro li { cursor: default; padding: 7px 6px; }
.finestra-piccola { max-width: min(440px, 94vw); background: var(--carta); color: var(--testo); }
.form-corpo { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.avviso-breve { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70; background: var(--testo); color: var(--carta); padding: 10px 16px; border-radius: 10px; font-size: 13px; box-shadow: var(--ombra); }
.finestra-piede { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--bordo); }
@media (max-width: 760px) {
  .consulta-testa { padding: 0 14px; gap: 10px; }
  .consulta-testa .marchio-nome, .consulta-testa .profilo, #esci span { display: none; }
  .consulta { padding: 14px; height: auto; }
  .utenti-griglia { grid-template-columns: 1fr; }
}
:root[data-theme="dark"] .pill-ruolo.utente, :root[data-theme="dark"] .segnalazione-gialla { color: #f3c74f; }

/* ================= Tablet: sezioni impilate, la pagina scorre ================= */
@media (max-width: 1024px) {
  .contenuto { overflow-y: auto; overflow-x: hidden; }
  .vista { height: auto; min-height: 100%; }
  .dash-griglia, .bonifici-griglia, .utenti-griglia, .parc-griglia { grid-template-columns: 1fr; }
  .utenti-griglia.parcheggi-griglia { grid-template-columns: 1fr; }
  .kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile:nth-child(3)::before { display: none; }
  .tile { min-width: 0; overflow-wrap: anywhere; }
  .bonifici-griglia > *, .utenti-griglia > *, .dash-griglia > *, .parc-griglia > * { min-width: 0; }
  .parc-griglia { flex: none; }
  .grafico-area { height: 260px; flex: none; }
  .ultime { max-height: 320px; }
}

/* ================= Telefono e tablet: tabelle a schede, barra compatta ================= */
@media (max-width: 900px) {
  .ricerca { min-width: 0; }
  .barra-destra { gap: 6px; }
  .barra-destra .icona-btn, .consulta-testa .icona-btn { width: 34px; height: 34px; }
  .tabella-card { max-height: none; padding: 8px; }
  .tabella-card .scorri { overflow: visible; }
  /* Ogni riga diventa una scheda: etichetta a sinistra, valore a destra. */
  .tabella thead { display: none; }
  .tabella, .tabella tbody, .tabella tr, .tabella td { display: block; width: 100%; }
  .tabella tbody tr { border: 1px solid var(--bordo); border-radius: 12px; margin-bottom: 10px; padding: 4px 12px; background: var(--carta); }
  .tabella tbody tr:hover { background: var(--carta); }
  .tabella td, .tabella tbody tr:last-child td { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--bordo); }
  .tabella tbody tr td:last-child { border-bottom: none; }
  .tabella td::before { content: attr(data-etichetta); flex: none; width: 34%; font-size: 11px; color: var(--tenue); padding-top: 2px; }
  .tabella td[data-etichetta=""]::before { display: none; }
  .tabella td > * { min-width: 0; max-width: 100%; }
  .tabella td > :only-child { margin-left: auto; }
  .tabella td.stretta { width: 100%; }
  .tabella td.stretta .azioni-riga { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 4px 10px; }
  .campo, .avviso .campo { max-width: 100%; justify-content: flex-end; }
  .tabella td { padding: 6px 0; }
  .ritaglio { height: 28px; }
  .tabella-piede { padding: 10px 4px; }
  .anteprima { padding: 10px 14px; }
}
@media (max-width: 760px) {
  /* Sul telefono il parcheggio va su una seconda riga della barra, a tutta larghezza. */
  .barra { height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; row-gap: 8px; }
  .scelta-parcheggio { order: 5; flex-basis: 100%; max-width: none; }
  /* Sul telefono i pulsanti vanno a capo: c'è spazio per scrivere cosa fanno. */
  .azioni .btn span { display: inline; }
  .azioni .btn { padding: 0 14px; }
}

/* ================= Tabelle che non ci stanno: diventano schede (a qualsiasi larghezza) ================= */
.scorri.a-schede { overflow-x: hidden; }
.a-schede .tabella thead { display: none; }
.a-schede .tabella, .a-schede .tabella tbody, .a-schede .tabella tr, .a-schede .tabella td { display: block; width: 100%; }
.a-schede .tabella tbody tr { border: 1px solid var(--bordo); border-radius: 12px; margin-bottom: 10px; padding: 4px 12px; background: var(--carta); }
.a-schede .tabella tbody tr:hover { background: var(--carta); }
.a-schede .tabella td, .a-schede .tabella tbody tr:last-child td { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--bordo); }
.a-schede .tabella tbody tr td:last-child { border-bottom: none; }
.a-schede .tabella td::before { content: attr(data-etichetta); flex: none; width: 34%; font-size: 11px; color: var(--tenue); padding-top: 2px; }
.a-schede .tabella td[data-etichetta=""]::before { display: none; }
.a-schede .tabella td > * { min-width: 0; max-width: 100%; }
.a-schede .tabella td > :only-child { margin-left: auto; }
.a-schede .tabella td.stretta { width: 100%; }
.a-schede .tabella td.stretta .azioni-riga { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 4px 10px; }
.a-schede .campo, .a-schede .avviso .campo { max-width: 100%; justify-content: flex-end; }
.a-schede tr.saltato td, .a-schede tr.chiusa td, .a-schede tr.richiesta td { background: none; }
.a-schede tr.chiusa { background: #e6f7ef; }
.a-schede tr.richiesta { background: var(--giallo); }
:root[data-theme="dark"] .a-schede tr.chiusa { background: #15332a; }
/* Nessun testo lungo (es. nomi di file, causali) deve allargare la pagina. */
.tabella td { overflow-wrap: anywhere; }

/* ================= Tema scuro ================= */
/* Per la sera: sfondi scuri, testo chiaro, colori dei grafici verificati sulla superficie scura. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --viola: #8b75ff;
  --viola-scuro: #7b61ff;
  --viola-chiaro: #2a2547;
  --viola-bordo: #4a3f86;
  --sfondo: #13151c;
  --carta: #1c1f29;
  --testo: #e6e8ef;
  --tenue: #9aa0b3;
  --tenue-chiaro: #6c7285;
  --bordo: #2b2f3c;
  --giallo: #3b3217;
  --giallo-bordo: #a8842a;
  --rosso: #f07070;
  --serie-da-pagare: #d95926;
  --serie-pagata: #199e70;
  --serie-annullata: #3987e5;
  --parc-1: #8b75ff;
  --parc-2: #d95926;
  --parc-3: #199e70;
  --parc-altri: #6c7285;
  --fonte-multe: #8b75ff;
  --fonte-monete: #e8558a;
  --fonte-pos: #0e9f9a;
  --fonte-easypark: #c98500;
  --txt-da-pagare: #ff9d6b;
  --txt-pagata: #4fd3a0;
  --txt-annullata: #8ab8ff;
  --ombra: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
}
:root[data-theme="dark"] .contatore.giallo,
:root[data-theme="dark"] .etichetta-stato.attesa,
:root[data-theme="dark"] .conferma { color: #f3c74f; }
:root[data-theme="dark"] .ricerca:focus-within,
:root[data-theme="dark"] .campo input:hover, :root[data-theme="dark"] .campo input:focus,
:root[data-theme="dark"] .campo-euro input:hover, :root[data-theme="dark"] .campo-euro input:focus,
:root[data-theme="dark"] .operatore-box select, :root[data-theme="dark"] .conferma { background: #242835; }
:root[data-theme="dark"] .pallino { border-color: var(--carta); }
:root[data-theme="dark"] .icona-btn:hover, :root[data-theme="dark"] .chip:hover { border-color: #3a3f4e; }
:root[data-theme="dark"] .btn.pericolo { border-color: #5a2a2a; }
:root[data-theme="dark"] .btn.pericolo:hover { background: #2e1a1c; }
:root[data-theme="dark"] .hero-card.verde { background: radial-gradient(120% 140% at 0% 0%, #163226 0%, #1a2320 55%, var(--carta) 100%); }
:root[data-theme="dark"] .hero-card.viola { background: radial-gradient(120% 140% at 100% 0%, #2a2350 0%, #201f33 55%, var(--carta) 100%); }
:root[data-theme="dark"] .variazione.su { color: #4fd3a0; }
:root[data-theme="dark"] .variazione.giu { color: #ff9d6b; }
:root[data-theme="dark"] .giorni-svg .griglia { stroke: #262a36; }
:root[data-theme="dark"] .giorni-svg .asse { stroke: #3a3f4e; }
:root[data-theme="dark"] .area-colonna:hover { fill: rgba(139, 117, 255, .1); }
:root[data-theme="dark"] .stato.da-pagare { background-color: #3a2216; }
:root[data-theme="dark"] .stato.pagata { background-color: #15332a; }
:root[data-theme="dark"] .stato.annullata { background-color: #1a2a42; }
:root[data-theme="dark"] .scheda .conta { background: #262a36; }
:root[data-theme="dark"] .pill-multe { background: #1a2a42; }
:root[data-theme="dark"] .pill-multe.no { background: #262a36; }
:root[data-theme="dark"] .tabella td { border-bottom-color: #242835; }
:root[data-theme="dark"] .tabella tbody tr:hover { background: #20232f; }
:root[data-theme="dark"] .carica-card { background: #1e1b30; }
:root[data-theme="dark"] tr.saltato td { background: repeating-linear-gradient(135deg, transparent 0 8px, #20232d 8px 16px); }
:root[data-theme="dark"] .suggerimento { background: #2d3140; border: 1px solid #3a3f4e; }
:root[data-theme="dark"] .finestra { background: var(--carta); color: var(--testo); }
:root[data-theme="dark"] .quota-vuota { fill: #262a36; }
/* Le foto e i ritagli restano com'erano: leggermente attenuati per non abbagliare. */
:root[data-theme="dark"] .ritaglio { filter: brightness(.85); border-color: var(--bordo); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ---------- Solo per la demo del portfolio ---------- */
.demo-fascia {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 9000;
  display: flex; align-items: center; gap: 14px; max-width: calc(100% - 32px);
  padding: 8px 10px 8px 16px; border-radius: 999px;
  background: rgba(20, 16, 40, .88); color: #fff; font-size: 13px; line-height: 1.3;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .25); backdrop-filter: blur(8px);
}
.demo-fascia strong { color: #b9a6ff; letter-spacing: .06em; }
.demo-fascia a { color: #fff; text-decoration: none; white-space: nowrap; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); }
.demo-fascia a:hover { background: rgba(255, 255, 255, .24); }
.demo-toast {
  position: fixed; left: 50%; bottom: 70px; transform: translate(-50%, 12px); z-index: 9001;
  max-width: min(460px, calc(100% - 32px)); padding: 12px 18px; border-radius: 12px;
  background: #6b4de6; color: #fff; font-size: 14px; text-align: center;
  box-shadow: 0 10px 30px rgba(107, 77, 230, .35); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.demo-toast.visibile { opacity: 1; transform: translate(-50%, 0); }
.demo-credenziali { background: rgba(107, 77, 230, .1); border-radius: 10px; padding: 10px 12px; }
body { padding-bottom: 64px; }
@media (max-width: 520px) {
  .demo-fascia { font-size: 12px; gap: 8px; padding-left: 12px; }
  .demo-fascia span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}