/* IoProf.Ui — Design tokens (vedi docs/05-ux-principi.md)
   Scala fluida con clamp(): mobile-first, leggibile per il target 40-60. */
:root {
  /* Colore — brand kit v1.0 "Sereno Blue" (hex esatti del kit) */
  --io-brand: #2E6BF0;        /* Sereno Blue — primario */
  --io-brand-strong: #1E4FD6; /* Blue Deep — gradiente/hover */
  --io-brand-soft: #E7EFFE;   /* Blue Soft — superficie */
  --io-brand-tint: #F2F6FF;   /* Blue Tint — superficie tenue */
  --io-coral: #FF8A5B;        /* Corallo — accento del marchio (punta penna) */
  --io-paper: #FAF5E8;        /* Paper — fondo dell'agenda */
  --io-success: #117a54; /* AA come testo: 5.3:1 su surface, 4.9:1 su surface-alt */
  --io-warning: #e8930c;
  --io-warning-strong: #8a5200; /* ambra scura per testo: AA su superficie chiara e sul tono ambra dell'alert */
  --io-danger: #c93030; /* tinta dell'insufficienza: bordo/fondo tenue, evidente ma non aggressiva */
  --io-danger-strong: #b62828; /* rosso per TESTO: AA anche sul fondo rosso al 12% del chip (5.3:1) e sull'alert recupero (5.6:1) — il #c93030 lì scendeva a 4.4:1 */
  --io-brand-text: #1f4fc4; /* brand usato come testo/link: serve più contrasto del brand pieno */
  --io-ink: #16181d;
  --io-ink-soft: #5b6478;
  --io-ink-faint: #9aa1ae; /* terziario: meta discrete, mai testo di corpo */
  --io-surface: #ffffff;
  --io-surface-alt: #eef2f8; /* sfondo app, grigio-blu calmo (stile Apple) */
  --io-surface-raised: #f6f8fc; /* superficie intermedia (campo ricerca, profilo) */
  --io-border: #e2e6ef;

  /* Tipografia — brand kit: Manrope (UI), Caveat per la grafia (agenda/lockup) */
  --io-font: "Manrope", -apple-system, system-ui, "Segoe UI", sans-serif;
  --io-text-sm: clamp(0.84rem, 0.8rem + 0.2vw, 0.95rem);
  --io-text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --io-text-lg: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --io-text-xl: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);

  /* Spaziatura (scala 4px) e forme */
  --io-space-1: 4px;
  --io-space-2: 8px;
  --io-space-3: 12px;
  --io-space-4: 16px;
  --io-space-6: 24px;
  --io-space-8: 32px;
  --io-radius: 14px;
  --io-radius-lg: 22px;
  --io-shadow: 0 1px 3px rgb(28 35 51 / 8%), 0 4px 16px rgb(28 35 51 / 6%);
  --io-shadow-soft: 0 1px 2px rgb(16 24 40 / 3%), 0 2px 6px rgb(16 24 40 / 4%); /* ombra leggera, stile Apple */

  /* Guscio desktop (≥1024px) */
  --io-sidebar-w: 248px;
  --io-topbar-h: 69px;

  /* Touch target minimo (ADR-0003: touch-first) */
  --io-touch: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --io-ink: #e8ebf2;
    --io-ink-soft: #9aa3b5;
    --io-surface: #161b26;
    --io-surface-alt: #0f131c;
    --io-surface-raised: #1b2130;
    --io-border: #2a3142;
    --io-ink-faint: #767e90;
    --io-brand-soft: #1c2742;
    /* Su superficie scura il rosso, il blu e il verde pieni scendono sotto AA: versioni chiare */
    --io-danger: #ff6b6b;
    --io-danger-strong: #ff6b6b; /* in dark il rosso chiaro è già 7.6:1 sul chip tenue: testo = tinta */
    --io-brand-text: #7ea6ff;
    --io-success: #3dd68c;
    --io-warning-strong: #f0b24a; /* ambra chiara: AA come testo sull'alert ambra in dark */
  }
}

