/* ============================================================
 * Sereno — Components (v1.1.2)
 * Design system di C3DMS (C3 Document Management System).
 * Classi prefissate .ax-* per zero collisioni Bootstrap.
 * Importare tokens.css PRIMA di questo file.
 * ------------------------------------------------------------
 * ORIGINE: derivato da Aedis.Theme.Brezza **2.8.4**, stessa architettura e
 * stessi nomi di classe. Il prefisso .ax-* NON è stato rinominato: è il
 * prefisso tecnico della libreria, invisibile all'utente, e rinominarlo
 * avrebbe forkato la libreria senza guadagnare nulla.
 *
 * DELTA rispetto a Brezza 2.8.4 — **uno solo**, tre righe:
 *   .ax-input, .ax-search e .ax-otp prendono il bordo da --border-2 invece
 *   che da --border. In Sereno --border è un filo decorativo (1.51:1 in
 *   chiaro, 1.35:1 in scuro) perché i piani si separano con le ombre: il
 *   confine di un controllo attivo, che WCAG 1.4.11 vuole a 3:1, deve venire
 *   da --border-2 (3.03:1 / 3.15:1). In tokens.css lo stesso trattamento è
 *   già dato a .form-control e .form-select.
 *
 * Gli altri ritocchi che questa libreria aveva in più — via il #fff fisso dai
 * riempimenti di stato, badge della rail sulle coppie -bg/-fg, .ax-mark su
 * token semantici, tabular-nums sulle tabelle, chip che non va a capo, velo
 * del modale su primitiva, ambra come testo — **sono stati portati in Brezza
 * col bump 2.8.3**, quindi qui non sono più un delta: arrivano dalla base.
 *
 * E con la 2.8.4 arrivano dalla base anche le DUE correzioni di questo giro:
 * l'anello di fuoco sulla voce ATTIVA della barra laterale (WCAG 2.4.7, difetto
 * D-13 del collaudo #045) e «.ax-table th.is-num»/«td.is-num» allineati a destra
 * (difetto D-3, che Sereno aveva già dalla 1.1.0 in components-nav.css per
 * «.ax-listview»: ora c'è anche per «.ax-table», e le due dichiarazioni sono
 * identiche perché nascono dalla stessa regola).
 *
 * RESTA DA FARE, e non si può fare in CSS: .ax-kpi-glyph e .ax-state-glyph
 * rendono glifi decorativi col font display (un serif). Caratteri come ◐ o ⏸
 * non esistono in Newsreader e ricadono su un fallback di sistema: nel markup
 * del prodotto usare icone SVG, non caratteri.
 * ============================================================ */

/* ─── Layout shell ─── */
.ax-app {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 60px 1fr;
  min-height: 100vh;
  background: var(--bg);
}
.ax-rail {
  grid-row: 1 / span 2;
  background: var(--rail-bg);
  border-right: none;
  display: flex; flex-direction: column;
  padding: var(--sp-3) 0;
  position: sticky; top: 0; height: 100vh;
  color: var(--rail-ink);
}
.ax-rail-brand {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-4) var(--sp-4);
}
.ax-mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--ink); color: var(--bg);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 500; font-size: 17px;
}
.ax-rail-section {
  font-size: var(--fs-12); color: var(--rail-ink-3);
  font-weight: var(--fw-semibold); letter-spacing: 0.1em;
  padding: var(--sp-4) var(--sp-5) var(--sp-2);
  text-transform: none;
}
.ax-nav { padding: 0 var(--sp-2); }
.ax-nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  color: var(--ink-2); text-decoration: none;
  font-size: var(--fs-13); font-weight: var(--fw-medium);
  margin-bottom: 2px;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
  cursor: pointer; border: 1px solid transparent;
}
.ax-nav-item:hover {
  background: color-mix(in oklab, var(--primary-bg) 60%, transparent);
  color: var(--ink);
}
.ax-nav-item.is-active,
.ax-nav-item.active {
  background: var(--primary-bg);
  color: var(--primary-fg);
  font-weight: var(--fw-semibold);
  border-color: color-mix(in oklab, var(--primary) 30%, transparent);
  box-shadow: var(--shadow-xs);
}
.ax-nav-dot {
  width: 8px; height: 8px; border-radius: 3px;
  background: var(--border-strong);
  flex-shrink: 0;
}
.ax-nav-item.is-active .ax-nav-dot,
.ax-nav-item.active .ax-nav-dot { background: var(--primary); }

/* Bootstrap Icons dentro .ax-nav-item: alternativa più semantica al .ax-nav-dot.
   Stato a riposo dim, vira a --primary su hover/active per coerenza col dot. */
.ax-nav-item > .bi {
  font-size: 1.05rem;
  flex-shrink: 0;
  color: var(--ink-3);
  transition: color var(--dur-2) var(--ease-out);
}
.ax-nav-item:hover > .bi,
.ax-nav-item.is-active > .bi,
.ax-nav-item.active > .bi { color: var(--primary); }
.ax-nav-item .ax-nav-label { flex: 1; }
.ax-nav-badge {
  font-size: var(--fs-12); font-weight: var(--fw-semibold);
  padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--ink-2);
}
.ax-nav-badge.is-warn { background: var(--warning-bg); color: var(--warning-fg); }
.ax-nav-badge.is-danger { background: var(--danger-bg); color: var(--danger-fg); }
/* 2.7.0: `is-info` era usata dai prodotti (SSE, Pre-iscrizioni) ma non definita qui,
   quindi rendeva come badge neutro. Token semantici e non `--c-info-50`: la primitiva
   e' statica e in dark resterebbe chiara (lezione del 2.6.6 sul pebble bg-light-info). */
