/* =====================================================================
   CondiviCasa - foglio di stile
   Derivato dal mockup approvato (mockup-gestionale-immobile.html):
   palette, spaziature, componenti e nomi delle classi sono gli stessi.
   ===================================================================== */

:root{
  --bg:#0f1720; --panel:#161f2b; --panel2:#1d2836; --line:#2a3746;
  --txt:#e6edf5; --muted:#8fa3b8; --acc:#3d8bfd; --acc2:#22c58b;
  --warn:#f0a33c; --err:#ef5f5f; --purple:#9b7bff;
  --radius:12px;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--txt);font-size:14px}
button{font-family:inherit;cursor:pointer}
a{color:var(--acc);text-decoration:none}
.hidden{display:none!important}

/* ---------- LOGIN ---------- */
#login{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 600px at 50% -10%,#1d3450,#0f1720)}
#login .card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:34px;
  width:380px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.logo{font-size:22px;font-weight:700;letter-spacing:-.3px;margin-bottom:4px}
.logo span{color:var(--acc)}
.sub{color:var(--muted);font-size:13px;margin-bottom:22px}
label{display:block;font-size:12px;color:var(--muted);margin:14px 0 6px;text-transform:uppercase;letter-spacing:.5px}
input,select,textarea{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;color:var(--txt);font-size:14px;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc)}
.btn{background:var(--acc);border:none;color:#fff;padding:10px 16px;border-radius:8px;font-weight:600;font-size:14px}
.btn:hover{filter:brightness(1.1)}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.btn.full{width:100%;padding:12px;margin-top:20px}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--txt)}
.btn.sm{padding:6px 10px;font-size:12.5px}
.btn.green{background:var(--acc2)}
.btn.red{background:var(--err)}
.quick{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.quick b{color:var(--txt)}

/* ---------- STRUTTURA ---------- */
#app{min-height:100vh}
.shell{display:flex;min-height:100vh}
aside{width:232px;background:#111a24;border-right:1px solid var(--line);padding:18px 12px;flex-shrink:0}
aside .logo{padding:0 10px 16px}
nav a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;color:var(--muted);
  font-size:13.5px;margin-bottom:2px}
nav a:hover{background:var(--panel2);color:var(--txt)}
nav a.on{background:rgba(61,139,253,.14);color:var(--acc);font-weight:600}
nav .grp{font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:#5b6c80;padding:16px 11px 6px}
.badge{margin-left:auto;background:var(--err);color:#fff;border-radius:10px;padding:1px 6px;font-size:10.5px;font-weight:700}
main{flex:1;min-width:0;display:flex;flex-direction:column}
header.top{display:flex;align-items:center;gap:14px;padding:14px 26px;border-bottom:1px solid var(--line);background:var(--panel)}
header.top h1{font-size:18px;margin:0;font-weight:650}
header.top .spacer{flex:1}
.pill{background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:5px 12px;font-size:12.5px;color:var(--muted)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--acc);display:grid;place-items:center;
  font-weight:700;font-size:12.5px;color:#fff}
.content{padding:22px 26px;flex:1}

/* ---------- COMPONENTI ---------- */
.grid{display:grid;gap:14px}
.g5{grid-template-columns:repeat(5,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:1100px){.g5,.g4{grid-template-columns:repeat(2,1fr)}.g3,.g2{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.card h3,.kpi h3{margin:0 0 12px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-weight:650}
.kpi .v{font-size:26px;font-weight:700;letter-spacing:-.5px}
.kpi .d{font-size:12px;color:var(--muted);margin-top:4px}
/* Rimando alla sezione da cui viene il numero: un totale in dashboard non si
   spiega da solo, e chi lo legge vuole andare a vedere da cosa e' fatto. */
.kpi a.vai{display:inline-block;margin-top:9px;font-size:12px;color:var(--acc);text-decoration:none}
.kpi a.vai:hover{text-decoration:underline}
/* Il blocco «chi sei» nell'intestazione porta al proprio profilo. */
.chi-sono{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;
          padding:4px 6px;border-radius:9px}
.chi-sono:hover{background:rgba(255,255,255,.05)}
.chead{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.chead h3{margin:0}
.chead .sp{flex:1}
.pos{color:var(--acc2)} .neg{color:var(--err)} .wr{color:var(--warn)}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  padding:8px 10px;border-bottom:1px solid var(--line);font-weight:600}
td{padding:10px;border-bottom:1px solid rgba(42,55,70,.5)}
tr:hover td{background:rgba(255,255,255,.02)}
.tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:600}
.t-ok{background:rgba(34,197,139,.16);color:var(--acc2)}
.t-wait{background:rgba(240,163,60,.16);color:var(--warn)}
.t-bad{background:rgba(239,95,95,.16);color:var(--err)}
.t-info{background:rgba(61,139,253,.16);color:var(--acc)}
.t-mute{background:rgba(143,163,184,.14);color:var(--muted)}
.t-pur{background:rgba(155,123,255,.16);color:var(--purple)}
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.toolbar input,.toolbar select{width:auto;min-width:130px;padding:8px 10px;font-size:13px}
.sect-desc{color:var(--muted);font-size:13px;margin:-6px 0 16px;max-width:820px;line-height:1.55}
.bar{height:8px;background:var(--panel2);border-radius:6px;overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:var(--acc)}
.att{display:inline-flex;align-items:center;gap:5px;background:var(--panel2);border:1px solid var(--line);
  border-radius:6px;padding:3px 8px;font-size:11.5px;color:var(--muted);margin-right:4px}
.note{background:rgba(61,139,253,.08);border:1px solid rgba(61,139,253,.3);border-radius:8px;
  padding:11px 14px;font-size:13px;color:#bcd4f5;line-height:1.55;margin-bottom:16px}
.note b{color:#fff}
.note.warn{background:rgba(240,163,60,.09);border-color:rgba(240,163,60,.35);color:#f3d6a8}
.note.err{background:rgba(239,95,95,.08);border-color:rgba(239,95,95,.3);color:#f5c2c2}
.note.ok{background:rgba(34,197,139,.09);border-color:rgba(34,197,139,.3);color:#bdf0da}

/* modale */
.ovl{position:fixed;inset:0;background:rgba(5,9,14,.72);display:none;align-items:flex-start;
  justify-content:center;padding:50px 20px;overflow:auto;z-index:50}
.ovl.open{display:flex}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:14px;width:640px;max-width:100%;
  padding:22px 24px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.modal h2{margin:0 0 4px;font-size:17px}
.modal .mh{color:var(--muted);font-size:12.5px;margin-bottom:16px}
/* L'anteprima di un documento ha bisogno di piu' spazio del modulo di un
   incasso: la finestra si allarga solo quando contiene un file. */
.modal:has(iframe),.modal:has(img){width:960px}
.modal iframe,.modal img{margin-top:12px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.row{grid-template-columns:1fr}}
.drop{border:1.5px dashed var(--line);border-radius:10px;padding:22px;text-align:center;color:var(--muted);
  font-size:13px;background:var(--panel2)}
.mfoot{display:flex;justify-content:flex-end;gap:8px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.split{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;background:var(--panel2);border-radius:10px;
  padding:12px;margin-top:8px}
.split div{text-align:center}
.split .n{font-size:11.5px;color:var(--muted)}
.split .a{font-size:16px;font-weight:700;margin-top:3px}
.tl{border-left:2px solid var(--line);padding-left:16px;margin-left:6px}
.tl .ev{position:relative;padding-bottom:18px}
.tl .ev::before{content:'';position:absolute;left:-22px;top:4px;width:9px;height:9px;border-radius:50%;
  background:var(--acc);border:2px solid var(--bg)}
.tl .ev .w{font-size:11.5px;color:var(--muted)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px}
.tabs button,.tabs a{background:none;border:none;color:var(--muted);padding:9px 14px;font-size:13.5px;
  border-bottom:2px solid transparent;display:inline-block}
.tabs button.on,.tabs a.on{color:var(--acc);border-bottom-color:var(--acc);font-weight:600}
.doc{display:flex;gap:11px;align-items:center;padding:11px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel2);margin-bottom:8px}
.doc .ic{width:34px;height:34px;border-radius:7px;background:rgba(61,139,253,.15);display:grid;
  place-items:center;font-size:15px}
.doc .m{font-size:11.5px;color:var(--muted)}
.post{border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:12px;background:var(--panel2)}
.post .h{display:flex;gap:9px;align-items:center;margin-bottom:8px}
.vote{display:flex;gap:8px;margin-top:12px}
.vbar{display:flex;height:26px;border-radius:6px;overflow:hidden;margin-top:10px;font-size:11px;font-weight:700}
.vbar div{display:grid;place-items:center;color:#fff}
.help{font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.5}
code{background:var(--panel2);padding:1px 6px;border-radius:4px;font-size:12px;color:#9fd0ff}
pre{background:#0c1219;border:1px solid var(--line);border-radius:10px;padding:14px;overflow:auto;
  font-size:12px;line-height:1.6;color:#c9d6e4}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:10px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px}
.toast{position:fixed;bottom:22px;right:22px;background:var(--acc2);color:#04231a;padding:12px 18px;
  border-radius:10px;font-weight:600;font-size:13.5px;box-shadow:0 10px 30px rgba(0,0,0,.4);display:none;z-index:99}
.role{font-size:10.5px;padding:1px 7px;border-radius:20px;background:rgba(155,123,255,.16);
  color:var(--purple);font-weight:600}

/* ---------- ERRORI DI CAMPO ---------- */
.campo-errore input,.campo-errore select,.campo-errore textarea{border-color:var(--err)}
.msg-errore{color:var(--err);font-size:11.5px;margin-top:5px}

/* ---------- INSTALLER ---------- */
.install{max-width:760px;margin:0 auto;padding:40px 20px}
.passi{display:flex;gap:6px;margin:22px 0 26px;flex-wrap:wrap}
.passi div{flex:1;min-width:110px;border-top:3px solid var(--line);padding-top:9px;font-size:11.5px;color:var(--muted)}
.passi div.on{border-top-color:var(--acc);color:var(--acc);font-weight:600}
.passi div.fatto{border-top-color:var(--acc2);color:var(--acc2)}
.req{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-bottom:1px solid rgba(42,55,70,.5)}
.req .ic{font-size:15px;line-height:1.4}
.req .n{font-size:13.5px}
.credenziali{background:#0c1219;border:1px solid var(--acc2);border-radius:10px;padding:16px}
.credenziali table td{border-bottom:1px solid rgba(42,55,70,.4);font-size:13px}

/* ---------- VOCI DI MENU NON ANCORA DISPONIBILI ---------- */
nav a.futura{opacity:.4;cursor:not-allowed}
nav a.futura:hover{background:none;color:var(--muted)}

/* ---------- SELETTORI DI CONTESTO NELL'INTESTAZIONE ---------- */
.form-contesto{display:flex;gap:8px;align-items:center;margin:0}
.form-contesto select{width:auto;padding:6px 10px;font-size:12.5px;border-radius:20px}
@media(max-width:900px){
  .form-contesto{display:none}
  header.top{flex-wrap:wrap}
}