body {
  margin: 0;
  font-family: var(--io-font);
  font-size: var(--io-text-base);
  color: var(--io-ink);
  background: var(--io-surface-alt);
}

.io-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--io-space-2);
  min-height: var(--io-touch);
  padding: 0 var(--io-space-6);
  border: none;
  border-radius: var(--io-radius);
  background: var(--io-brand);
  color: #fff;
  font-family: inherit;
  font-size: var(--io-text-base);
  font-weight: 600;
  text-decoration: none; /* anche come <a> */
  cursor: pointer;
  transition: background 150ms ease, transform 100ms ease;
}
.io-button:hover { background: var(--io-brand-strong); }
.io-button:active { transform: scale(0.98); }
.io-button:disabled { opacity: 0.5; cursor: not-allowed; }
.io-button--secondary {
  background: var(--io-brand-soft);
  color: var(--io-brand-strong);
}
/* Hover sul secondario: scurisco solo lo sfondo soft, MAI fino al brand pieno
   (altrimenti testo brand-strong su sfondo brand-strong → invisibile). Il testo resta sempre leggibile. */
.io-button--secondary:hover {
  background: color-mix(in srgb, var(--io-brand-strong) 18%, var(--io-brand-soft));
  color: var(--io-brand-strong);
}

/* Focus visibile da tastiera: mai rimosso, sempre a contrasto (WCAG 2.4.7) */
.io-button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--io-brand);
  outline-offset: 2px;
}

/* Il router (FocusOnNavigate) porta il focus sull'h1 per gli screen reader:
   niente anello visivo su un elemento non interattivo. */
h1:focus, h2:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.io-card {
  background: var(--io-surface);
  border: 1px solid var(--io-border);
  border-radius: var(--io-radius-lg);
  box-shadow: var(--io-shadow);
  padding: var(--io-space-6);
}

.io-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--io-space-3);
  padding: var(--io-space-8) var(--io-space-6);
  text-align: center;
  color: var(--io-ink-soft);
}
.io-empty__icon { font-size: 2.5rem; }
.io-empty__title {
  font-size: var(--io-text-lg);
  font-weight: 700;
  color: var(--io-ink);
  margin: 0;
  text-wrap: balance;
}
.io-empty__hint { margin: 0; max-width: 38ch; text-wrap: pretty; }

.io-field { display: flex; flex-direction: column; gap: var(--io-space-1); margin-bottom: var(--io-space-4); }
.io-field label { font-size: var(--io-text-sm); font-weight: 600; color: var(--io-ink-soft); }
.io-field input {
  min-height: var(--io-touch);
  padding: 0 var(--io-space-3);
  border: 1.5px solid var(--io-border);
  border-radius: var(--io-radius);
  background: var(--io-surface);
  color: var(--io-ink);
  font-family: inherit;
  font-size: var(--io-text-base);
  /* il picker nativo di data/ora segue il tema: icona e popup leggibili anche in dark */
  color-scheme: light dark;
}
.io-field input:focus { outline: 2px solid var(--io-brand); border-color: var(--io-brand); }

/* Campi data/ora del design system (IoDateField / IoTimeField, blocco 1.9).
   Un solo controllo nativo, comodo su entrambe le piattaforme dell'utente:
   - desktop (puntatore fine): il browser segmenta i campi e fa avanzare il caret
     da un segmento al successivo mentre si digitano le cifre — è il comportamento
     nativo, non c'è JS da mantenere;
   - iPhone (pointer: coarse): compare la ruota/selettore nativo, ideale al tocco.
   Target ≥44px e focus-visible coerenti col resto del sistema. */
