:root{
  --bg:#0b0f14;
  --card:#111827;
  --muted:#9ca3af;
  --text:#e5e7eb;
  --primary:#22d3ee;
  --ring:rgba(34,211,238,.45);
  --radius:14px;
  --shadow:0 10px 25px rgba(0,0,0,.35);

  --tap:48px;
  --gap:12px;
  --fs-base:18px;
  --fs-small:.9rem;

  /* Colori semantici */
  --green:#22c55e;
  --red:#f43f5e;
  --cyan:#7dd3fc;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:radial-gradient(1200px 700px at top right,#0e1724 0%,var(--bg) 60%);
  color:var(--text);
  line-height:1.5;
  font-size:var(--fs-base);
  -webkit-tap-highlight-color:transparent;
}

body.modal-open{
  /* ulteriore sicurezza lato CSS oltre allo style JS */
  overflow:hidden;
}

.container{max-width:1100px;margin:0 auto;padding:24px}
.small{font-size:var(--fs-small)}

/* ================= HEADER ================= */
.site-header{
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter:blur(12px);
  background:rgba(11,15,20,.7);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-wrap{display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;gap:12px;align-items:center}
.logo{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--primary),#60a5fa);
  box-shadow:var(--shadow);
  color:#00131a;font-weight:900;
}

/* ================= CARDS & FORM ================= */
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
  margin:24px 0;
}
.card-title{margin:0 0 10px}

/* header della card collassabile (titolo + bottone) */
.card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}

/* card specifica per sezioni collassabili (es. Registra Movimento) */
.card-collapsible .card-title{
  margin:0;
}

/* corpo collassabile della card */
.collapsible-body{
  overflow:hidden;
  transition:max-height .22s ease, opacity .18s ease, margin-top .18s ease;
}

/* stato chiuso: nessuna altezza visibile, trasparente, nessun margine sopra */
.collapsible-body[data-open="false"]{
  max-height:0;
  opacity:0;
  margin-top:0;
}

/* stato aperto: altezza “ampia” per contenere il form, margine respirato */
.collapsible-body[data-open="true"]{
  max-height:1600px; /* sufficiente per il form anche su mobile */
  opacity:1;
  margin-top:8px;
}

/* bottone di toggle nella card (mostra/nascondi) */
.card-toggle{
  font-size:.9rem;
  gap:6px;
  padding-inline:12px 14px;
  border-radius:999px;
  background:#020617;
  border:1px solid rgba(148,163,184,.45);
  color:var(--text);
}
.card-toggle:hover{
  background:#020617;
  border-color:rgba(148,163,184,.8);
}
.card-toggle .card-toggle-label{
  opacity:.9;
}

/* freccia (ultimo span con aria-hidden) che ruota su aperto/chiuso */
.card-toggle span[aria-hidden="true"]{
  display:inline-block;
  transform:rotate(0deg);
  transition:transform .18s ease;
  font-size:.8rem;
}
.card-toggle[data-open="true"] span[aria-hidden="true"]{
  transform:rotate(180deg);
}

/* stato visivo quando la card è completamente chiusa (opzionale) */
.card-collapsible.card-collapsed{
  opacity:.96;
}

/* form elements */
fieldset{border:none;margin:0 0 16px;padding:0}
legend{font-weight:700;margin-bottom:8px}
label{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}

input,select{
  background:#0b1220;
  border:1px solid rgba(255,255,255,.1);
  color:var(--text);
  border-radius:12px;
  padding:12px 14px;
  font-size:1rem;
  outline:none;
  min-height:44px;
  width:100%;
}
input:focus,select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px var(--ring);
}

/* piccolo helper per testi di aiuto (es. sotto l’input allegato) */
.hint{
  font-size:.8rem;
  color:var(--muted);
  margin-top:4px;
}

/* ================= FILE INPUT (upload allegati) ================= */
/* wrapper esterno, stesso feeling degli altri campi */
.file-input{
  display:flex;
  align-items:center;
  background:#0b1220;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  padding:4px 6px;
}

/* l’input vero e proprio riempie la riga e mostra il nome file */
.file-input__control{
  flex:1;
  background:transparent;
  border:0;
  color:var(--muted);
  padding:6px 4px;
  font-size:.95rem;
  cursor:pointer;
}

/* testo del nome file che va a capo se lungo */
.file-input__control::-ms-value{
  color:var(--muted);
}

/* bottone “Scegli file” – stile coerente con .btn.primary */
.file-input__control::file-selector-button,
.file-input__control::-webkit-file-upload-button{
  border:0;
  margin-right:10px;
  padding:8px 14px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--primary),#60a5fa);
  color:#00131a;
  font-weight:600;
  font-size:.9rem;
  cursor:pointer;
  min-height:34px;
  min-width:90px;
  box-shadow:0 4px 10px rgba(0,0,0,.35);
  transition:transform .06s ease, background .2s ease, box-shadow .2s ease;
}

