/* ============================================================
   MyStar Gestionale — theme
   White theme · accent #007EF7 · black #000912 is TEXT ONLY
   ============================================================ */

/* ---- Fonts ---- */
@font-face { font-family:'Evolve'; src:url('../fonts/evolve-thin.otf')    format('opentype'); font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:'Evolve'; src:url('../fonts/evolve-light.otf')   format('opentype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Evolve'; src:url('../fonts/evolve-regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Evolve'; src:url('../fonts/evolve-medium.otf')  format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Evolve'; src:url('../fonts/evolve-bold.otf')    format('opentype'); font-weight:700; font-style:normal; font-display:swap; }

:root{
  /* surfaces */
  --white:#FFFFFF;
  --canvas:#F5F7FA;
  --ink:#000912;            /* text only */
  --ink-2:#3A4351;
  --ink-3:#6B7585;
  --ink-4:#97A1B0;
  --line:#E6EBF1;
  --line-2:#EEF2F6;
  --accent:#007EF7;
  --accent-ink:#0061C4;
  --accent-wash:#EAF4FE;

  /* status */
  --green:#1E9E62;  --green-bg:#E7F6EE;
  --blue:#1666D6;   --blue-bg:#E8F0FE;
  --amber:#B7791F;  --amber-bg:#FBF1DE;
  --red:#D5453B;    --red-bg:#FCEBEA;
  --grey:#6B7585;   --grey-bg:#EEF1F5;

  --radius:13px;
  --radius-sm:9px;
  --radius-lg:18px;
  --shadow-sm:0 1px 2px rgba(0,9,18,.04), 0 1px 3px rgba(0,9,18,.06);
  --shadow-md:0 6px 18px rgba(0,9,18,.08), 0 2px 6px rgba(0,9,18,.05);
  --shadow-lg:0 24px 60px rgba(0,9,18,.18), 0 8px 24px rgba(0,9,18,.10);

  --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --sans:'Evolve', 'Manrope', -apple-system, system-ui, sans-serif;

  /* aliases used by the ported Tasks module (Liaison tokens) */
  --text:var(--ink);
  --text-2:var(--ink-2);
  --text-3:var(--ink-3);
  --text-4:var(--ink-4);

  --sidebar-w:228px;
  --sidebar-w-collapsed:68px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{
  font-family:var(--sans);
  font-weight:400;
  color:var(--ink);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-size:15px;
  line-height:1.5;
}
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; }
::selection{ background:var(--accent-wash); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ============================================================
   LOGIN
   ============================================================ */
.login{
  position:fixed; inset:0; z-index:60;
  background:var(--white);
  display:grid; place-items:center;
  padding:24px;
}
.login::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(760px 460px at 50% -12%, rgba(0,126,247,.10), transparent 62%);
  pointer-events:none;
}
.login__card{
  position:relative; width:100%; max-width:380px; text-align:left;
  background:var(--white); border:1px solid var(--line);
  border-radius:18px; padding:34px 32px; box-shadow:var(--shadow-lg);
}
.login__brand{ display:flex; align-items:center; gap:11px; margin-bottom:26px; }
.login__brand .star{ width:30px; height:30px; }
.login__brand b{ color:var(--ink); font-weight:700; font-size:20px; letter-spacing:-.01em; }
.login h1{ color:var(--ink); font-size:25px; font-weight:700; letter-spacing:-.02em; margin:0 0 6px; }
.login p.sub{ color:var(--ink-3); margin:0 0 26px; font-size:14.5px; font-weight:400; }
.login label{ display:block; color:var(--ink-3); font-size:12.5px; font-weight:500; margin:0 0 7px; letter-spacing:.01em; }
.login .field{ margin-bottom:16px; }
.login input{
  width:100%; height:48px; padding:0 15px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:11px; color:var(--ink); font-size:15px; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.login input::placeholder{ color:var(--ink-4); }
.login input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,126,247,.12); }
.login .btn-entra{
  width:100%; height:48px; margin-top:8px;
  background:var(--accent); color:#fff; border:none; border-radius:11px;
  font-size:15.5px; font-weight:700; letter-spacing:.01em;
  transition:filter .15s, transform .06s;
}
.login .btn-entra:hover{ filter:brightness(1.07); }
.login .btn-entra:active{ transform:translateY(1px); }
.login .err{ color:#FF8A80; font-size:13px; min-height:18px; margin:14px 2px 0; font-weight:400; }
/* hint */
.login .hint{ color:rgba(255,255,255,.36); font-size:12px; margin-top:22px; line-height:1.6; }
.login .hint code{ color:rgba(255,255,255,.7); font-family:var(--mono); }

/* ============================================================
   APP SHELL
   ============================================================ */
.app{ display:none; min-height:100vh; }
.app.on{ display:grid; grid-template-columns:var(--sidebar-w) 1fr; }

.sidebar{
  background:var(--white); color:var(--ink);
  border-right:1px solid var(--line);
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column;
  padding:20px 14px 16px;
  z-index:20;
}
.sidebar__brand{ display:flex; align-items:center; gap:10px; padding:6px 8px 22px; }
.sidebar__brand .star{ width:25px; height:25px; flex:none; }
.sidebar__brand b{ font-weight:700; font-size:18.5px; letter-spacing:-.01em; white-space:nowrap; }
.nav{ display:flex; flex-direction:column; gap:3px; }
.nav a{
  display:flex; align-items:center; gap:12px;
  padding:10px 11px; border-radius:10px;
  color:var(--ink-3); text-decoration:none;
  font-size:14.5px; font-weight:500; white-space:nowrap;
  transition:background .14s, color .14s;
}
.nav a svg{ width:19px; height:19px; flex:none; }
.nav a:hover{ background:var(--line-2); color:var(--ink); }
.nav a.active{ background:var(--accent); color:#fff; box-shadow:0 5px 14px rgba(0,126,247,.28); }
.sidebar__spacer{ flex:1; }
.sidebar__user{
  border-top:1px solid var(--line);
  padding-top:13px; display:flex; align-items:center; gap:11px;
}
.sidebar__user .avatar{
  width:34px; height:34px; border-radius:9px; flex:none;
  background:var(--accent); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:13.5px;
}
.sidebar__user .meta{ min-width:0; flex:1; }
.sidebar__user .meta .n{ font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar__user .meta .e{ font-size:11.5px; color:var(--ink-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar__user .logout{
  background:none; border:none; color:var(--ink-4);
  display:grid; place-items:center; padding:6px; border-radius:8px;
}
.sidebar__user .logout:hover{ color:var(--ink); background:var(--line-2); }
.sidebar__user .logout svg{ width:17px; height:17px; }

/* main */
.main{ min-width:0; display:flex; flex-direction:column; }
.topbar{
  position:sticky; top:0; z-index:15;
  background:rgba(245,247,250,.82); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding:18px 30px; display:flex; align-items:center; gap:14px;
}
.topbar h1{ font-size:21px; font-weight:700; letter-spacing:-.02em; margin:0; }
.topbar .sub{ color:var(--ink-3); font-size:13.5px; font-weight:400; }
.content{ padding:26px 30px 60px; }

/* ============================================================
   STUDENTI — toolbar + table
   ============================================================ */
.toolbar{ display:flex; align-items:center; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.search{ position:relative; flex:1; min-width:240px; max-width:420px; }
.search svg{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--ink-4); pointer-events:none; }
.search input{
  width:100%; height:44px; padding:0 14px 0 40px;
  background:var(--white); border:1px solid var(--line);
  border-radius:11px; font-size:14.5px; color:var(--ink); outline:none;
  box-shadow:var(--shadow-sm); transition:border-color .15s, box-shadow .15s;
}
.search input::placeholder{ color:var(--ink-4); }
.search input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }

.select{
  height:44px; padding:0 38px 0 14px; min-width:150px;
  background:var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236B7585' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>") no-repeat right 13px center;
  border:1px solid var(--line); border-radius:11px;
  font-size:14.5px; color:var(--ink); outline:none; appearance:none; cursor:pointer;
  box-shadow:var(--shadow-sm); transition:border-color .15s, box-shadow .15s;
}
.select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }

.btn{
  height:44px; padding:0 17px; border-radius:11px; border:1px solid var(--line);
  background:var(--white); color:var(--ink); font-size:14.5px; font-weight:600;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  box-shadow:var(--shadow-sm); transition:background .14s, border-color .14s, transform .06s;
}
.btn svg{ width:17px; height:17px; }
.btn:hover{ background:var(--canvas); }
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn--primary:hover{ background:var(--accent); filter:brightness(1.07); }
.btn--ghost{ background:transparent; border-color:transparent; box-shadow:none; color:var(--ink-2); }
.btn--ghost:hover{ background:var(--line-2); }
.btn--sm{ height:38px; padding:0 13px; font-size:13.5px; }

.card-surface{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden;
}

table.tbl{ width:100%; border-collapse:collapse; min-width:660px; }
.tbl-wrap{ overflow-x:auto; }
.tbl thead th{
  text-align:left; font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-3); padding:14px 18px; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:var(--white); z-index:1;
}
.tbl thead th.num{ text-align:right; }
.tbl tbody tr{ border-bottom:1px solid var(--line-2); cursor:pointer; transition:background .12s; }
.tbl tbody tr:last-child{ border-bottom:none; }
.tbl tbody tr:hover{ background:var(--accent-wash); }
.tbl tbody td{ padding:15px 18px; font-size:14.5px; vertical-align:middle; }
.tbl td.num{ text-align:right; }
.cell-name{ font-weight:600; letter-spacing:-.01em; }
.cell-sub{ font-size:12px; color:var(--ink-4); font-weight:400; margin-top:1px; }
.cell-phone{ color:var(--ink-2); font-size:13.5px; }
.cell-pkg{ color:var(--ink-2); }
.due{ font-weight:600; }
.due.unpaid{ color:var(--red); }
.due.paid{ color:var(--green); font-weight:500; }

/* progress */
.prog{ display:flex; align-items:center; gap:10px; min-width:140px; }
.prog__bar{ flex:1; height:7px; border-radius:99px; background:var(--line-2); overflow:hidden; max-width:120px; }
.prog__bar i{ display:block; height:100%; border-radius:99px; background:var(--accent); }
.prog__bar.done i{ background:var(--blue); }
.prog__n{ font-size:12.5px; color:var(--ink-3); white-space:nowrap; }

/* pills */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  height:25px; padding:0 10px; border-radius:99px;
  font-size:12.5px; font-weight:600; white-space:nowrap;
}
.pill::before{ content:''; width:6px; height:6px; border-radius:99px; background:currentColor; }
.pill.green{ color:var(--green); background:var(--green-bg); }
.pill.blue{  color:var(--blue);  background:var(--blue-bg); }
.pill.amber{ color:var(--amber); background:var(--amber-bg); }
.pill.red{   color:var(--red);   background:var(--red-bg); }
.pill.grey{  color:var(--grey);  background:var(--grey-bg); }

.list-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; color:var(--ink-3); font-size:13px; border-top:1px solid var(--line-2);
}

.empty{ padding:64px 24px; text-align:center; color:var(--ink-3); }
.empty .star{ width:34px; height:34px; opacity:.25; margin-bottom:14px; }
.empty b{ display:block; color:var(--ink-2); font-weight:600; margin-bottom:4px; font-size:15px; }

/* ============================================================
   STUDENT CARD — drawer
   ============================================================ */
.scrim{
  position:fixed; inset:0; z-index:40;
  background:rgba(0,9,18,.34); backdrop-filter:blur(1.5px);
  opacity:0; pointer-events:none; transition:opacity .22s;
}
.scrim.on{ opacity:1; pointer-events:auto; }

.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:50;
  width:min(560px, 94vw);
  background:var(--canvas);
  box-shadow:var(--shadow-lg);
  transform:translateX(100%); transition:transform .26s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; overflow:hidden;
}
.drawer.on{ transform:translateX(0); }
.drawer__scroll{ overflow-y:auto; flex:1; }

.dh{ background:var(--ink); color:#fff; padding:24px 26px 22px; position:relative; }
.dh__close{
  position:absolute; top:18px; right:18px;
  width:34px; height:34px; border-radius:9px; border:none;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.7);
  display:grid; place-items:center; transition:background .14s, color .14s;
}
.dh__close:hover{ background:rgba(255,255,255,.16); color:#fff; }
.dh__close svg{ width:18px; height:18px; }
.dh h2{ font-size:23px; font-weight:700; letter-spacing:-.02em; margin:0 56px 8px 0; }
.dh__meta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; color:rgba(255,255,255,.66); font-size:13.5px; }
.dh__meta .ph{ font-family:var(--mono); letter-spacing:.02em; }
.dh__meta .sep{ width:3px; height:3px; border-radius:99px; background:rgba(255,255,255,.3); }
.dh__pkg{ margin-top:14px; display:inline-flex; align-items:center; gap:8px; font-size:13px; color:rgba(255,255,255,.8); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); padding:6px 12px; border-radius:9px; }
.dh__pkg .stage2{ color:var(--accent); font-weight:600; }
.dh__actions{ display:flex; gap:9px; margin-top:18px; }
.dh__actions .btn{ box-shadow:none; }
.dh__actions .btn--ghost{ color:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.16); }
.dh__actions .btn--ghost:hover{ background:rgba(255,255,255,.08); }

