/* Correzioni applicative. Nessuno stile inline: la CSP vieta 'unsafe-inline'
   e la CSP resta piu' importante della comodita' di scrivere style="". */
.sv-login-brand .sv-p { margin-top: 20px; }
.sv-login-stats      { margin-top: 32px; max-width: 520px; }
.sv-login-nota       { color: rgba(255,255,255,.45); max-width: 56ch; }

/* Utility applicative — nessuno stile inline (CSP) */
.sv-mb            { margin-bottom: 14px; }
.sv-top-title     { font-size: 20px; margin-top: 2px; }
.sv-pill-live     { height: 34px; padding: 0 14px; }
.sv-kpi-ico       { color: var(--sv-ink-4); }
.sv-btn-esci      { margin-top: 12px; background: rgba(255,255,255,.12); }
.sv-empty { text-align: center; padding: 34px 10px; align-items: center; }
.sv-empty .sv-mark-lg { margin: 0 auto 4px; }
.sv-ico-t { margin-top: 2px; }

/* Ritmo verticale del form: .sv-field non porta margini propri,
   nel canvas la spaziatura e' sempre esplicita (18px pulsante, 14px note). */
.sv-field + .sv-field { margin-top: 14px; }
.sv-btn-cta           { margin-top: 18px; }
.sv-note-sotto        { margin-top: 14px; }

/* Stato di errore sul campo: il kit non lo prevede, lo derivo dai suoi token */
/* Campo invalido: il canvas lo marca con aria-invalid + border inline.
   L'inline lo blocca la CSP, quindi la stessa resa vive qui. */
.sv-input[aria-invalid="true"]       { border-color: var(--sv-bad); background: var(--sv-bad-soft); }
.sv-input[aria-invalid="true"]:focus { outline-color: var(--sv-bad); }

/* sv-ui.js genera style="margin-top:2px" sulle icone di toast e dialog:
   la CSP blocca gli inline, quindi la stessa regola vive qui.
   Il kit resta intatto e la policy non si indebolisce. */
.svc-toast > i.fa-solid,
.svc-dialog i.fa-solid { margin-top: 2px; }
.sv-pad-xl { padding: 48px 24px; }
.svc-toast-ico { margin-top: 2px; }

/* Login: equivalenti delle spaziature che il canvas mette inline */
.sv-brand-mobile   { margin-bottom: 26px; }
.sv-brand-mobile-t { font-size: 14.5px; font-weight: 600; }
.sv-tenant-nome    { margin-top: 3px; font-size: 14.5px; }
.sv-mt-l           { margin-top: 22px; }
.sv-form-campi     { margin-top: 20px; }
.sv-link-sm        { font-size: 12.5px; }

/* Login "svl": equivalenti degli stili inline del canvas (CSP: niente style="") */
.svl-mobilehead-t  { font-size: 15px; font-weight: 600; }
.svl-pill-tls      { margin-left: auto; }
.svl-tenant-nome   { margin-top: 3px; font-size: 14.5px; }
.svl-tenant-ok     { color: var(--sv-ok); font-size: 14px; }
.svl-cta           { margin-top: 18px; height: 48px; }
.svl-ico-sm        { font-size: 11px; margin-right: 5px; }
.svl-ico-brand     { color: var(--sv-brand); }
.sv-inline        { display: inline; }
.sv-iconbtn-bad   { color: var(--sv-bad); }
.sv-tile-data     { width: 52px; }
.sv-mese          { margin-top: 3px; text-transform: uppercase; }
.sv-azione-txt { display: none; }
@media (min-width: 1280px) { .sv-azione-txt { display: inline; } }
/* Pagine di servizio: colonna singola centrata */
.svl-form-sola { grid-column: 1 / -1; min-height: 100vh; }

/* ===== Console di piattaforma =====
   Palette DIVERSA da quella degli istituti: chi entra deve capire a colpo
   d'occhio di essere nell'area del fornitore, non in quella di una scuola.
   Istituti = blu istituzionale (--sv-brand). Console = verde profondo. */