.ax-nav-badge.is-info { background: var(--primary-bg); color: var(--primary-fg); }

/* ─── Rail scura indigo (V3 "brand deciso", 2.6.0) ───
   Dentro .ax-rail la nav vive su fondo notte: ink chiari, active a velo bianco,
   icona attiva coral. Fuori dalla rail (.ax-tab-nav su card) restano le regole base.
   `.ax-rail-skin` (2.6.1) porta la SOLA pelle scura senza il layout di .ax-rail:
   per sidebar non canoniche (es. .app-sidebar Metronic di CS2016/MiaDelega). */
.ax-rail-skin {
  background: var(--rail-bg);
  border-right: none;
  color: var(--rail-ink);
}
.ax-rail .ax-mark,
.ax-rail-skin .ax-mark {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: var(--ink-on-accent);
}
.ax-rail-brand .t-mono { color: var(--rail-ink-3) !important; }
.ax-rail .ax-nav-item,
.ax-rail-skin .ax-nav-item { color: var(--rail-ink-2); }
.ax-rail .ax-nav-item:hover,
.ax-rail-skin .ax-nav-item:hover { background: var(--rail-hover); color: var(--rail-ink); }
.ax-rail .ax-nav-item.is-active,
.ax-rail .ax-nav-item.active,
.ax-rail-skin .ax-nav-item.is-active,
.ax-rail-skin .ax-nav-item.active {
  background: var(--rail-active);
  color: var(--rail-ink);
  border-color: var(--rail-active-border);
  box-shadow: none;
}
/* 2.8.4 · WCAG 2.1 AA SC 2.4.7 (Focus Visible) — L'ANELLO DI FUOCO SULLA VOCE ATTIVA.
   Il `box-shadow` dichiarato sullo STATO attivo — `--shadow-xs` fuori dalla rail, `none`
   dentro — ha specificita' maggiore del `*:focus-visible` globale di tokens.css (0,2,0 e
   0,3,0 contro 0,1,0) e si carica dopo: lo spegneva PER SEMPRE su quell'elemento, fuoco o
   non fuoco.
   🔴 Misurato tabulando, non dedotto: sul tema gemello Sereno (INT-09, difetto D-13) su
   venticinque tabulazioni ventiquattro elementi ricevevano un indicatore di fuoco e UNO
   SOLO no — la voce della barra laterale della pagina in cui ci si trova, cioe' quella dove
   il fuoco di chi naviga da tastiera atterra piu' spesso.
   Le varianti dentro la rail ci sono per forza: senza, `.ax-rail-skin .ax-nav-item.is-active`
   pareggerebbe la specificita' e vincerebbe chi sta scritto dopo. */
.ax-nav-item.is-active:focus-visible,
.ax-nav-item.active:focus-visible,
.ax-rail .ax-nav-item.is-active:focus-visible,
.ax-rail .ax-nav-item.active:focus-visible,
.ax-rail-skin .ax-nav-item.is-active:focus-visible,
.ax-rail-skin .ax-nav-item.active:focus-visible { box-shadow: var(--shadow-focus); }
.ax-rail .ax-nav-item > .bi,
.ax-rail-skin .ax-nav-item > .bi { color: var(--rail-ink-3); }
.ax-rail .ax-nav-item:hover > .bi,
.ax-rail-skin .ax-nav-item:hover > .bi { color: var(--rail-ink); }
.ax-rail .ax-nav-item.is-active > .bi,
.ax-rail .ax-nav-item.active > .bi,
.ax-rail-skin .ax-nav-item.is-active > .bi,
.ax-rail-skin .ax-nav-item.active > .bi { color: var(--rail-accent); }
.ax-rail .ax-nav-badge,
.ax-rail-skin .ax-nav-badge { background: var(--rail-badge-bg); color: var(--rail-ink); }
.ax-rail .ax-nav-badge.is-warn,
.ax-rail-skin .ax-nav-badge.is-warn { background: var(--warning-bg); color: var(--warning-fg); }
.ax-rail .ax-nav-badge.is-danger,
.ax-rail-skin .ax-nav-badge.is-danger { background: var(--danger-bg); color: var(--danger-fg); }
.ax-rail .ax-nav-badge.is-info,
.ax-rail-skin .ax-nav-badge.is-info { background: var(--primary-bg); color: var(--primary-fg); }
.ax-rail .ax-about-btn,
.ax-rail-skin .ax-about-btn { color: var(--rail-ink-3); }
.ax-rail .ax-about-btn:hover,
.ax-rail-skin .ax-about-btn:hover { color: var(--rail-ink); background: var(--rail-hover); }

/* ─── Voce di nav bloccata (2.7.0) ───
   Modulo NON acquistato dal cliente: la voce si VEDE, in grigio, non cliccabile
   (nel markup e' uno <span>, non un <a>), col lucchetto e il title che dice quale
   modulo manca. Il cliente deve percepire cosa non ha.
   Da NON confondere con il permesso operatore mancante, che invece NASCONDE la voce:
   quella e' una segregazione di compiti, non un invito all'acquisto, e ingrigire
   mostrerebbe a un operatore cosa fanno i colleghi.
   (Decisione Francesco 29/07/2026 su Aedis.SSE; regole nate in SSE.css e assorbite qui.)
   Devono stare DOPO il blocco rail: a parita' di specificita' vince l'ultima. */
