/* Foglio di stile unico. Nessun framework, nessun build step.
 *
 * Tema scuro pensato per numeri, non per effetto: contrasto alto sulle cifre,
 * basso su tutto il resto, così l'occhio va sui soldi e non sulla cornice.
 * Il fondo non è nero ma blu profondo — il nero puro su schermo affatica e fa
 * "vibrare" i bordi delle tabelle fitte. */

:root {
  --fondo: #0e1420;
  --fondo-2: #141c2b;
  --carta: #172033;
  --carta-2: #1d2839;
  --bordo: #263349;
  --bordo-forte: #33425c;

  --testo: #e6ecf5;
  --testo-2: #aebbcd;
  --tenue: #7385a0;

  --blu: #5b93e8;
  --blu-tenue: #1e2f4d;
  --verde: #3fc27a;
  --verde-tenue: #163527;
  --rosso: #f2647a;
  --rosso-tenue: #3a1e28;
  --ambra: #e5a94a;
  --ambra-tenue: #3a2e18;
  --viola: #a78bfa;

  --raggio: 12px;
  --ombra: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 24px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.55 -apple-system, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  color: var(--testo);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

.nascosto { display: none !important; }

/* Le cifre sempre a larghezza fissa: incolonnate si leggono, proporzionali no. */
.valore, td.n, th.n, .cifra { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---- accesso ---- */
.accesso {
  min-height: 100vh; display: grid; place-items: center;
  background: radial-gradient(1200px 600px at 50% -10%, #1c2c47 0%, var(--fondo) 60%);
}
.scheda-accesso {
  background: var(--carta); padding: 2.25rem; border-radius: 16px; width: min(24rem, 92vw);
  border: 1px solid var(--bordo); box-shadow: 0 24px 70px rgba(0, 0, 0, .5); display: grid; gap: .85rem;
}
.scheda-accesso h1 { margin: 0; font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em; }
.scheda-accesso h1 span { color: var(--blu); }
.sottotitolo { margin: -.4rem 0 .4rem; color: var(--tenue); font-size: .88rem; }
.scheda-accesso label { display: grid; gap: .3rem; font-size: .82rem; color: var(--testo-2); font-weight: 500; }

input, select, textarea {
  font: inherit; padding: .58rem .75rem; border: 1px solid var(--bordo);
  border-radius: 9px; background: var(--fondo-2); color: var(--testo); width: 100%;
}
input::placeholder { color: #5d6d84; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px rgba(91, 147, 232, .18);
}
input:disabled { color: var(--tenue); background: var(--fondo); }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--tenue) 50%), linear-gradient(135deg, var(--tenue) 50%, transparent 50%); background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }

button {
  font: inherit; font-weight: 550; padding: .55rem 1rem; border: 0; border-radius: 9px;
  background: var(--blu); color: #08101f; cursor: pointer; transition: filter .12s;
}
button:hover { filter: brightness(1.12); }
button:active { filter: brightness(.95); }
button:disabled { opacity: .5; cursor: default; }
button.bottone-lieve, .bottone-lieve {
  background: transparent; color: var(--testo-2); border: 1px solid var(--bordo);
  text-decoration: none; display: inline-block; font-size: .85rem; padding: .42rem .75rem; border-radius: 9px;
}
button.bottone-lieve:hover, .bottone-lieve:hover { background: var(--carta-2); color: var(--testo); border-color: var(--bordo-forte); }
.errore { color: var(--rosso); font-size: .85rem; margin: 0; min-height: 1.2em; }

/* ---- intestazione ---- */
header {
  background: rgba(20, 28, 43, .85); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--bordo);
  display: flex; align-items: center; gap: 1.25rem; padding: .6rem 1.4rem; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 20;
}
.marchio { font-size: .95rem; color: var(--tenue); letter-spacing: -.01em; }
.marchio b { color: var(--testo); }
nav { display: flex; gap: .1rem; flex: 1; flex-wrap: wrap; }
/* I collegamenti dentro il contenuto non erano mai stati definiti: senza questa
   regola prendono il blu di default del browser, rgb(0,0,238), che sul fondo
   scuro ha una differenza di luminanza di DUE punti ed è di fatto invisibile.
   Riguardava tutti i link dell'app, non uno solo. */