/* hover / active del bottone file, come i .btn */
.file-input__control::file-selector-button:hover,
.file-input__control::-webkit-file-upload-button:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,.45);
}
.file-input__control::file-selector-button:active,
.file-input__control::-webkit-file-upload-button:active{
  transform:translateY(0);
}

/* focus: alone senza bordi blu orrendi, evidenziamo il wrapper */
.file-input__control:focus-visible{
  outline:none;
}
.file-input.file-focused{
  border-color:var(--primary);
  box-shadow:0 0 0 4px var(--ring);
}

/* (la classe .file-focused può essere aggiunta via JS se vorrai) */

/* GRID */
.grid{display:grid;gap:12px}
.grid.one{grid-template-columns:1fr}
.grid.two{grid-template-columns:repeat(2,minmax(220px,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(220px,1fr))}
.span-2{grid-column:span 2}
.span-3{grid-column:span 3}

.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}

/* ================= BUTTONS ================= */
.btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  padding:12px 16px;
  border-radius:12px;
  color:var(--text);
  background:#121a2c;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--tap);
  min-width:var(--tap);
  transition:transform .06s ease, background .2s ease, border .2s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-1px);background:#172036}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--ring)}
.btn.primary{
  background:linear-gradient(135deg,var(--primary),#60a5fa);
  color:#00131a;
  border:none;
  font-weight:700;
}
.btn.ghost{background:transparent}
.btn.icon{gap:8px;padding:10px 12px}

.muted{color:var(--muted)}

/* ================= IMPORTI (COLORI) ================= */
.pos{
  color:var(--green);
  font-weight:700;
}
.neg{
  color:var(--red);
  font-weight:700;
}

/* ================= LOGIN ================= */
.auth{
  display:grid;
  place-items:center;
  min-height:100vh;
}
.auth-card{
  width:min(520px,92vw);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:22px;
}
.error{color:#ffb4b4}
.pwd-wrap{
  display:flex;
  align-items:center;
  background:#0b1220;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
}
.pwd-wrap input{border:0;flex:1;padding:12px 14px;background:transparent}
.pwd-wrap .toggle{
  border:0;
  background:transparent;
  color:var(--muted);
  padding:0 10px;
  cursor:pointer;
  min-height:var(--tap);
}

/* ================= LISTA MOVIMENTI ================= */
.table-wrap{overflow:auto}
.table-wrap table{
  width:100%;
  border-collapse:collapse;
  table-layout:auto;
}
.table-wrap thead th{
  text-align:left;
  padding:8px;
  border-bottom:1px solid rgba(255,255,255,.12);
  position:sticky;
  top:0;
  background:rgba(17,24,39,.9);
  backdrop-filter:blur(4px);
}
.table-wrap tbody td{
  padding:8px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* vecchi helper, ancora validi se usati altrove */
.table-amount.pos{color:var(--green);font-weight:700}
.table-amount.neg{color:var(--red);font-weight:700}

/* Link allegati */
.table-wrap a,
.day-details a{
  color:var(--cyan);
  font-weight:600;
  text-decoration:underline;
}
.table-wrap a:hover,
.day-details a:hover{
  text-decoration:none;
}
.badge-warn{color:#ff8b8b;font-weight:800}

/* ================= RICERCA MOVIMENTI ================= */
.list-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:flex-end;
  margin-top:10px;
  margin-bottom:8px;
}

.search-box{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:min(260px,100%);
}

.search-label{
  font-size:.85rem;
  color:var(--muted);
}

.search-input-wrap{
  display:flex;
  align-items:center;
  background:#020617;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.55);
  padding:2px 4px;
  max-width:360px;
}

.search-input{
  flex:1;
  background:transparent;
  border:0;
  color:var(--text);
  padding:8px 10px 8px 12px;
  font-size:.95rem;
  outline:none;
  min-height:38px;
}
.search-input::placeholder{
  color:rgba(148,163,184,.75);
}
.search-input:focus{
  outline:none;
}
.search-input-wrap:focus-within{
  border-color:var(--primary);
  box-shadow:0 0 0 2px var(--ring);
}

/* bottone "pulisci" compatto, rotondo */
.search-clear{
  border-radius:999px;
  min-height:32px;
  min-width:32px;
  padding:4px 8px;
  border:none;
  background:transparent;
  color:var(--muted);
}
.search-clear:hover{
  background:rgba(15,23,42,.9);
}
.search-clear:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--ring);
}

/* meta info sotto la ricerca: "Risultati ricerca", "Nessun movimento trovato", ecc. */
.search-meta{
  margin-top:2px;
}

/* badge generico (pill) per evidenziare stato ricerca */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:uppercase;
}