.svl-admin {
  --console-scuro:  #0b3b34;
  --console-medio:  #10554a;
  --console-chiaro: #14756a;
  --console-acceso: #2ea88f;
}
.svl-brand-admin {
  background:
    radial-gradient(120% 90% at 15% 8%, rgba(46,168,143,.28), transparent 62%),
    linear-gradient(160deg, var(--console-medio) 0%, var(--console-scuro) 100%);
}
.svl-brand-admin .svl-glow { background: radial-gradient(closest-side, rgba(46,168,143,.30), transparent); }
.svl-brand-admin .sv-mark  { background: rgba(46,168,143,.20); color: #7fd6c6; }
.svl-brand-admin .svl-lock { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.16); }
.svl-brand-admin .svl-mark i { color: #7fd6c6; }

.svl-admin .svl-form      { background: #f2f6f4; }
.svl-admin .svl-title     { color: #0b3b34; }
.svl-brand-admin .svl-h1  { color: #fff; }
.svl-brand-admin .svl-lead{ color: rgba(255,255,255,.78); }
.svl-crest-admin          { background: var(--console-chiaro); color: #fff; }
.svl-tenant-admin         { border-color: #cfe4e0; background: #fff; }
.svl-admin .sv-btn        { background: var(--console-medio); }
.svl-admin .sv-btn:hover  { background: var(--console-scuro); }
.svl-admin .sv-input:focus{ border-color: var(--console-chiaro); outline-color: var(--console-chiaro); }
.svl-admin .svl-note      { background: #e6f2ef; border-color: #cfe4e0; color: #12564d; }
.svl-admin .svl-note i    { color: var(--console-chiaro); }
.sv-mark-warn { background: var(--sv-warn-soft); color: var(--sv-warn-ink); }
.sv-cols.sv-c2 > * { min-width: 0; }
.sv-ta { width:100%; padding:11px 13px; border:1px solid #e2e1dc; border-radius:var(--sv-r-m);
         font:inherit; font-size:13.5px; background:var(--sv-surface); resize:vertical; }
.sv-ta:focus { outline:2px solid var(--sv-brand); outline-offset:1px; border-color:var(--sv-brand); }

/* ===== Allineamento dei campi in griglia =====
   .sv-field e' display:block: in una griglia le sue due parti (etichetta e
   casella) non sono allineate fra colonne, e basta un margine diverso perche'
   una riga slitti.
   Soluzione: la griglia dichiara DUE righe (etichetta, casella) e ogni campo
   eredita quelle stesse righe con `subgrid`. Le etichette finiscono tutte
   sulla prima riga e le caselle tutte sulla seconda, per costruzione. */
.sv-cols > .sv-field,
.sv-cols > label.sv-field {
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  row-gap: 6px;
  min-width: 0;
}
@supports (grid-template-rows: subgrid) {
  .sv-cols:has(> .sv-field) { grid-auto-rows: auto; align-items: start; }
  .sv-cols > .sv-field,
  .sv-cols > label.sv-field { grid-row: span 2; grid-template-rows: subgrid; }
}

/* Il kit aggiunge .svv-counter (e .svv-msg in errore) come TERZO figlio dei
   campi con regola maxlen: senza questa regola finirebbero nella riga della
   casella, sovrapponendosi all'input e sfasando la colonna. Vengono estratti
   dal flusso della griglia e posizionati sotto. */
.sv-cols > .sv-field { position: relative; }
.sv-cols > .sv-field > .svv-counter,
.sv-cols > .sv-field > .svv-msg {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
}
.sv-cols > .sv-field > .svv-counter { text-align: right; }
.sv-cols > .sv-field > span:first-child {
  margin: 0;
  line-height: 18px;
  align-self: end;           /* etichette ancorate al fondo della loro riga */
}

/* select e input numerici: stessa altezza degli input di testo */
.sv-cols select.sv-input,
.sv-cols input.sv-input { height: 46px; }
.sv-cols textarea.sv-ta  { height: auto; }

/* ===== sv-colorpicker (componente aggiunto: il kit non lo prevede) ===== */
.svcp            { display: flex; flex-direction: column; gap: 10px; }
.svcp-riga       { display: flex; align-items: center; gap: 10px; }
.svcp-nativo     { width: 46px; height: 46px; padding: 0; border: 1px solid #e2e1dc;
                   border-radius: var(--sv-r-m); background: var(--sv-surface); cursor: pointer; flex: none; }
.svcp-nativo::-webkit-color-swatch-wrapper { padding: 4px; }
.svcp-nativo::-webkit-color-swatch         { border: none; border-radius: 9px; }
.svcp-hex        { flex: 1; min-width: 0; }
.svcp-pulisci    { flex: none; }
.svcp-proposti   { display: flex; gap: 8px; flex-wrap: wrap; }
.svcp-pastiglia  { width: 30px; height: 30px; border-radius: 9px; border: 1px solid rgba(20,22,26,.14);
                   cursor: pointer; padding: 0; transition: transform .12s ease, box-shadow .12s ease; }
.svcp-pastiglia:hover        { transform: scale(1.08); }
.svcp-pastiglia:focus-visible{ outline: 2px solid var(--sv-brand); outline-offset: 2px; }
.svcp-pastiglia[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--sv-surface), 0 0 0 4px var(--sv-brand); }

/* Anteprima del logo caricato */
.sv-logo-prev    { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.sv-logo-prev img{ max-height: 46px; max-width: 160px; border-radius: 8px;
                   border: 1px solid var(--sv-line); background: #fff; padding: 4px; }

/* ===== sv-select (documentato nel canvas, assente in sv-ui.js) ===== */
.svs            { position: relative; }
.svs-trigger    { display: flex; align-items: center; gap: 9px; width: 100%; height: 46px;
                  padding: 0 13px; border: 1px solid #e2e1dc; border-radius: var(--sv-r-m);
                  background: var(--sv-surface); font: inherit; font-size: 13.5px;
                  color: var(--sv-ink); cursor: pointer; text-align: left; }
.svs-trigger:hover        { border-color: #c9c7c0; }
.svs-trigger:focus-visible{ outline: 2px solid var(--sv-brand); outline-offset: 1px; }
.svs-trigger > i:first-child { color: var(--sv-ink-4); font-size: 13px; }
.svs-caret      { margin-left: auto; color: var(--sv-ink-4); font-size: 11px; }
.svs-vuoto-txt  { color: var(--sv-ink-4); }
.svs-pop        { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0;
                  background: var(--sv-surface); border: 1px solid var(--sv-line);
                  border-radius: var(--sv-r-m); box-shadow: 0 18px 40px -18px rgba(20,22,26,.34);
                  overflow: hidden; }
.svs-cerca      { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
                  border-bottom: 1px solid var(--sv-line-2); color: var(--sv-ink-4); }
.svs-cerca input{ border: 0; outline: 0; font: inherit; font-size: 13px; width: 100%;
                  background: transparent; color: var(--sv-ink); }
.svs-lista      { max-height: 260px; overflow-y: auto; padding: 6px; }
.svs-opt        { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 11px;
                  border: 0; border-radius: 10px; background: transparent; font: inherit;
                  font-size: 13.5px; color: var(--sv-ink); cursor: pointer; text-align: left; }
.svs-opt:hover  { background: var(--sv-surface-2); }
.svs-opt .svs-tick { margin-left: auto; opacity: 0; color: var(--sv-ok); font-size: 12px; }
.svs-opt[aria-selected="true"] .svs-tick { opacity: 1; }
.svs-opt[aria-selected="true"]           { background: var(--sv-brand-soft); }
.svs-vuoto      { padding: 14px; font-size: 13px; color: var(--sv-ink-4); text-align: center; margin: 0; }

/* ===== Sidebar della console =====
   Il kit usa 268px, pensati per etichette lunghe. Con le voci brevi della
   console lo spazio avanza e la colonna pesa troppo: 228px basta e restituisce
   40px al contenuto. Sotto i 1100px il kit la nasconde comunque. */
.sv-app { grid-template-columns: 228px 1fr; }
.sv-side { padding: 20px 12px; }
.sv-side-group { margin-top: 14px; }
.sv-nav { padding-left: 10px; padding-right: 10px; }
@media (max-width: 1100px) { .sv-app { grid-template-columns: 1fr; } }
.sv-mod { background: var(--sv-surface-2); border-top: 1px solid var(--sv-line-2);
          border-radius: 0 0 var(--sv-r-m) var(--sv-r-m); }

/* Un textarea in griglia occupa la riga della casella ma cresce in altezza:
   se sta accanto a input normali va ancorato in alto, non stirato. */
.sv-cols > .sv-field > textarea.sv-ta { align-self: start; }
/* sv-select rende un <button> alto 46px: stessa altezza degli input, cosi'
   le colonne miste input/select restano allineate. */
.sv-cols > .sv-field > sv-select,
.sv-cols > .sv-field > sv-datepicker { display: block; }
.sv-cols > .sv-field > sv-select .svs-trigger,
.sv-cols > .sv-field > sv-datepicker .svc-trigger { height: 46px; }

/* ===== Correzioni su sv-select in griglia =====
   1. Il trigger deve avere ESATTAMENTE l'altezza degli input accanto (46px),
      bordi e box-sizing compresi, altrimenti la riga slitta di qualche pixel.
   2. Il popup e' in position:absolute dentro una cella di griglia: senza
      z-index alto e senza contenitore che non ritaglia, viene tagliato dalle
      schede sottostanti.
   3. Le etichette lunghe devono troncare, non allargare la colonna. */
.sv-cols > .sv-field > sv-select { position: relative; z-index: 1; }
.sv-cols > .sv-field > sv-select:focus-within { z-index: 40; }
.svs-trigger { box-sizing: border-box; height: 46px; }
.svs-val     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.svs-pop     { z-index: 200; }
.svs-opt span{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Le schede non devono ritagliare il popup di un select al loro interno */
.sv-card, .sv-card-p, .sv-mod { overflow: visible; }

/* Il messaggio di errore (.sva-field) e il contatore sono figli del campo:
   in griglia vanno estratti dal flusso come il contatore, o spingono la
   casella verso il basso disallineando la colonna. */
.sv-cols > .sv-field > .sva-field {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px;
}

/* ===== Menu dell'account (avatar in alto a destra) ===== */
.sv-utente        { position: relative; }
.sv-utente > button.sv-avatar { border: 0; cursor: pointer; font: inherit; }
.sv-utente-pop    { position: absolute; z-index: 300; top: calc(100% + 8px); right: 0;
                    min-width: 248px; background: var(--sv-surface);
                    border: 1px solid var(--sv-line); border-radius: var(--sv-r-l);
                    box-shadow: 0 18px 40px -18px rgba(20,22,26,.34); overflow: hidden; padding: 6px; }
.sv-utente-testa  { padding: 10px 12px 12px; border-bottom: 1px solid var(--sv-line-2); margin-bottom: 6px; }
.sv-utente-testa p{ margin: 0; }
.sv-utente-voce   { display: flex; align-items: center; gap: 10px; width: 100%;
                    padding: 10px 12px; border: 0; border-radius: 10px; background: transparent;
                    font: inherit; font-size: 13.5px; color: var(--sv-ink);
                    text-decoration: none; cursor: pointer; text-align: left; }
.sv-utente-voce:hover { background: var(--sv-surface-2); }
.sv-utente-voce i { width: 16px; color: var(--sv-ink-4); }
.sv-utente-sep    { height: 1px; background: var(--sv-line-2); margin: 6px 0; }
.sv-utente-esci   { color: var(--sv-bad); }
.sv-utente-esci i { color: var(--sv-bad); }
.sv-chiave-mfa { background: var(--sv-surface-2); border: 1px solid var(--sv-line);
                 border-radius: var(--sv-r-m); padding: 12px 14px; font-size: 15px;
                 letter-spacing: 1px; margin: 10px 0; word-break: break-all; }

/* ===== Spaziatura fra i blocchi dentro un form =====
   .sv-stack distanzia i propri FIGLI DIRETTI: quando il form e' l'unico
   figlio, i blocchi al suo interno restano attaccati. Il form eredita quindi
   la stessa griglia, cosi' le schede si distanziano come previsto dal kit. */
.sv-stack > form { display: grid; gap: 18px; align-content: start; }

/* Una scheda con l'ultimo elemento a ridosso del bordo: il kit da' padding
   alla .sv-card-p, ma le griglie annidate possono azzerare il margine finale. */
.sv-card-p > .sv-cols:last-child,
.sv-card-p > .sv-field:last-child { margin-bottom: 2px; }
.sv-passi { margin: 14px 0 18px; padding-left: 20px; color: var(--sv-ink-2); font-size: 13.5px; }
.sv-passi li { margin-bottom: 6px; line-height: 1.5; }

/* ===== Autocompletamento indirizzo ===== */
.svind-pop   { position: absolute; z-index: 220; top: calc(100% + 6px); left: 0; right: 0;
               background: var(--sv-surface); border: 1px solid var(--sv-line);
               border-radius: var(--sv-r-m); box-shadow: 0 18px 40px -18px rgba(20,22,26,.34);
               padding: 6px; max-height: 260px; overflow-y: auto; }
.svind-voce  { display: flex; align-items: flex-start; gap: 9px; width: 100%; padding: 9px 11px;
               border: 0; border-radius: 10px; background: transparent; font: inherit;
               font-size: 13.5px; color: var(--sv-ink); cursor: pointer; text-align: left; }
.svind-voce:hover { background: var(--sv-surface-2); }
.svind-voce i     { color: var(--sv-ink-4); font-size: 12px; margin-top: 3px; }
.sv-field-ind     { position: relative; }

/* Il banner e il contenuto sono fratelli dentro .sv-wrap, che non ha gap:
   senza questa regola il banner resta incollato alla prima scheda. */
.sv-wrap-stack { display: grid; gap: 18px; align-content: start; }

/* ===== Foto del profilo ===== */
.sv-foto-blocco { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 4px; }
.sv-foto-att    { width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
                  border: 1px solid var(--sv-line); flex: none; }
.sv-avatar-lg   { width: 72px; height: 72px; font-size: 22px; flex: none; }
/* Avatar con foto nell'intestazione e nel menu account */
.sv-avatar img  { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }