/* ═══ Lista studenti coach (mockup-coach-lista-studenti.html, 11 giu 2026) ═══
   SOLO COACH (decisione Sere). Palette = variabili :root del tool.
   Scoped .ls-* — render in js/listastudenti.js */

.ls-wrap {
  --ls-brand-soft: rgba(153,10,63,.10); --ls-brand-mid: rgba(153,10,63,.32);
  --ls-green-soft: rgba(34,197,94,.08); --ls-green-mid: rgba(34,197,94,.2);
  --ls-orange-soft: rgba(249,115,22,.08); --ls-orange-mid: rgba(249,115,22,.2);
  --ls-red-soft: rgba(239,68,68,.08); --ls-red-mid: rgba(239,68,68,.2);
  --ls-yellow-soft: rgba(234,179,8,.08); --ls-yellow-mid: rgba(234,179,8,.2);
  --ls-blue-soft: rgba(107,143,255,.08);
  --ls-purple-soft: rgba(167,139,250,.08);
  --ls-rosa: #d46c8a;
  --ls-dim: #6e6a8a;
  margin-bottom: 1.4rem;
}

/* ── Header ── */
.ls-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 1.2rem; gap: 1rem; flex-wrap: wrap; }
.ls-title { font-size: 1.05rem; font-weight: 700; }
.ls-sub { font-size: .76rem; color: var(--muted); margin-top: .2rem; }
.ls-actions { display: flex; gap: .5rem; align-items: center; }
.ls-btn { background: var(--brand); color: #fff; border: none; border-radius: 7px; padding: .45rem .9rem; font-size: .78rem; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; }
.ls-btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border2); border-radius: 7px; padding: .45rem .9rem; font-size: .78rem; cursor: pointer; font-family: inherit; white-space: nowrap; }

/* ── Stats sommario ── */
.ls-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8rem; margin-bottom: 1.2rem; }
.ls-stat { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: .9rem 1rem; }
.ls-stat-val { font-size: 1.5rem; font-weight: 600; line-height: 1; margin-bottom: .3rem; }
.ls-stat-label { font-size: .68rem; color: var(--muted); line-height: 1.4; }
.ls-stat-delta { font-size: .67rem; margin-top: .2rem; }
.ls-stat-delta.up { color: var(--green); }
.ls-stat-delta.down { color: var(--red); }

/* ── Alert strip ── */
.ls-alerts { display: flex; gap: .6rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.ls-pill { display: flex; align-items: center; gap: .5rem; border-radius: 8px; padding: .4rem .8rem; font-size: .75rem; border: 1px solid; cursor: pointer; background: transparent; font-family: inherit; }
.ls-pill.red { background: var(--ls-red-soft); border-color: var(--ls-red-mid); color: var(--red); }
.ls-pill.orange { background: var(--ls-orange-soft); border-color: var(--ls-orange-mid); color: var(--orange); }
.ls-pill.yellow { background: var(--ls-yellow-soft); border-color: var(--ls-yellow-mid); color: var(--yellow); }
.ls-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* ── Filtri ── */
.ls-filters { display: flex; gap: .4rem; margin-bottom: 1rem; flex-wrap: wrap; align-items: center; }
.ls-filter-label { font-size: .7rem; color: var(--ls-dim); margin-right: .2rem; }
.ls-fbtn { background: var(--card); border: 1px solid var(--border); color: var(--muted); border-radius: 6px; padding: .3rem .7rem; font-size: .73rem; cursor: pointer; font-family: inherit; }
.ls-fbtn.active { background: var(--ls-brand-soft); border-color: var(--ls-brand-mid); color: var(--text); }

/* ── Tabella ── */
.ls-table { display: flex; flex-direction: column; gap: .5rem; }
.ls-thead { display: grid; grid-template-columns: 2fr 1fr 1.2fr 1fr 1fr 1.2fr 90px; gap: 1rem; padding: .4rem 1.2rem; font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ls-dim); }
.ls-row { background: var(--card); border: 1px solid var(--border); border-radius: 10px; display: grid; grid-template-columns: 2fr 1fr 1.2fr 1fr 1fr 1.2fr 90px; gap: 1rem; padding: .9rem 1.2rem; align-items: center; cursor: pointer; transition: border-color .15s, background .15s; }
.ls-row:hover { border-color: var(--border2); background: var(--surface2); }
.ls-row.has-alert { border-left: 3px solid var(--orange); }
.ls-row.has-alert-red { border-left: 3px solid var(--red); }
.ls-row.needs-approval { border-left: 3px solid var(--brand); }