.section{ padding:22px 26px; border-bottom:1px solid var(--line); }
.section:last-child{ border-bottom:none; }
.section__h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.section__h h3{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin:0; }

/* analitica tiles */
.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.tile{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm); padding:13px 14px; }
.tile .k{ font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-4); margin-bottom:8px; }
.tile .v{ font-family:var(--mono); font-size:22px; font-weight:600; letter-spacing:-.01em; line-height:1; }
.tile .v small{ font-size:13px; color:var(--ink-4); font-weight:500; }
.tile .v.green{ color:var(--green); }
.tile.span2{ grid-column:span 2; }
.subrow{ display:flex; gap:22px; margin-top:14px; flex-wrap:wrap; }
.subrow .item{ font-size:12.5px; color:var(--ink-3); }
.subrow .item b{ color:var(--ink); font-weight:600; font-family:var(--mono); margin-left:5px; }

/* programma grid */
.prog-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(74px,1fr)); gap:8px; }
.cell{
  border-radius:10px; padding:8px 8px 9px; min-height:62px;
  display:flex; flex-direction:column; gap:2px; position:relative;
  border:1px solid var(--line); background:var(--white);
}
.cell .seq{ font-family:var(--mono); font-size:11px; font-weight:600; color:var(--ink-4); }
.cell .dt{ font-family:var(--mono); font-size:12.5px; font-weight:600; margin-top:auto; }
.cell .tch{ font-size:10px; color:var(--ink-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cell.attended{ background:var(--green-bg); border-color:transparent; }
.cell.attended .seq{ color:var(--green); }
.cell.attended .dt{ color:var(--green); }
.cell.attended .tch{ color:#4E9C77; }
.cell.burned{ background:var(--red-bg); border-color:transparent; }
.cell.burned .seq{ color:var(--red); }
.cell.burned .dt{ color:var(--red); }
.cell.burned .tch{ color:#C77; }
.cell.planned{ border-style:dashed; border-color:var(--line); background:transparent; }
.cell.planned .dt{ color:var(--ink-2); }
.cell.empty{ border-style:dashed; border-color:#DCE3EB; background:transparent; }
.cell.empty .dt{ color:var(--ink-4); }

/* pagamenti */
.pay{ display:flex; flex-direction:column; gap:2px; }
.pay__row{ display:flex; align-items:center; gap:12px; padding:11px 2px; border-bottom:1px solid var(--line-2); }
.pay__row:last-child{ border-bottom:none; }
.pay__date{ font-family:var(--mono); font-size:13px; color:var(--ink-3); width:84px; flex:none; }
.pay__kind{ font-weight:600; font-size:14px; }
.pay__method{ font-size:12.5px; color:var(--ink-4); }
.pay__dots{ flex:1; border-bottom:1px dotted var(--line); margin:0 4px; transform:translateY(-3px); }
.pay__amt{ font-family:var(--mono); font-weight:600; font-size:14.5px; }
.pay__amt.neg{ color:var(--red); }

/* ============================================================
   MODALS
   ============================================================ */
.modal-scrim{
  position:fixed; inset:0; z-index:70;
  background:rgba(0,9,18,.40); backdrop-filter:blur(2px);
  display:grid; place-items:center; padding:24px;
  opacity:0; pointer-events:none; transition:opacity .18s;
}
.modal-scrim.on{ opacity:1; pointer-events:auto; }
.modal{
  width:100%; max-width:600px; background:var(--white);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  transform:translateY(8px) scale(.99); transition:transform .2s;
  max-height:92vh; display:flex; flex-direction:column; overflow:hidden;
}
.modal-scrim.on .modal{ transform:none; }
.modal__h{ padding:26px 30px 6px; }
.modal__h h2{ font-size:22px; font-weight:700; letter-spacing:-.01em; margin:0; }
.modal__h p{ color:var(--ink-3); font-size:14px; margin:6px 0 0; }
.modal__body{ padding:22px 30px 8px; overflow-y:auto; }
.modal__foot{ padding:18px 30px 24px; display:flex; gap:10px; justify-content:flex-end; border-top:1px solid var(--line-2); margin-top:10px; }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
.fg{ display:flex; flex-direction:column; gap:7px; }
.fg.full{ grid-column:1 / -1; }
.fg label{ font-size:12.5px; font-weight:600; color:var(--ink-2); }
.fg input, .fg select, .fg textarea{
  height:44px; padding:0 13px; border:1px solid var(--line); border-radius:10px;
  font-size:14.5px; color:var(--ink); background:var(--white); outline:none;
  transition:border-color .14s, box-shadow .14s;
}
.fg textarea{ height:auto; padding:11px 13px; resize:vertical; min-height:64px; }
.fg select{
  appearance:none; cursor:pointer; padding-right:36px;
  background:var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236B7585' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>") no-repeat right 12px center;
}
.fg input:focus, .fg select:focus, .fg textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }
.fg input.mono{ letter-spacing:.02em; }
.seg{ display:flex; gap:6px; }
.seg button{
  flex:1; height:42px; border:1px solid var(--line); background:var(--white);
  border-radius:10px; font-size:13.5px; font-weight:600; color:var(--ink-2);
  transition:all .12s;
}
.seg button.on{ border-color:var(--accent); background:var(--accent-wash); color:var(--accent-ink); }

/* toast */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--accent); color:#fff; padding:12px 18px; border-radius:11px;
  font-size:14px; font-weight:500; box-shadow:var(--shadow-lg); z-index:90;
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  display:flex; align-items:center; gap:9px;
}
.toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast svg{ width:17px; height:17px; color:var(--accent); }

/* ============================================================
   CLIENT PAGE (scheda cliente)
   ============================================================ */
.cl-back{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:16px;
  background:none; border:none; color:var(--ink-3); font-size:13.5px; font-weight:600;
  padding:6px 2px; border-radius:8px;
}
.cl-back:hover{ color:var(--accent); }
.cl-back svg{ width:17px; height:17px; }

.cl-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:22px; }
.cl-id h1{ font-size:28px; font-weight:700; letter-spacing:-.02em; margin:0 0 9px; }
.cl-id .meta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; color:var(--ink-3); font-size:14px; }
.cl-id .meta .ph{ font-family:var(--mono); color:var(--ink-2); }
.cl-id .meta .sep{ width:3px; height:3px; border-radius:99px; background:var(--ink-4); }
.cl-id .meta .pkg{ color:var(--ink-2); }
.cl-id .meta .pkg .s2{ color:var(--accent); font-weight:600; }
.cl-actions{ display:flex; gap:9px; flex-wrap:wrap; }