.ax-rail .ax-nav-item.is-locked,
.ax-rail-skin .ax-nav-item.is-locked,
.ax-rail .ax-nav-item.is-locked:hover,
.ax-rail-skin .ax-nav-item.is-locked:hover {
  color: var(--rail-ink-3);
  background: transparent;
  cursor: not-allowed;
}
.ax-rail .ax-nav-item.is-locked > .bi,
.ax-rail-skin .ax-nav-item.is-locked > .bi,
.ax-rail .ax-nav-item.is-locked:hover > .bi,
.ax-rail-skin .ax-nav-item.is-locked:hover > .bi {
  color: var(--rail-ink-3);
  opacity: 0.7;
}
/* Fuori dalla rail (nav su fondo chiaro) */
.ax-nav-item.is-locked,
.ax-nav-item.is-locked:hover {
  color: var(--ink-3);
  background: transparent;
  cursor: not-allowed;
}
.ax-nav-item.is-locked > .bi,
.ax-nav-item.is-locked:hover > .bi { color: var(--ink-3); opacity: 0.7; }
.ax-nav-item.is-locked .ax-nav-lock {
  margin-left: auto;
  font-size: 0.85rem;
  opacity: 0.8;
}

/* ─── Gruppo di rail collassabile (2.7.0) ───
   `<details class="ax-rail-group">` + `<summary class="ax-rail-section">`.
   `.ax-rail-section` resta valida come <div> semplice: i prodotti che non adottano
   i gruppi non cambiano di una riga, l'adozione e' opt-in.
   Lo stato aperto/chiuso va reso DAL SERVER (attributo `open`) leggendo il cookie
   `ax_rail_closed` che scrive AedisRail: zero flicker, zero script inline. */
.ax-rail-group { border: 0; }
.ax-rail-group > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  list-style: none;                       /* Firefox: via il triangolo nativo */
  transition: color var(--dur-2) var(--ease-out);
}
.ax-rail-group > summary::-webkit-details-marker { display: none; }   /* Chromium/Safari */
.ax-rail-group > summary:hover { color: var(--ink-2); }
.ax-rail .ax-rail-group > summary:hover,
.ax-rail-skin .ax-rail-group > summary:hover { color: var(--rail-ink-2); }
/* Chevron disegnato in CSS: nessuna dipendenza da un icon font.
   `margin-left:auto` lo tiene a filo destro anche con un label che e' un semplice
   nodo di testo (nessun wrapper obbligatorio nel markup); l'eventuale roll-up resta
   accanto al titolo. */
.ax-rail-group > summary::after {
  content: "";
  width: 6px; height: 6px;
  flex-shrink: 0;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transform-origin: center;
  opacity: 0.7;
  transition: transform var(--dur-2) var(--ease-out);
}
.ax-rail-group[open] > summary::after { transform: rotate(45deg); }
.ax-rail-group-body { animation: ax-fade-in var(--dur-2) var(--ease-out); }

/* Roll-up sull'intestazione: numero (somma dei badge delle voci) col colore della
   severita' massima, oppure `.is-dot` per le sezioni che hanno "roba da gestire" ma
   niente di numerabile. A gruppo APERTO si nasconde: i badge delle singole voci sono
   visibili e il roll-up sarebbe una doppia contabilita'. */
.ax-rail-group-badge {
  font-size: var(--fs-12); font-weight: var(--fw-semibold);
  padding: 1px 8px; border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.ax-rail-group-badge.is-info { background: var(--primary-bg); color: var(--primary-fg); }
.ax-rail-group-badge.is-warn { background: var(--warning-bg); color: var(--warning-fg); }
.ax-rail-group-badge.is-danger { background: var(--danger-bg); color: var(--danger-fg); }
.ax-rail-group-badge.is-dot {
  width: 8px; height: 8px; min-width: 0;
  padding: 0; border-radius: 50%;
  background: var(--ink-3);
  font-size: 0;                            /* niente testo, e' un puntino */
}
.ax-rail-group-badge.is-dot.is-info { background: var(--primary); }
.ax-rail-group-badge.is-dot.is-warn { background: var(--warning); }
.ax-rail-group-badge.is-dot.is-danger { background: var(--danger); }
.ax-rail-group[open] > summary .ax-rail-group-badge { display: none; }

/* Varianti in rail scura: piene, come gia' fanno i .ax-nav-badge (il velo chiaro
   non basterebbe a leggere una severita' sul fondo notte). */
.ax-rail .ax-rail-group-badge,
.ax-rail-skin .ax-rail-group-badge { background: var(--rail-badge-bg); color: var(--rail-ink); }
.ax-rail .ax-rail-group-badge.is-info,
.ax-rail-skin .ax-rail-group-badge.is-info { background: var(--primary-bg); color: var(--primary-fg); }
.ax-rail .ax-rail-group-badge.is-warn,
.ax-rail-skin .ax-rail-group-badge.is-warn { background: var(--warning-bg); color: var(--warning-fg); }
.ax-rail .ax-rail-group-badge.is-danger,
.ax-rail-skin .ax-rail-group-badge.is-danger { background: var(--danger-bg); color: var(--danger-fg); }
.ax-rail .ax-rail-group-badge.is-dot,
.ax-rail-skin .ax-rail-group-badge.is-dot { background: var(--rail-ink-3); }
.ax-rail .ax-rail-group-badge.is-dot.is-info,
.ax-rail-skin .ax-rail-group-badge.is-dot.is-info { background: var(--primary); }
.ax-rail .ax-rail-group-badge.is-dot.is-warn,
.ax-rail-skin .ax-rail-group-badge.is-dot.is-warn { background: var(--warning); }
.ax-rail .ax-rail-group-badge.is-dot.is-danger,
.ax-rail-skin .ax-rail-group-badge.is-dot.is-danger { background: var(--danger); }

/* ─── Header ─── */
.ax-header {
  height: 60px;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-6);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky; top: 0; z-index: var(--z-sticky);
}
.ax-breadcrumb {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-13); color: var(--ink-3);
}
.ax-breadcrumb b { color: var(--ink); font-weight: var(--fw-semibold); }
.ax-breadcrumb .sep { color: var(--ink-3); opacity: 0.6; }