.io-datetime { /* eredita .io-field: stessa spaziatura/etichetta degli altri campi */ }
.io-datetime__input {
  min-height: var(--io-touch);
  /* larghezza piena: il campo non deve "saltellare" tra desktop e mobile */
  width: 100%;
  box-sizing: border-box;
  padding: 0 var(--io-space-3);
  border: 1.5px solid var(--io-border);
  border-radius: var(--io-radius);
  background: var(--io-surface);
  color: var(--io-ink);
  font-family: inherit;
  /* cifre tabellari: i segmenti restano allineati mentre il caret avanza */
  font-size: var(--io-text-base);
  font-variant-numeric: tabular-nums;
  /* picker nativo (icona + popup) coerente col tema chiaro/scuro */
  color-scheme: light dark;
  appearance: none;
  -webkit-appearance: none;
}
.io-datetime__input:focus { outline: 2px solid var(--io-brand); border-color: var(--io-brand); }
.io-datetime__input:focus-visible {
  outline: 3px solid var(--io-brand);
  outline-offset: 2px;
}
/* Il segmento attivo (giorno/mese/anno, ore/minuti) su cui si trova il caret:
   evidenziato col tono brand-soft così l'utente vede dove sta scrivendo e
   capisce che digitando passerà al segmento successivo. */
.io-datetime__input::-webkit-datetime-edit-day-field:focus,
.io-datetime__input::-webkit-datetime-edit-month-field:focus,
.io-datetime__input::-webkit-datetime-edit-year-field:focus,
.io-datetime__input::-webkit-datetime-edit-hour-field:focus,
.io-datetime__input::-webkit-datetime-edit-minute-field:focus {
  background: var(--io-brand-soft);
  color: var(--io-brand-strong);
  border-radius: 4px;
  outline: none;
}
/* L'icona del calendario/orologio nativo: area di tocco generosa, segue il tema */
.io-datetime__input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
}
/* Su touch (iPhone) il controllo apre la ruota nativa: niente caret, ma deve
   restare ben tappabile a tutta larghezza. */
@media (pointer: coarse) {
  .io-datetime__input { min-height: var(--io-touch); }
  .io-datetime__input::-webkit-calendar-picker-indicator { padding: 8px; }
}

.io-select {
  min-height: var(--io-touch);
  padding: 0 var(--io-space-3);
  border: 1.5px solid var(--io-border);
  border-radius: var(--io-radius);
  background: var(--io-surface);
  color: var(--io-ink);
  font-family: inherit;
  font-size: var(--io-text-base);
  width: 100%;
}
.io-select:focus { outline: 2px solid var(--io-brand); border-color: var(--io-brand); }

.io-field--check label {
  display: flex;
  align-items: center;
  gap: var(--io-space-2);
  min-height: var(--io-touch);
  font-size: var(--io-text-base);
  font-weight: 400;
  color: var(--io-ink);
  cursor: pointer;
}
.io-field--check input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--io-brand);
}

/* Campo password con pulsante mostra/nascondi (target 40-60: errori di digitazione frequenti) */
.io-field__wrap { position: relative; display: flex; }
.io-field__wrap input { flex: 1; padding-right: calc(var(--io-touch) + var(--io-space-1)); }
.io-field__toggle {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  min-width: var(--io-touch);
  min-height: calc(var(--io-touch) - 4px);
  border: none;
  background: transparent;
  color: var(--io-brand-strong);
  font-family: inherit;
  font-size: var(--io-text-sm);
  font-weight: 600;
  cursor: pointer;
  border-radius: calc(var(--io-radius) - 4px);
}
.io-field__toggle:focus-visible {
  outline: 3px solid var(--io-brand);
  outline-offset: -2px;
}