/* kommo button (brand-tinted, distinct) */
.btn--kommo{ background:#fff; border-color:var(--line); color:var(--ink); }
.btn--kommo .dot{ width:9px; height:9px; border-radius:3px; background:var(--accent); }
.btn--kommo:hover{ background:var(--accent-wash); border-color:var(--accent); color:var(--accent-ink); }
.btn .ext{ width:14px; height:14px; opacity:.7; }

.cl-grid{ display:grid; grid-template-columns:1.55fr 1fr; gap:18px; align-items:start; margin-top:4px; }
.cl-col{ display:flex; flex-direction:column; gap:18px; min-width:0; }

.panel{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; }
.panel__h{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 18px; border-bottom:1px solid var(--line-2); }
.panel__h h3{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin:0; }
.panel__h .meta-sm{ font-size:12.5px; color:var(--ink-4); }
.panel__b{ padding:18px; }

/* analitica strip on page */
.cl-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.cl-tiles .tile{ background:var(--canvas); border-color:transparent; }
.cl-sub{ display:flex; gap:24px; flex-wrap:wrap; margin-top:16px; padding-top:15px; border-top:1px solid var(--line-2); }
.cl-sub .item{ font-size:12.5px; color:var(--ink-3); }
.cl-sub .item b{ color:var(--ink); font-weight:600; font-family:var(--mono); margin-left:5px; }

/* WhatsApp panel */
.wa{ display:flex; flex-direction:column; height:560px; }
.wa__head{ display:flex; align-items:center; gap:11px; padding:14px 18px; border-bottom:1px solid var(--line-2); }
.wa__ava{ width:38px; height:38px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; flex:none; }
.wa__ava svg{ width:21px; height:21px; }
.wa__who{ min-width:0; flex:1; }
.wa__who .n{ font-weight:600; font-size:14.5px; }
.wa__who .s{ font-size:12px; color:var(--ink-4); }
.wa__tag{ font-size:11px; font-weight:600; color:var(--green); background:var(--green-bg); padding:4px 9px; border-radius:99px; white-space:nowrap; }
.wa__banner{ font-size:12px; color:var(--amber); background:var(--amber-bg); padding:8px 18px; display:flex; align-items:center; gap:7px; }
.wa__banner svg{ width:14px; height:14px; flex:none; }
.wa__body{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:8px;
  background:var(--canvas); }
.wa__day{ align-self:center; font-size:11px; color:var(--ink-4); background:var(--white); border:1px solid var(--line); padding:3px 11px; border-radius:99px; margin:4px 0; }
.wa__msg{ max-width:76%; padding:8px 12px 6px; border-radius:13px; font-size:14px; line-height:1.45; box-shadow:var(--shadow-sm); position:relative; }
.wa__msg .t{ font-family:var(--mono); font-size:10px; color:var(--ink-4); float:right; margin:4px 0 -2px 10px; }
.wa__msg.in{ align-self:flex-start; background:var(--white); border-top-left-radius:4px; }
.wa__msg.out{ align-self:flex-end; background:var(--green-bg); border-top-right-radius:4px; }
.wa__msg.out .t{ color:#5BA083; }
.wa__compose{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-top:1px solid var(--line-2); }
.wa__compose input{ flex:1; height:42px; border:1px solid var(--line); border-radius:99px; padding:0 16px; font-size:14px; color:var(--ink-3); background:var(--canvas); outline:none; }
.wa__compose input::placeholder{ color:var(--ink-4); }
.wa__compose .send{ width:42px; height:42px; border-radius:50%; border:none; background:var(--line-2); color:var(--ink-4); display:grid; place-items:center; flex:none; }
.wa__compose .send svg{ width:18px; height:18px; }

/* Kommo card */
.kommo__top{ display:flex; align-items:center; gap:11px; margin-bottom:16px; }
.kommo__logo{ width:38px; height:38px; border-radius:10px; background:var(--accent); color:#fff; display:grid; place-items:center; font-weight:700; font-size:17px; flex:none; }
.kommo__top .n{ font-weight:700; font-size:15px; }
.kommo__top .s{ font-size:12px; color:var(--ink-4); }
.kommo__rows{ display:flex; flex-direction:column; gap:0; margin-bottom:16px; }
.kommo__row{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--line-2); font-size:13.5px; }
.kommo__row:last-child{ border-bottom:none; }
.kommo__row .k{ color:var(--ink-3); }
.kommo__row .v{ font-weight:600; }
.kommo__row .v.mono{ font-weight:500; color:var(--ink-2); }
.stage-badge{ font-size:12px; font-weight:600; color:var(--accent-ink); background:var(--accent-wash); padding:4px 10px; border-radius:99px; }

/* Tasks */
.tasklist{ display:flex; flex-direction:column; }
.task{ display:flex; align-items:flex-start; gap:11px; padding:12px 0; border-bottom:1px solid var(--line-2); }
.task:last-child{ border-bottom:none; }
.task__check{
  width:21px; height:21px; border-radius:6px; border:1.8px solid var(--line); background:var(--white);
  flex:none; margin-top:1px; display:grid; place-items:center; cursor:pointer; transition:all .12s; color:transparent;
}
.task__check svg{ width:13px; height:13px; }
.task__check:hover{ border-color:var(--accent); }
.task.done .task__check{ background:var(--accent); border-color:var(--accent); color:#fff; }
.task__main{ flex:1; min-width:0; }
.task__title{ font-size:14px; font-weight:500; }
.task.done .task__title{ text-decoration:line-through; color:var(--ink-4); }
.task__sub{ font-size:12px; color:var(--ink-4); margin-top:3px; display:flex; gap:10px; flex-wrap:wrap; }
.task__sub .due.mono{ color:var(--ink-3); }
.task__sub .due.late{ color:var(--red); }

/* programma on page reuses .prog-grid; pagamenti reuse .pay */

@media (max-width: 1060px){
  .cl-grid{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .cl-tiles{ grid-template-columns:repeat(2,1fr); }
}

/* ============================================================
   CALENDARIO
   ============================================================ */
.cal-bar{ display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.cal-today{ height:40px; }
.cal-nav{ display:flex; gap:5px; }
.cal-nav .navbtn{ width:40px; height:40px; border:1px solid var(--line); background:var(--white); border-radius:10px; display:grid; place-items:center; color:var(--ink-2); box-shadow:var(--shadow-sm); transition:background .12s, color .12s; }
.cal-nav .navbtn:hover{ background:var(--canvas); color:var(--accent); }
.cal-nav .navbtn svg{ width:18px; height:18px; }
.cal-label{ font-size:18px; font-weight:700; letter-spacing:-.01em; text-transform:capitalize; margin-left:4px; white-space:nowrap; }
.cal-spacer{ flex:1; }
.cal-views{ display:flex; gap:3px; background:var(--line-2); padding:3px; border-radius:11px; }
.cal-views button{ height:34px; padding:0 15px; border:none; background:transparent; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--ink-3); transition:all .12s; }
.cal-views button:hover{ color:var(--ink); }
.cal-views button.on{ background:var(--white); color:var(--ink); box-shadow:var(--shadow-sm); }

.cal{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; }
.cal-head{ display:grid; border-bottom:1px solid var(--line); }
.cal-dayhead{ padding:9px 6px 10px; text-align:center; border-left:1px solid var(--line-2); }
.cal-dayhead:first-of-type{ border-left:none; }
.cal-dayhead .dow{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; font-weight:700; color:var(--ink-3); }
.cal-dayhead .dnum{ font-size:18px; font-weight:700; margin-top:3px; line-height:1; }
.cal-dayhead.today .dow{ color:var(--accent); }
.cal-dayhead.today .dnum{ color:#fff; background:var(--accent); width:30px; height:30px; border-radius:50%; display:grid; place-items:center; margin:3px auto 0; }
.cal-scroll{ max-height:calc(100vh - 250px); overflow-y:auto; }
.cal-body{ display:grid; position:relative; }
.cal-hour{ height:62px; position:relative; }
.cal-hour span{ position:absolute; top:-8px; right:9px; font-size:11px; font-family:var(--mono); color:var(--ink-4); }
.cal-daycol{ border-left:1px solid var(--line-2); position:relative; background-image:linear-gradient(var(--line-2) 1px, transparent 1px); background-size:100% 62px; }
.cal-daycol.today{ background-color:rgba(0,126,247,.04); }
.cal-ev{ position:absolute; border-radius:8px; padding:4px 8px; overflow:hidden; cursor:pointer; border:1px solid; box-shadow:var(--shadow-sm); transition:box-shadow .12s; z-index:1; }
.cal-ev:hover{ box-shadow:var(--shadow-md); z-index:5; }
.cal-ev .t{ font-family:var(--mono); font-weight:600; font-size:10.5px; opacity:.92; display:flex; align-items:center; gap:5px; }
.cal-ev .kk{ font-family:var(--sans); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:1px 5px; border-radius:4px; background:rgba(0,9,18,.07); }
.cal-ev.burned .kk{ background:rgba(178,58,48,.12); }
.cal-ev .nm{ font-weight:700; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.cal-ev .mt{ font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.82; }
.cal-ev.planned{ background:var(--accent-wash); border-color:#B9D7FB; color:var(--accent-ink); }
.cal-ev.attended{ background:var(--green-bg); border-color:#BCE5CE; color:#147A4A; }
.cal-ev.burned{ background:var(--red-bg); border-color:#F1C7C3; color:#B23A30; }
.cal-now{ position:absolute; left:0; right:0; height:0; border-top:2px solid rgba(229,75,61,.42); z-index:0; pointer-events:none; }
.cal-now span{ position:absolute; left:-3.5px; top:-4px; width:7px; height:7px; border-radius:50%; background:rgba(229,75,61,.62); }

/* month */
.cal-mhead{ display:grid; grid-template-columns:repeat(7,1fr); border-bottom:1px solid var(--line); }
.cal-mhead div{ padding:9px 10px; text-align:right; font-size:11px; text-transform:uppercase; letter-spacing:.04em; font-weight:700; color:var(--ink-3); }
.cal-mbody{ display:grid; grid-template-columns:repeat(7,1fr); }
.cal-mcell{ min-height:108px; border-left:1px solid var(--line-2); border-top:1px solid var(--line-2); padding:7px 9px 9px; cursor:pointer; transition:background .1s; overflow:hidden; }
.cal-mcell:nth-child(7n+1){ border-left:none; }
.cal-mcell:hover{ background:var(--canvas); }
.cal-mcell.other{ background:#FAFBFC; }
.cal-mcell.other .dnum{ color:var(--ink-4); }
.cal-mcell .dnum{ font-size:13px; font-weight:700; text-align:right; color:var(--ink-2); }
.cal-mcell.today .dnum{ display:inline-block; float:right; color:#fff; background:var(--accent); min-width:24px; height:24px; line-height:24px; padding:0 4px; border-radius:12px; text-align:center; }
.cal-mchip{ font-size:11px; padding:3px 7px; border-radius:6px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; clear:both; }
.cal-mchip .mono{ font-weight:600; }
.cal-mchip.planned{ background:var(--accent-wash); color:var(--accent-ink); }
.cal-mchip.attended{ background:var(--green-bg); color:#147A4A; }
.cal-mchip.burned{ background:var(--red-bg); color:#B23A30; }
.cal-mmore{ font-size:11px; color:var(--ink-3); margin-top:4px; font-weight:600; clear:both; }

/* autocomplete */
.ac{ position:relative; }
.ac-list{ position:absolute; top:calc(100% + 5px); left:0; right:0; background:var(--white); border:1px solid var(--line); border-radius:11px; box-shadow:var(--shadow-md); max-height:232px; overflow-y:auto; z-index:6; display:none; padding:5px; }
.ac-list.on{ display:block; }
.ac-item{ padding:9px 11px; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ac-item:hover{ background:var(--accent-wash); }
.ac-item .nm{ font-weight:600; font-size:14px; }
.ac-item .tel{ font-size:12px; color:var(--ink-4); }
.ac-empty{ padding:12px; color:var(--ink-4); font-size:13.5px; text-align:center; }

/* event detail modal */
.ev-meta{ display:flex; flex-direction:column; margin-bottom:18px; }
.ev-meta .row{ display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--line-2); font-size:14px; }
.ev-meta .row:last-child{ border-bottom:none; }
.ev-meta .row .k{ color:var(--ink-3); }
.ev-meta .row .v{ font-weight:600; }
.mini-sel{ height:34px; padding:0 30px 0 11px; border:1px solid var(--line); border-radius:8px; font-size:13.5px; font-weight:600; color:var(--ink); background:var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236B7585' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>") no-repeat right 9px center; appearance:none; cursor:pointer; outline:none; max-width:200px; }
.mini-sel:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }
.ev-note{ display:flex; align-items:center; gap:8px; margin:2px 0 16px; padding:10px 12px; background:var(--amber-bg); color:var(--amber); border-radius:9px; font-size:12.5px; }
.ev-note svg{ width:15px; height:15px; flex:none; }
.ev-actions{ display:flex; gap:9px; flex-wrap:wrap; }
.ev-actions .btn{ flex:1; justify-content:center; min-width:120px; }
.sb{ display:inline-flex; align-items:center; gap:6px; height:25px; padding:0 11px; border-radius:99px; font-size:12.5px; font-weight:600; }
.sb::before{ content:''; width:6px; height:6px; border-radius:99px; background:currentColor; }
.sb.planned{ color:var(--accent-ink); background:var(--accent-wash); }
.sb.attended{ color:var(--green); background:var(--green-bg); }
.sb.burned{ color:var(--red); background:var(--red-bg); }

@media (max-width:760px){
  .cal-label{ font-size:15.5px; margin-left:0; }
  .cal-spacer{ display:none; }
  .cal-views{ order:5; }
  .cal-scroll{ max-height:calc(100vh - 300px); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px){
  .app.on{ grid-template-columns:var(--sidebar-w-collapsed) 1fr; }
  .sidebar__brand b, .nav a span, .sidebar__user .meta{ display:none; }
  .sidebar{ padding:18px 10px 14px; align-items:center; }
  .sidebar__brand{ padding:6px 0 20px; }
  .nav a{ justify-content:center; padding:11px; }
  .sidebar__user{ flex-direction:column; gap:8px; }
  .tiles{ grid-template-columns:repeat(2,1fr); }
  .content{ padding:20px 16px 50px; }
  .topbar{ padding:16px 18px; }
}
@media (max-width: 560px){
  .hide-sm{ display:none; }
  .form-grid{ grid-template-columns:1fr; }
}