/* ============================================================================
 * Incrowd, la pelle scelta (settembre 2026, dopo sei giri di proposte):
 * morbida e dimensionale. Fondo chiaro con aloni di colore sfocati, pannelli
 * in vetro spesso con lo spigolo di luce in alto, angoli ampi, ombre a piu'
 * strati. Il colore dell'accento sta in brand.css.
 *
 * Si carica DOPO app.css e ne ridefinisce i token e le poche regole che
 * avevano il viola scritto a mano. Per tornare alla grafica precedente basta
 * togliere il <link> a questo file da index.html.
 * ==========================================================================*/
:root{
  --bg:#f3f6f9;
  --surface:rgba(255,255,255,.92);
  --surface2:#f1f5f7;
  --surface3:#e8eef2;
  --ink:#131a24; --ink2:#2f3a48; --muted:#5f6d80; --muted2:#8b98aa;
  --line:rgba(19,26,36,.08); --line2:rgba(19,26,36,.13);
  /* L'accento arriva da brand.css: qui si decide solo come usarlo. */
  --violet:var(--brand-ink); --violet2:var(--brand-1); --blue:var(--brand-2); --cyan:var(--brand-1); --cyan2:var(--brand-1);
  --ok:#12a06b; --okbg:rgba(18,160,107,.12);
  --warn:#b87512; --warnbg:rgba(192,125,18,.13);
  --err:#c8443a; --errbg:rgba(200,68,58,.1);
  --grad:linear-gradient(180deg,var(--brand-1),var(--brand-2));
  --grad-soft:linear-gradient(135deg,color-mix(in srgb,var(--brand-glow) 11%,transparent),color-mix(in srgb,var(--brand-glow2) 7%,transparent));
  --sh-sm:0 14px 30px -24px rgba(19,26,36,.55),inset 0 1px 0 rgba(255,255,255,1);
  --sh:0 18px 36px -26px rgba(19,26,36,.75),inset 0 1px 0 rgba(255,255,255,1);
  --sh-md:0 24px 44px -26px rgba(19,26,36,.8),inset 0 1px 0 rgba(255,255,255,1);
  --sh-lg:0 34px 70px -30px rgba(19,26,36,.7);
  --ring:0 0 0 3.5px color-mix(in srgb,var(--brand-2) 16%,transparent);
  --r:22px; --r2:18px; --rsm:12px;
  --side:236px;
}
body{background:linear-gradient(158deg,#f2f7fa,#f6f4fb) fixed}
body::before{background:
  radial-gradient(560px 440px at 3% -10%,color-mix(in srgb,var(--brand-glow) 19%,transparent),transparent 62%),
  radial-gradient(520px 400px at 100% -6%,color-mix(in srgb,var(--brand-glow2) 13%,transparent),transparent 60%)}
::selection{background:color-mix(in srgb,var(--brand-2) 18%,transparent)}

/* ---------- cornice: niente pannello bianco, il menu galleggia sul fondo ---------- */
.sidebar{background:transparent;border-right:none;padding:18px 14px}
.nav-group{color:var(--muted2)}
.nav-item{border-radius:13px;padding:9px 13px}
.nav-item:hover{background:rgba(255,255,255,.55)}
.nav-item.active{background:rgba(255,255,255,.94);color:var(--ink);font-weight:650;
  box-shadow:inset 0 1px 0 #fff,0 8px 18px -12px rgba(19,26,36,.6)}
.nav-item.active::before{display:none}
.nav-item.active .ic{color:var(--violet)}
.topbar{background:transparent;backdrop-filter:none;border-bottom:none}
.tenant-chip{background:rgba(255,255,255,.86);border-color:var(--line);border-radius:999px;box-shadow:var(--sh-sm)}
.avatar{border-radius:50%;border-color:transparent;box-shadow:0 8px 18px -10px color-mix(in srgb,var(--brand-2) 90%,transparent)}
.avatar:hover{box-shadow:0 12px 22px -10px color-mix(in srgb,var(--brand-2) 95%,transparent)}
.role{color:var(--violet);background:color-mix(in srgb,var(--brand-2) 9%,transparent);border-color:color-mix(in srgb,var(--brand-2) 18%,transparent)}

/* ---------- pannelli in vetro ---------- */
.card,.stat{background:rgba(255,255,255,.9);border:1px solid var(--line);box-shadow:var(--sh)}
.card.hover:hover,.stat:hover{box-shadow:var(--sh-md)}
.stat .ic{border-radius:13px}

/* ---------- bottoni a pillola ---------- */
.btn{border-radius:999px}
.btn-primary{background:var(--grad);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 12px 22px -12px color-mix(in srgb,var(--brand-2) 85%,transparent)}
.btn-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 16px 28px -12px color-mix(in srgb,var(--brand-2) 90%,transparent)}
.badge{border-radius:999px}
.badge.vio{color:var(--violet);background:color-mix(in srgb,var(--brand-2) 10%,transparent)}

/* ---------- campi e pannello laterale ---------- */
.field input,.field select,.field textarea{border-radius:13px;background-color:#fff;border-color:var(--line2);
  box-shadow:inset 0 1px 2px rgba(19,26,36,.04)}
.drawer{border-radius:26px 0 0 26px;background:rgba(255,255,255,.97)}
.scrim{background:rgba(19,26,36,.38)}

/* ---------- accesso ---------- */
.login-card{border-radius:28px}
.login-card::before{background:linear-gradient(150deg,color-mix(in srgb,var(--brand-2) 50%,transparent),transparent 38%,transparent 62%,color-mix(in srgb,var(--brand-glow2) 40%,transparent))}

/* ---------- avvisi ----------
   In basso a destra coprivano il bottone "Salva" del pannello laterale per
   quattro secondi. In alto al centro non stanno sopra a nessun comando, e
   comunque lasciano passare i clic: sono solo da leggere. */
#toasts{top:16px;bottom:auto;right:auto;left:50%;transform:translateX(-50%);align-items:center;pointer-events:none}
.toast{border-radius:16px}