.ax-search {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 7px 12px;
  background: var(--surface);
  border: 1px solid var(--border-2);     /* vedi .ax-input */
  border-radius: var(--r-md);
  min-width: 320px; max-width: 480px;
  color: var(--ink-3); font-size: var(--fs-13);
  cursor: pointer;
  transition: border-color var(--dur-2);
}
.ax-search:hover { border-color: var(--border-2); }
.ax-search .kbd {
  margin-left: auto; padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: var(--fs-12);
  background: var(--surface-2); color: var(--ink-3);
}

.ax-icon-btn {
  width: 38px; height: 38px; border-radius: var(--r-md);
  background: transparent; border: 1px solid transparent;
  display: grid; place-items: center;
  color: var(--ink-2); cursor: pointer;
  transition: background var(--dur-2), color var(--dur-2), border-color var(--dur-2);
  position: relative;
}
.ax-icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.ax-icon-btn .ax-dot {
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
}

.ax-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--primary);
  color: var(--ink-on-accent);
  display: grid; place-items: center;
  font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: 13px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

/* ─── Buttons ─── */
.ax-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  padding: 10px 16px;
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: var(--fs-13); font-weight: var(--fw-semibold);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-2), border-color var(--dur-2), color var(--dur-2), box-shadow var(--dur-2);
  white-space: nowrap;
  text-decoration: none;
  min-height: 38px;
}
.ax-btn.is-primary {
  background: var(--primary); color: var(--ink-on-accent);
  box-shadow: var(--shadow-sm);
}
.ax-btn.is-primary:hover { background: var(--primary-hover); }
.ax-btn.is-secondary {
  background: var(--surface); color: var(--ink);
  border-color: var(--border-2);
}
.ax-btn.is-secondary:hover { border-color: var(--ink-3); background: var(--surface-2); }
.ax-btn.is-ghost {
  background: transparent; color: var(--ink-2);
}
.ax-btn.is-ghost:hover { background: var(--surface-2); color: var(--ink); }
.ax-btn.is-danger {
  background: var(--danger); color: var(--ink-on-accent);
}
.ax-btn.is-accent {
  background: var(--accent); color: var(--ink-on-accent);
}
.ax-btn.is-link {
  background: transparent; color: var(--primary); padding: 0; min-height: 0;
}
.ax-btn.is-link:hover { color: var(--primary-hover); text-decoration: underline; text-underline-offset: 3px; }
.ax-btn.is-sm { padding: 6px 11px; min-height: 30px; font-size: var(--fs-12); border-radius: var(--r-sm); }
.ax-btn.is-lg { padding: 13px 20px; min-height: 46px; font-size: var(--fs-15); border-radius: var(--r-lg); }
.ax-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ─── Inputs ─── */
.ax-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); }
.ax-label {
  font-size: var(--fs-12); color: var(--ink-2);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
}
.ax-input {
  display: block; width: 100%;
  padding: 11px 14px;
  background: var(--surface);
  border: 1.5px solid var(--border-2);   /* Sereno: --border è un filo decorativo (1.51:1); il confine di un controllo attivo deve stare a 3:1 */
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: var(--font-sans); font-size: var(--fs-14);
  transition: border-color var(--dur-2), box-shadow var(--dur-2);
}
.ax-input:focus { border-color: var(--primary); box-shadow: var(--shadow-focus); outline: none; }
/* `input-validation-error` e' l'alias di `.is-invalid` per jquery.validate.unobtrusive,
   che usa quella e non la classe Bootstrap: vedi il blocco in tokens.css (2.8.2). */
.ax-input.is-invalid,
.ax-input.input-validation-error { border-color: var(--danger); }
.ax-input.input-validation-error:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 30%, transparent);
}
.ax-hint { font-size: var(--fs-12); color: var(--ink-3); }
.ax-error { font-size: var(--fs-12); color: var(--danger); display: flex; align-items: center; gap: 6px; }

/* ─── Card ─── */
.ax-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
}
.ax-card.is-flat { box-shadow: none; }
.ax-card.is-tint { background: var(--surface-2); }
.ax-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-4);
  gap: var(--sp-3);
}
.ax-card-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-20); letter-spacing: -0.01em;
  margin: 0; color: var(--ink);
}
/* Sottolineatura coral (V3, 2.6.0) — la firma dell'accent sui titoli card.
   2.6.3: estesa agli heading dentro .card-header .card-title (markup Metronic
   dei prodotti in coesistenza, es. CS2016/MiaDelega — il div .card-title è
   flex, quindi la riga va sull'heading, non sul contenitore). */
.ax-card-title::after,
.card-header .card-title h1::after,
.card-header .card-title h2::after,
.card-header .card-title h3::after,
.card-header .card-title h4::after,
.card-header .card-title h5::after {
  content: ""; display: block;
  width: 34px; height: 3px; border-radius: 2px;
  background: var(--accent);
  margin-top: 6px;
}