/* Chip scuola e riga di switch contesto */
.io-chips {
  display: flex;
  gap: var(--io-space-2);
  overflow-x: auto;
  padding-bottom: var(--io-space-2);
  -webkit-overflow-scrolling: touch;
}
.io-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--io-space-2);
  min-height: 40px;
  padding: 0 var(--io-space-4);
  border: 1.5px solid var(--io-border);
  border-radius: 999px;
  background: var(--io-surface);
  color: var(--io-ink);
  font-family: inherit;
  font-size: var(--io-text-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.io-chip--selected {
  border-color: var(--io-brand);
  background: var(--io-brand-soft);
  color: var(--io-brand-strong);
}
.io-chip:focus-visible {
  outline: 3px solid var(--io-brand);
  outline-offset: 2px;
}
.io-chip__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Liste di elementi (scuole, ecc.) */
.io-list { display: flex; flex-direction: column; gap: var(--io-space-2); }
.io-list-item {
  display: flex;
  align-items: center;
  gap: var(--io-space-3);
  min-height: var(--io-touch);
  padding: var(--io-space-2) var(--io-space-3);
  border: 1.5px solid var(--io-border);
  border-radius: var(--io-radius);
  background: var(--io-surface);
}
.io-list-item__body { flex: 1; min-width: 0; }
.io-list-item__title { font-weight: 600; }
.io-list-item__subtitle { font-size: var(--io-text-sm); color: var(--io-ink-soft); }
.io-list-item__action {
  border: none;
  background: transparent;
  color: var(--io-danger);
  font-family: inherit;
  font-size: var(--io-text-sm);
  font-weight: 600;
  min-height: var(--io-touch);
  padding: 0 var(--io-space-3);
  cursor: pointer;
  border-radius: var(--io-radius);
}
.io-list-item__action:focus-visible { outline: 3px solid var(--io-brand); outline-offset: 2px; }

/* Indicatore passi dell'onboarding */
.io-steps {
  display: flex;
  justify-content: center;
  gap: var(--io-space-2);
  margin: var(--io-space-4) 0;
}
.io-steps__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--io-border);
  transition: background 150ms ease;
}
.io-steps__dot--active { background: var(--io-brand); }

.io-error {
  background: color-mix(in srgb, var(--io-danger) 10%, transparent);
  color: var(--io-danger);
  border-radius: var(--io-radius);
  padding: var(--io-space-3) var(--io-space-4);
  font-size: var(--io-text-sm);
}

/* Bottom navigation a 5 voci (docs/05-ux-principi.md): fissa in fondo, pollice,
   sempre visibile sulle pagine autenticate. "Oggi è la casa". */
.io-botnav {
  position: fixed;
  inset: auto 0 0 0; /* bottom: 0, larghezza piena */
  z-index: 50; /* sopra il contenuto, sotto eventuali overlay/modali */
  display: flex;
  background: var(--io-surface);
  border-top: 1px solid var(--io-border);
  /* Safe-area iPhone: la barra non finisce sotto la home-indicator */
  padding-bottom: env(safe-area-inset-bottom);
}
.io-botnav__voce {
  flex: 1 1 0; /* le 5 voci si dividono la larghezza in parti uguali */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px; /* target alto ≥56px */
  min-width: 64px;  /* target largo ≥64px */
  padding: var(--io-space-2) var(--io-space-1);
  color: var(--io-ink-soft); /* voci inattive */
  text-decoration: none;
  /* transizione colore sobria ≤200ms */
  transition: color 150ms ease;
}
.io-botnav__icona {
  /* "Pillola" indicatore sotto l'icona, alla Material: chiara per chi ha presbiopia,
     non solo colore (utile anche per daltonici). Dimensione fissa così non sposta nulla. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 30px;
  border-radius: 999px;
  font-size: 1.35rem;
  line-height: 1;
  background: transparent;
  /* compare/scompare in ≤200ms; con prefers-reduced-motion la regola globale azzera la durata */
  transition: background-color 160ms ease;
}
.io-botnav__etichetta {
  font-size: 0.72rem; /* etichetta piccola sotto l'icona */
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
}
.io-botnav__voce--attiva {
  color: var(--io-brand-text); /* attiva: brand come testo, contrasto AA su surface */
}
.io-botnav__voce--attiva .io-botnav__icona {
  background: var(--io-brand-soft); /* la pillola appare solo sulla voce attiva */
}
.io-botnav__voce--attiva .io-botnav__etichetta {
  font-weight: 700; /* attiva un filo più marcata, senza reflow (l'etichetta è già a larghezza piena) */
}
/* Focus visibile da tastiera, coerente col resto del design system (WCAG 2.4.7).
   outline-offset negativo per non uscire dal bordo della barra fissa. */
.io-botnav__voce:focus-visible {
  outline: 3px solid var(--io-brand);
  outline-offset: -3px;
  border-radius: var(--io-radius);
}