.ls-name-wrap { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.ls-avatar { width: 32px; height: 32px; border-radius: 8px; background: var(--surface2); border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 600; color: var(--muted); flex-shrink: 0; }
.ls-name { font-size: .85rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-since { font-size: .67rem; color: var(--ls-dim); }

.ls-lvl { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 600; padding: .2rem .55rem; border-radius: 20px; }
.ls-lvl .ld { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.ls-lvl.l1 { background: var(--ls-green-soft); color: var(--green); border: 1px solid var(--ls-green-mid); }
.ls-lvl.l2 { background: var(--ls-brand-soft); color: var(--ls-rosa); border: 1px solid var(--ls-brand-mid); }
.ls-lvl.l3 { background: var(--ls-blue-soft); color: var(--blue); border: 1px solid rgba(107,143,255,.2); }
.ls-lvl.l4 { background: var(--ls-purple-soft); color: var(--purple); border: 1px solid rgba(167,139,250,.2); }
.ls-lvl.zero { background: var(--surface2); color: var(--muted); border: 1px solid var(--border2); }

.ls-prog { display: flex; gap: 2px; align-items: center; }
.ls-seg { height: 5px; flex: 1; border-radius: 2px; background: var(--border2); }
.ls-seg.done { background: var(--green); }
.ls-seg.active { background: var(--brand); }
.ls-seg.partial { background: var(--ls-dim); }

.ls-sig { display: flex; gap: 2px; }
.ls-sd { width: 7px; height: 7px; border-radius: 50%; background: var(--border2); }
.ls-sd.on { background: var(--brand); }

.ls-rhythm-val { font-size: .8rem; font-weight: 500; }
.ls-rhythm-val.ok { color: var(--green); }
.ls-rhythm-val.low { color: var(--orange); }
.ls-rhythm-val.none { color: var(--red); }
.ls-rhythm-label { font-size: .63rem; color: var(--ls-dim); }

.ls-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .67rem; padding: .15rem .5rem; border-radius: 4px; font-weight: 500; white-space: nowrap; }
.ls-badge.alert-orange { background: var(--ls-orange-soft); color: var(--orange); border: 1px solid var(--ls-orange-mid); }
.ls-badge.alert-red { background: var(--ls-red-soft); color: var(--red); border: 1px solid var(--ls-red-mid); }
.ls-badge.ok { background: var(--ls-green-soft); color: var(--green); border: 1px solid var(--ls-green-mid); }
.ls-badge.pending { background: var(--ls-brand-soft); color: var(--ls-rosa); border: 1px solid var(--ls-brand-mid); }
.ls-badge.dim { background: var(--surface2); color: var(--muted); border: 1px solid var(--border2); }

.ls-cta { display: flex; gap: .3rem; justify-content: flex-end; }
.ls-cta-btn { background: transparent; border: 1px solid var(--border2); color: var(--muted); border-radius: 6px; padding: .3rem .6rem; font-size: .72rem; cursor: pointer; font-family: inherit; white-space: nowrap; }
.ls-cta-btn.primary { background: var(--ls-brand-soft); border-color: var(--ls-brand-mid); color: var(--ls-rosa); }

.ls-empty { background: var(--surface); border-radius: 10px; padding: 2rem; text-align: center; color: var(--muted); font-size: .85rem; }

@media (max-width: 1000px) {
  .ls-stats { grid-template-columns: repeat(2, 1fr); }
  .ls-thead { display: none; }
  .ls-row { grid-template-columns: 1fr 1fr; }
}