/* badge per "risultati ricerca" */
.badge.search{
  background:rgba(34,211,238,.12);
  color:var(--primary);
  border:1px solid rgba(34,211,238,.55);
}

/* badge per "nessun movimento trovato" / messaggi di vuoto */
.badge.empty{
  background:rgba(248,113,113,.12);
  color:#fecaca;
  border:1px solid rgba(248,113,113,.55);
}

/* ================= BILANCIO (KPI + DONUT) ================= */
.balance{display:grid;gap:16px}
.balance-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(160px,1fr));
  gap:12px;
}
.kpi{
  padding:14px;
  background:#0b1220;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-height:74px;
}
.kpi .label{color:var(--muted);font-size:.95rem}
.kpi .value{font-size:1.3rem;font-weight:800}
.kpi.in .value{color:var(--green)}
.kpi.out .value{color:var(--red)}
/* .kpi.net .value: colore impostato dal JS per + / - */

.pie-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:6px;
}

/* L'SVG del grafico ha class="pie" (e id="pieChart") */
.pie,
#pieChart{
  width:min(280px,100%);
  height:auto;
  display:block;
  margin:8px auto;
}

.legend{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  font-size:.95rem;
  margin-top:4px;
  color:var(--muted);
}
.legend .dot{
  display:inline-block;
  width:10px;height:10px;
  border-radius:999px;
  margin-right:6px;
}
.legend .in  .dot{background:var(--green)}
.legend .out .dot{background:var(--red)}

/* ================= Segmented control (Mese / Anno) ================= */
.segmented{
  background:#0f1627;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:4px;
}
.segmented .btn{
  background:transparent;
  border:none;
  min-width:92px;
  padding:10px 14px;
  border-radius:9px;
}
.segmented .btn[aria-pressed="true"]{
  background:linear-gradient(135deg,var(--primary),#60a5fa);
  color:#00131a;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
}
.segmented .btn[aria-pressed="false"]{
  color:var(--text);
}
.segmented .btn:focus-visible{
  box-shadow:0 0 0 3px var(--ring);
  outline:none;
}

/* ==================== MODALI ==================== */
.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:40;
  display:none;           /* chiuso di default */
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(3px);
  padding:16px;

  /* il backdrop NON deve scrollare */
  overflow:hidden;
  touch-action:none;
}
.modal-backdrop[data-open="true"]{display:flex}

.modal{
  width:min(720px,92vw);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  padding:18px;

  /* la modale scrolla anche su iPhone a zoom 100% */
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.modal h3{margin:0 0 10px}
.modal .grid{grid-template-columns:repeat(2,minmax(160px,1fr))}
.modal .actions{justify-content:flex-end}
.form-error{margin-top:8px;color:#ff8b8b;font-weight:700}

/* ---- Modale SESSIONE SCADUTA ---- */
#modal-session{
  max-width:480px;
  width:min(480px,92vw);
}
#modal-session h3{
  margin-bottom:6px;
}
#modal-session p{
  margin:0 0 6px;
}
#modal-session .small{
  line-height:1.4;
}
#modal-session .actions{
  margin-top:12px;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width:1024px){
  .container{padding:20px}
  .grid.three{grid-template-columns:repeat(2,minmax(220px,1fr))}
}

@media (max-width:640px){
  :root{--fs-base:16px}
  .container{padding:16px}

  /* tutto in verticale su mobile */
  .grid.two,
  .grid.three{grid-template-columns:1fr}
  .span-2,
  .span-3{grid-column:span 1}

  /* header card: titolo sopra, bottone sotto per più spazio */
  .card-header{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
  .card-toggle{
    align-self:stretch;
    justify-content:space-between;
    width:100%;
  }

  /* KPI impilati, grafico più contenuto */
  .balance-grid{grid-template-columns:1fr}
  .pie,
  #pieChart{width:min(240px,100%)}

  /* segmented: bottoni più larghi e touch-friendly */
  .segmented .btn{min-width:110px}

  /* modale mobile: piena larghezza, altezza max viewport, scroll interno */
  .modal{
    width:100%;
    max-height:calc(100vh - 24px);
    margin:0;
    border-radius:16px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  .modal .grid{grid-template-columns:1fr}

  /* toolbar di ricerca: colonna singola, input full width */
  .list-toolbar{
    flex-direction:column;
    align-items:stretch;
  }
  .search-input-wrap{
    max-width:100%;
  }
}

/* ==================== ACCESSIBILITÀ ==================== */
@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
}