main a, .carta a, td a {
  color: var(--blu);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
main a:hover, .carta a:hover, td a:hover { border-bottom-color: var(--blu); }
main a:focus-visible, .carta a:focus-visible, td a:focus-visible {
  outline: 2px solid var(--blu);
  outline-offset: 2px;
  border-radius: 3px;
}

nav a {
  padding: .4rem .8rem; border-radius: 8px; text-decoration: none;
  color: var(--tenue); font-size: .9rem; font-weight: 500; transition: color .12s, background .12s;
}
nav a:hover { background: var(--carta); color: var(--testo); }
nav a.attivo { background: var(--blu-tenue); color: #9fc0f5; font-weight: 600; }
.testa-destra { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.utente { font-size: .8rem; color: var(--tenue); }
.scelta-societa { display: flex; border: 1px solid var(--bordo); border-radius: 9px; overflow: hidden; }
.scelta-societa button {
  background: transparent; color: var(--tenue); border-radius: 0; font-size: .82rem;
  padding: .38rem .8rem; border-right: 1px solid var(--bordo); font-weight: 500;
}
.scelta-societa button:last-child { border-right: 0; }
.scelta-societa button:hover { background: var(--carta-2); color: var(--testo); }
.scelta-societa button.attivo { background: var(--blu); color: #08101f; }

main { padding: 1.5rem 1.4rem 4rem; max-width: 1560px; margin: 0 auto; }

/* ---- struttura ---- */
h2 { font-size: 1.25rem; margin: 0 0 1rem; font-weight: 600; letter-spacing: -.015em; }
h3 { font-size: .95rem; margin: 0 0 .7rem; font-weight: 600; letter-spacing: -.01em; }
.griglia { display: grid; gap: 1rem; }
.griglia-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.griglia-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.griglia-2 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }

.carta {
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 1.15rem 1.25rem; box-shadow: var(--ombra);
}
.carta.stretta { padding: .95rem 1.15rem; }
.carta.accento { border-left: 3px solid var(--blu); }

.dato { display: grid; gap: .25rem; }
.dato .etichetta { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--tenue); font-weight: 600; }
.dato .valore { font-size: 1.6rem; font-weight: 620; letter-spacing: -.02em; line-height: 1.15; }
.dato .nota { font-size: .78rem; color: var(--tenue); }
.valore.positivo { color: var(--verde); }
.valore.negativo { color: var(--rosso); }
.valore.attenzione { color: var(--ambra); }
.valore.neutro { color: var(--testo); }

/* ---- tabelle ---- */
.tabella-contenitore {
  overflow: auto; border: 1px solid var(--bordo); border-radius: var(--raggio);
  background: var(--carta); box-shadow: var(--ombra);
}
table { border-collapse: collapse; width: 100%; font-size: .865rem; }
th, td { padding: .58rem .75rem; text-align: left; border-bottom: 1px solid var(--bordo); white-space: nowrap; }
th {
  background: var(--carta-2); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tenue); position: sticky; top: 0; z-index: 1; font-weight: 600;
}
tbody tr { transition: background .1s; }
tbody tr:hover { background: var(--carta-2); }
tbody tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; }
td.largo { white-space: normal; min-width: 15rem; }
tr.cliccabile { cursor: pointer; }
tfoot td { font-weight: 650; background: var(--carta-2); border-top: 1px solid var(--bordo-forte); color: var(--testo); }