/* ─── KPI ─── */
.ax-kpi {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
  overflow: hidden;
}
.ax-kpi-pebble {
  position: absolute; top: -30px; right: -30px;
  width: 90px; height: 90px; border-radius: 50%;
  background: var(--surface-3);
}
.ax-kpi.is-primary  .ax-kpi-pebble { background: var(--primary-bg); }
.ax-kpi.is-accent   .ax-kpi-pebble { background: var(--accent-bg); }
.ax-kpi.is-warning  .ax-kpi-pebble { background: var(--warning-bg); }
.ax-kpi.is-success  .ax-kpi-pebble { background: var(--success-bg); }
.ax-kpi-glyph {
  position: absolute; top: 18px; right: 22px;
  font-family: var(--font-display); font-size: 22px;
  color: var(--ink-3);
}
.ax-kpi.is-primary  .ax-kpi-glyph { color: var(--primary); }
.ax-kpi.is-accent   .ax-kpi-glyph { color: var(--accent); }
.ax-kpi.is-warning  .ax-kpi-glyph { color: var(--warning); }
.ax-kpi.is-success  .ax-kpi-glyph { color: var(--success); }
.ax-kpi-label {
  font-size: var(--fs-13); color: var(--ink-3); font-weight: var(--fw-medium);
  position: relative;
}
.ax-kpi-value {
  font-family: var(--font-sans); font-weight: var(--fw-bold);
  font-size: var(--fs-56); letter-spacing: -0.03em; line-height: 0.95;
  margin-top: 4px; color: var(--ink); position: relative;
  font-variant-numeric: tabular-nums;
}
.ax-kpi.is-primary  .ax-kpi-value { color: var(--primary); }
.ax-kpi.is-accent   .ax-kpi-value { color: var(--accent); }
.ax-kpi.is-warning  .ax-kpi-value { color: var(--warning); }
.ax-kpi.is-success  .ax-kpi-value { color: var(--success); }
.ax-kpi-sub {
  font-size: var(--fs-12); color: var(--ink-3); margin-top: var(--sp-3); position: relative;
}

/* ─── Auto-styling KPI per markup Bootstrap esistente ────────────────────
 * Intercetta i pattern legacy `.card.bg-light-*` usati in tutta la suite
 * SocialWS per i KPI e li ridipinge come .ax-kpi senza dover refactorare
 * il markup di ogni view. Il "pebble" colorato viene reso via ::before,
 * gli h2/h3 numerici diventano display Fraunces grandi.
 * ──────────────────────────────────────────────────────────────────────── */
.card.bg-light-primary,
.card.bg-light-success,
.card.bg-light-warning,
.card.bg-light-danger,
.card.bg-light-info,
.card.bg-light-secondary {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.card.bg-light-primary::before,
.card.bg-light-success::before,
.card.bg-light-warning::before,
.card.bg-light-danger::before,
.card.bg-light-info::before,
.card.bg-light-secondary::before {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.card.bg-light-primary::before   { background: var(--primary-bg); }
.card.bg-light-success::before   { background: var(--success-bg); }
.card.bg-light-warning::before   { background: var(--warning-bg); }
.card.bg-light-danger::before    { background: var(--danger-bg); }
.card.bg-light-info::before      { background: var(--primary-bg); } /* semantica, non primitiva: in dark si adatta (2.6.6) */
.card.bg-light-secondary::before { background: var(--bg-tint); }

/* H2 / H3 numerici dentro questi card → display Fraunces grande tabular */
.card.bg-light-primary h2,
.card.bg-light-success h2,
.card.bg-light-warning h2,
.card.bg-light-danger h2,
.card.bg-light-info h2,
.card.bg-light-secondary h2,
.card.bg-light-primary h3,
.card.bg-light-success h3,
.card.bg-light-warning h3,
.card.bg-light-danger h3,
.card.bg-light-info h3,
.card.bg-light-secondary h3 {
  font-family: var(--font-sans) !important;
  font-weight: var(--fw-bold) !important;
  font-size: var(--fs-40) !important;
  letter-spacing: -0.03em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
}

/* Card-body resta sopra il pebble */
.card.bg-light-primary > .card-body,
.card.bg-light-success > .card-body,
.card.bg-light-warning > .card-body,
.card.bg-light-danger > .card-body,
.card.bg-light-info > .card-body,
.card.bg-light-secondary > .card-body {
  position: relative;
  z-index: 1;
}

/* ─── Chip / Badge ─── */
.ax-chip {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;                  /* 2.8.3: in una tabella larga "Da assegnare" si spezzava */
  padding: 4px 10px; border-radius: var(--r-pill);
  font-size: var(--fs-12); font-weight: var(--fw-semibold);
  background: var(--surface-3); color: var(--ink-2);
}
.ax-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ax-chip.is-primary { background: var(--primary-bg); color: var(--primary-fg); }
.ax-chip.is-accent  { background: var(--accent-bg);  color: var(--accent-fg); }
.ax-chip.is-warning { background: var(--warning-bg); color: var(--warning-fg); }
.ax-chip.is-success { background: var(--success-bg); color: var(--success-fg); }
.ax-chip.is-danger  { background: var(--danger-bg);  color: var(--danger-fg); }
.ax-chip.is-outline { background: transparent; border: 1px solid var(--border-2); color: var(--ink-2); }

/* ─── Alert / Banner ─── */
.ax-alert {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
}
.ax-alert-icon {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--ink-2);
  font-weight: var(--fw-bold);
}
.ax-alert-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-16); letter-spacing: -0.01em;
}
.ax-alert-body { font-size: var(--fs-13); color: var(--ink-2); margin-top: 2px; }
.ax-alert.is-info    { background: var(--primary-bg); border-color: color-mix(in oklab, var(--primary) 30%, var(--border)); }
.ax-alert.is-info    .ax-alert-icon { background: var(--primary); color: var(--ink-on-accent); }
.ax-alert.is-info    .ax-alert-title { color: var(--primary-fg); }
.ax-alert.is-success { background: var(--success-bg); border-color: color-mix(in oklab, var(--success) 30%, var(--border)); }
.ax-alert.is-success .ax-alert-icon { background: var(--success); color: var(--ink-on-accent); }
.ax-alert.is-success .ax-alert-title { color: var(--success-fg); }
.ax-alert.is-warning { background: var(--warning-bg); border-color: color-mix(in oklab, var(--warning) 30%, var(--border)); }
.ax-alert.is-warning .ax-alert-icon { background: var(--warning); color: var(--ink-on-accent); }
.ax-alert.is-warning .ax-alert-title { color: var(--warning-fg); }
.ax-alert.is-danger  { background: var(--danger-bg);  border-color: color-mix(in oklab, var(--danger) 30%, var(--border)); }
.ax-alert.is-danger  .ax-alert-icon { background: var(--danger);  color: var(--ink-on-accent); }
.ax-alert.is-danger  .ax-alert-title { color: var(--danger-fg); }

/* ─── Table ─── */
.ax-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-13);
  font-variant-numeric: tabular-nums;   /* 2.8.3: le cifre si incolonnano senza chiederlo cella per cella */
}
.ax-table thead th {
  text-align: left; padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-12); font-weight: var(--fw-semibold);
  color: var(--primary-fg); letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  background: var(--primary-bg);
  text-transform: uppercase;
}
.ax-table tbody td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  color: var(--ink); vertical-align: middle;
}
.ax-table tbody tr:hover td { background: var(--primary-bg); }
.ax-table .col-mono { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-2); }
/* 2.8.4 · D-3 — LA COLONNA DI NUMERI SI ALLINEA A DESTRA, intestazione E cella.
   Brezza non dichiarava niente del genere, quindi ogni colonna di numeri della suite aveva
   la testata a sinistra e i valori dove capitava: le unita' non si leggono in verticale.
   Corretto nel tema gemello Sereno con la 1.1.0 e portato qui.
   🪤 Prima di adottarla in un prodotto, cercare come quel prodotto chiama oggi la colonna:
   su C3DMS si chiamava `.mk-num` e in una vista c'era una cella raddrizzata a mano con uno
   `style` — cioe' qualcuno si era accorto che il marcatore non faceva niente e aveva
   rattoppato QUELLA RIGA invece della regola. I rattoppi cosi' vanno via nello stesso
   passaggio, o restano a litigare. */
.ax-table th.is-num,
.ax-table td.is-num { text-align: right; }

/* ─── Tabs ─── */
.ax-tabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-5);
}
.ax-tab {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-13); font-weight: var(--fw-medium);
  color: var(--ink-3); cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border-left: 0; border-right: 0; border-top: 0;
  transition: color var(--dur-2), border-color var(--dur-2);
}
.ax-tab:hover { color: var(--ink); }
.ax-tab.is-active { color: var(--ink); border-bottom-color: var(--primary); font-weight: var(--fw-semibold); }
.ax-tab .ax-tab-badge {
  font-size: var(--fs-11); font-weight: var(--fw-semibold);
  background: var(--surface-3); color: var(--ink-2);
  padding: 1px 7px; border-radius: var(--r-pill);
}
.ax-tab.is-active .ax-tab-badge { background: var(--primary-bg); color: var(--primary-fg); }

/* ─── AI Panel (first-class citizen) ─── */
.ax-ai-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
  position: relative;
  overflow: hidden;
}
.ax-ai-panel::before {
  content: ""; position: absolute; top: -40px; right: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--primary) 18%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.ax-ai-head {
  display: flex; align-items: center; gap: var(--sp-3);
  position: relative;
}
.ax-ai-mark {
  width: 28px; height: 28px; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: var(--ink-on-accent);
  display: grid; place-items: center;
  font-weight: var(--fw-bold); font-size: 12px;
}
.ax-ai-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-16); letter-spacing: -0.01em; margin: 0;
}
.ax-ai-tag {
  margin-left: auto;
  font-family: var(--font-mono); font-size: var(--fs-11);
  color: var(--ink-3); padding: 2px 7px;
  border: 1px solid var(--border); border-radius: var(--r-xs);
}
.ax-ai-message {
  font-size: var(--fs-13); color: var(--ink-2); line-height: var(--lh-base);
  position: relative;
}
.ax-ai-input {
  margin-top: auto;
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 9px 12px;
  position: relative;
}
.ax-ai-input .arrow { color: var(--primary); font-weight: var(--fw-bold); }
.ax-ai-input input {
  flex: 1; border: 0; background: transparent;
  font-family: var(--font-sans); font-size: var(--fs-13);
  color: var(--ink); outline: none;
}
.ax-ai-input input::placeholder { color: var(--ink-3); }
.ax-ai-input .kbd {
  font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-3);
  padding: 1px 6px; border: 1px solid var(--border); border-radius: var(--r-xs);
  background: var(--surface);
}

/* ─── Drawer (right side) ─── */
.ax-drawer-backdrop {
  position: fixed; inset: 0; background: color-mix(in oklab, var(--c-neutral-950) 36%, transparent);
  z-index: var(--z-modal); backdrop-filter: blur(2px);
  animation: ax-fade-in var(--dur-3) var(--ease-out);
}
.ax-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(540px, 96vw);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-modal);
  display: flex; flex-direction: column;
  animation: ax-slide-right var(--dur-3) var(--ease-spring);
}
.ax-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--border);
}
.ax-drawer-body { padding: var(--sp-6); overflow: auto; flex: 1; }
.ax-drawer-foot {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border);
  display: flex; gap: var(--sp-3); justify-content: flex-end;
  background: var(--surface-2);
}