/* ---- etichette ---- */
.tag {
  display: inline-block; padding: .12rem .5rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; background: var(--fondo-2); color: var(--tenue);
  border: 1px solid var(--bordo);
}
.tag.A { background: var(--blu-tenue); color: #93b8f2; border-color: #2b4570; }
.tag.I { background: #2a2145; color: #c0aef8; border-color: #3d3068; }
.tag.aperta { background: var(--verde-tenue); color: var(--verde); border-color: #1f4d36; }
.tag.chiusa { background: var(--fondo-2); color: var(--tenue); }
.tag.sospesa, .tag.fuoricampo { background: var(--ambra-tenue); color: var(--ambra); border-color: #4d3f20; }
.tag.incasso { background: var(--verde-tenue); color: var(--verde); border-color: #1f4d36; }
.tag.pagamento { background: var(--rosso-tenue); color: var(--rosso); border-color: #552834; }

.avviso { padding: .8rem 1rem; border-radius: 10px; font-size: .87rem; border: 1px solid; }
.avviso a { color: inherit; font-weight: 600; }
.avviso.attenzione { background: var(--ambra-tenue); border-color: #55431f; color: #f0c988; }
.avviso.ok { background: var(--verde-tenue); border-color: #1f4d36; color: #8fe0b4; }
.avviso.problema { background: var(--rosso-tenue); border-color: #552834; color: #f6a3b1; }

/* Pannelli che segnalano qualcosa da fare (code, proposte da confermare).
 * Il colore sta nel bordo e nel titolo, mai nel fondo: tingere lo sfondo di
 * mille righe è rumore, e un fondo chiaro sotto il testo del tema scuro non si
 * legge affatto. Il fondo della tabella interna rientra di un tono, così il
 * pannello si distingue dalla scheda che lo contiene senza gridare. */
.carta.spia > .tabella-contenitore { background: var(--fondo-2); box-shadow: none; }
.carta.spia > h3 { margin-bottom: .3rem; }
.carta.spia-ambra { border-left: 3px solid var(--ambra); }
.carta.spia-ambra > h3 { color: #f0c988; }
.carta.spia-verde { border-left: 3px solid var(--verde); }
.carta.spia-verde > h3 { color: #8fe0b4; }

/* Righe con un esito: tinta appena accennata, il testo resta quello del tema. */
tbody tr.esito-ok { background: var(--verde-tenue); }
tbody tr.esito-ok:hover { background: #1b402f; }
tbody tr.esito-no { background: var(--rosso-tenue); }
tbody tr.esito-no:hover { background: #48242f; }
tbody tr.esito-dubbio { background: var(--ambra-tenue); }
tbody tr.esito-dubbio:hover { background: #47391e; }

.filtri { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; margin-bottom: 1rem; }
.filtri label { display: grid; gap: .25rem; font-size: .7rem; color: var(--tenue); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.filtri input, .filtri select { min-width: 9rem; width: auto; }
.riga-titolo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }

/* ---- andamento: competenza contro cassa ---- */
.andamento { position: relative; }
.andamento svg { display: block; width: 100%; height: auto; overflow: visible; }
.linea-competenza { fill: none; stroke: var(--blu); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.linea-cassa { fill: none; stroke: var(--verde); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.linea-costi { fill: none; stroke: var(--rosso); stroke-width: 1.8; stroke-dasharray: 5 4; stroke-linejoin: round; }
.area-forbice { fill: var(--blu); opacity: .1; }
.griglia-asse { stroke: var(--bordo); stroke-width: 1; }
.etichetta-asse { fill: var(--tenue); font-size: 10px; }
.punto { fill: var(--fondo); stroke-width: 2; }
.linea-zero { stroke: var(--bordo-forte); stroke-width: 1; stroke-dasharray: 3 3; }
.barra-entrate { fill: var(--verde); }
.barra-uscite { fill: var(--rosso); }
.marcatore { fill: var(--carta-2); stroke: var(--bordo-forte); }

/* ---- grafico della cassa ---- */
.grafico { position: relative; margin-top: .6rem; }
.barre { display: grid; grid-template-columns: repeat(12, 1fr); gap: .35rem; align-items: end; }
.mese { display: grid; align-content: end; }
.coppia { display: flex; gap: 3px; align-items: flex-end; justify-content: center; height: var(--h); }
.colonna { display: flex; flex-direction: column; justify-content: flex-end; width: 44%; min-width: 6px; }
.colonna i { display: block; border-radius: 3px 3px 0 0; }
.colonna i + i { border-radius: 0; }
.inc { background: var(--verde); }
.prev { background: #2a4a63; }
.pag { background: var(--rosso); }
.prevu { background: #5a3040; }
.mese span { font-size: .68rem; color: var(--tenue); text-align: center; padding-top: .35rem; }
.riferimento { position: absolute; left: 0; right: 0; border-top: 2px dashed var(--ambra); opacity: .6; pointer-events: none; }
.riferimento span { position: absolute; right: 0; top: -1.1rem; font-size: .68rem; color: var(--ambra); background: var(--carta); padding: 0 .35rem; }

.legenda { display: flex; gap: 1rem; font-size: .76rem; color: var(--tenue); margin-top: .8rem; flex-wrap: wrap; align-items: center; }
.legenda i { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.legenda .linea { width: 1.1rem; height: 0; border-top: 2.5px solid; border-radius: 0; }

/* ---- modale ---- */
.modale { position: fixed; inset: 0; background: rgba(6, 10, 18, .75); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 50; padding: 1rem; }
.modale-contenuto {
  background: var(--carta); border: 1px solid var(--bordo); border-radius: 16px; padding: 1.6rem;
  width: min(50rem, 96vw); max-height: 90vh; overflow: auto; position: relative;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.chiudi { position: absolute; top: .7rem; right: .7rem; background: transparent; color: var(--tenue); font-size: 1.4rem; padding: .1rem .55rem; }
.chiudi:hover { color: var(--testo); background: var(--carta-2); }
.campi { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.campi label { display: grid; gap: .3rem; font-size: .76rem; color: var(--tenue); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.campi label.pieno { grid-column: 1 / -1; }
.azioni { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.3rem; }

.vuoto, .caricamento { padding: 2.5rem; text-align: center; color: var(--tenue); }

/* La barra di scorrimento in tema: quella chiara di sistema salta all'occhio. */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--fondo); }
::-webkit-scrollbar-thumb { background: var(--bordo); border-radius: 6px; border: 2px solid var(--fondo); }
::-webkit-scrollbar-thumb:hover { background: var(--bordo-forte); }