/* ─── Modal (centered dialog) ─── */
.ax-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(520px, 92vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-modal);
  overflow: hidden;
  animation: ax-pop var(--dur-3) var(--ease-spring);
}

/* ─── Toasts ─── */
.ax-toast-stack {
  position: fixed; bottom: var(--sp-5); right: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2);
  z-index: var(--z-toast);
}
.ax-toast {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: var(--sp-3) var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-13); color: var(--ink);
  min-width: 280px;
  animation: ax-slide-up var(--dur-3) var(--ease-out);
}
.ax-toast .dot { width: 8px; height: 8px; border-radius: 50%; }
.ax-toast.is-success .dot { background: var(--success); }
.ax-toast.is-warning .dot { background: var(--warning); }
.ax-toast.is-danger  .dot { background: var(--danger); }
.ax-toast.is-info    .dot { background: var(--primary); }

/* ─── Segmented control (ThemeSwitcher) ─── */
.ax-segmented {
  display: inline-flex; padding: 3px;
  background: var(--surface-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
}
.ax-segmented button {
  background: transparent; border: 0; cursor: pointer;
  padding: 6px 14px;
  font-family: var(--font-sans); font-size: var(--fs-12); font-weight: var(--fw-medium);
  color: var(--ink-2);
  border-radius: var(--r-pill);
  transition: background var(--dur-2), color var(--dur-2);
}
.ax-segmented button.is-active {
  background: var(--surface); color: var(--ink);
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-xs);
}

/* ─── Empty / loading / error states ─── */
.ax-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: var(--sp-12) var(--sp-6);
  color: var(--ink-2);
}
.ax-state-glyph {
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2);
  color: var(--ink-3);
  margin-bottom: var(--sp-4);
  font-family: var(--font-display); font-size: 32px;
}
.ax-state-title {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-20); letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 var(--sp-2);
}
.ax-state-body {
  font-size: var(--fs-13); color: var(--ink-3); max-width: 380px; line-height: var(--lh-base); margin: 0 0 var(--sp-5);
}

.ax-skel {
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: ax-skel 1.2s linear infinite;
  border-radius: var(--r-sm);
}

/* ─── Animations ─── */
@keyframes ax-fade-in { from {opacity:0} to {opacity:1} }
@keyframes ax-slide-right { from {transform:translateX(20px); opacity:0} to {transform:translateX(0); opacity:1} }
@keyframes ax-slide-up { from {transform:translateY(8px); opacity:0} to {transform:translateY(0); opacity:1} }
@keyframes ax-pop { from {transform:translate(-50%,-50%) scale(0.95); opacity:0} to {transform:translate(-50%,-50%) scale(1); opacity:1} }
@keyframes ax-skel { 0% {background-position: 100% 0} 100% {background-position: -100% 0} }

/* ─── Misc utilities ─── */
.ax-divider { height: 1px; background: var(--border); border: 0; margin: var(--sp-5) 0; }
.ax-stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.ax-row { display: flex; align-items: center; gap: var(--sp-3); }
.ax-spacer { flex: 1; }

/* ─── Mobile shell (Sportello lavoratore) ─── */
.ax-mobile {
  width: 390px; min-height: 844px;
  background: var(--bg);
  margin: 0 auto;
  font-size: 15px;
}
.ax-mobile-status {
  height: 44px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--sp-5); font-family: var(--font-sans);
  font-size: var(--fs-14); font-weight: var(--fw-semibold);
}
.ax-mobile-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.ax-mobile-body { padding: var(--sp-5); }
.ax-mobile-tabbar {
  position: sticky; bottom: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: var(--sp-3) var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.ax-mobile-tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: var(--fs-11); color: var(--ink-3); text-decoration: none;
}
.ax-mobile-tabbar a.is-active { color: var(--primary); font-weight: var(--fw-semibold); }

/* ============================================= */
/* Info/About — versione app (popover suite-wide) */
/* Trigger + popover con Aggiornato / Build / Ambiente. Markup: partial _AedisAbout del consumer. */
/* ============================================= */
.ax-about { position: relative; display: inline-flex; }
.ax-about-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none; cursor: pointer;
  color: var(--ink-3); font-family: var(--font-mono); font-size: var(--fs-11);
  letter-spacing: 0.04em; padding: 4px 6px; border-radius: var(--r-sm);
  transition: color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.ax-about-btn:hover { color: var(--primary); background: var(--surface-2); }
.ax-about-btn .bi { font-size: 13px; }
.ax-about-pop {
  position: absolute; z-index: var(--z-tooltip);
  min-width: 268px; padding: var(--sp-4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  display: none; animation: ax-pop var(--dur-3) var(--ease-spring);
}
.ax-about.is-open .ax-about-pop { display: block; }
/* default: apre verso l'alto ancorato a sinistra (adatto al footer sidebar) */
.ax-about-pop { bottom: calc(100% + 8px); left: 0; }
.ax-about-pop.is-down { bottom: auto; top: calc(100% + 8px); }
.ax-about-pop.is-right { left: auto; right: 0; }
.ax-about-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-3); }
.ax-about-head .ax-mark { width: 30px; height: 30px; font-size: 15px; }
.ax-about-title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-15); color: var(--ink); line-height: 1.1; }
.ax-about-sub { font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-3); letter-spacing: 0.04em; }
.ax-about-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); font-size: var(--fs-13); padding: 4px 0; }
.ax-about-row .k { color: var(--ink-3); }
.ax-about-row .v { color: var(--ink); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.ax-about-row .v.t-mono { font-family: var(--font-mono); font-size: var(--fs-12); }
.ax-about-env { font-family: var(--font-mono); font-size: var(--fs-12); font-weight: var(--fw-semibold); }
.ax-about-env.is-prod { color: var(--success); }
.ax-about-env.is-test { color: var(--warning-fg); }
.ax-about-env.is-dev  { color: var(--ink-3); }
.ax-about-foot { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border); font-size: var(--fs-12); color: var(--ink-3); }

/* ─── Font-size utilities (scala Brezza) ───
   Utility neutre per testi piccoli, sui token della scala. Sostituiscono le classi
   Metronic .fs-7/.fs-8/.fs-9 (che venivano da shim locali per-prodotto) nei rollout
   in dismissione Metronic. !important per parità di specificità con lo shim rimosso. */
.ax-fs-11 { font-size: var(--fs-11) !important; }
.ax-fs-12 { font-size: var(--fs-12) !important; }
.ax-fs-13 { font-size: var(--fs-13) !important; }
.ax-fs-14 { font-size: var(--fs-14) !important; }
.ax-fs-15 { font-size: var(--fs-15) !important; }

/* ================================================================= */
/* Auth shell — passi di autenticazione su PAGINA DEDICATA (2.8.0)    */
/*                                                                    */
/* STANDARD DI SUITE: i passi che precedono l'accesso vero e proprio  */
/* (verifica del secondo fattore, enrollment 2FA, cambio password     */
/* obbligatorio) NON si servono dentro l'app shell. Mostrare sidebar  */
/* e menu a chi non ha ancora completato il login e' una falsa        */
/* affordance: l'operatore vede una navigazione che il middleware gli */
/* nega ad ogni click. Segnalato al collaudo manuale CS2016 del       */
/* 29/07/2026 (OSS-M05) e promosso a componente qui.                  */
/*                                                                    */
/* Il guscio e' volutamente povero: marchio, uscita, contenuto        */
/* centrato, footer. L'uscita sta nella barra e non nel corpo perche' */
/* e' strutturale — chi si presenta senza telefono deve poter liberare*/
/* la postazione, e chiudere il browser lascerebbe vivo il cookie.    */
/* ================================================================= */
.ax-auth {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg);
}
.ax-auth-strip {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--sp-3); padding: var(--sp-5) var(--sp-8);
  border-bottom: 1px solid var(--border); background: var(--surface);
}
.ax-auth-brand { display: flex; align-items: center; gap: var(--sp-3); }
.ax-auth-brand-name {
  font-family: var(--font-display); font-size: var(--fs-20); font-weight: var(--fw-medium);
  letter-spacing: -0.015em; color: var(--ink); line-height: var(--lh-tight);
}
.ax-auth-brand-sub {
  font-family: var(--font-mono); font-size: var(--fs-11); color: var(--ink-3);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.ax-auth-exit {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-14); color: var(--ink-2); text-decoration: none;
  transition: color var(--dur-2) var(--ease-out);
}
.ax-auth-exit:hover { color: var(--primary); }
.ax-auth-body {
  flex: 1; display: flex; justify-content: center; align-items: flex-start;
  padding: var(--sp-6) var(--sp-4);
}
/* Colonna singola per la verifica; .is-wide per l'enrollment (QR + istruzioni affiancati) */
.ax-auth-content { width: 100%; max-width: 520px; }
.ax-auth-content.is-wide { max-width: 980px; }
.ax-auth-foot {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: var(--sp-2); padding: var(--sp-4) var(--sp-6);
  font-size: var(--fs-12); color: var(--ink-3);
}
.ax-auth-foot a { color: var(--ink-2); text-decoration: none; }
.ax-auth-foot a:hover { color: var(--primary); }

/* Identita di chi sta verificando: iniziali + nome + login. Sopra il campo, cosi' chi
   ha piu' utenze si accorge PRIMA di digitare che sta entrando con quella sbagliata. */
.ax-auth-who { text-align: center; margin-bottom: var(--sp-5); }
.ax-auth-who .ax-avatar {
  width: 72px; height: 72px; font-size: var(--fs-24); margin: 0 auto var(--sp-4);
}
.ax-auth-who-name { font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--ink); }
.ax-auth-who-login { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-3); }

@media (max-width: 575px) {
  .ax-auth-strip { padding: var(--sp-4) var(--sp-5); }
  .ax-auth-body  { padding: var(--sp-4) var(--sp-3); }
  .ax-auth-foot  { padding: var(--sp-4); }
}

/* ─── Campo OTP ───
   Cifre monospace distanziate: si rilegge il codice mentre lo si copia dal telefono.
   Il letter-spacing aggiunge spazio anche DOPO l'ultima cifra, che sbilancia il
   centraggio a sinistra: il text-indent lo ricompensa. */
.ax-otp {
  display: block; width: 100%; max-width: 260px; margin: 0 auto;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-mono); font-size: var(--fs-28); font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.32em; text-indent: 0.32em; text-align: center;
  color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--border-2); border-radius: var(--r-md);   /* vedi .ax-input */
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.ax-otp:focus { outline: none; border-color: var(--primary); box-shadow: var(--shadow-focus); }
.ax-otp::placeholder { color: var(--ink-3); font-weight: var(--fw-regular); }
.ax-otp.is-invalid,
.ax-otp.input-validation-error { border-color: var(--danger); }
.ax-otp.input-validation-error:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 30%, transparent);
}
.ax-otp-hint {
  margin-top: var(--sp-2); text-align: center;
  font-size: var(--fs-12); color: var(--ink-3);
}