/*
  base.css — Fondamenta globali (reset applicativo, tipografia di base,
  utility di accessibilità). tokens.css va importato PRIMA di questo file.
*/

/* Pagina di base (ui-spec.md §3.6.1, US-38): colonna flessibile alta quanto la
   finestra. #app prende lo spazio che resta, il footer (unico, inserito dal
   router dopo #app) chiude la finestra nelle pagine corte e segue il contenuto
   in quelle lunghe. Nessun margine/padding sul body che sommi altezza. */
body {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  min-height: 100vh;
  min-height: 100dvh;
}

h1, h2, h3 {
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
}

a {
  color: var(--color-primary);
}

/* Contenitore radice dell'app: il router sostituisce il suo contenuto a ogni
   cambio di rotta. Non ha stili propri di layout: ogni vista porta i suoi. */
#app {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
}
#app > main {
  flex: 1 0 auto;
  width: 100%;
  box-sizing: border-box;
}
#app > header { flex-shrink: 0; }

/* Testo presente nel DOM ma invisibile, utile per screen reader (es. annuncio
   di cambio pagina) senza occupare spazio visivo. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link: visibile solo al focus da tastiera. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  z-index: var(--z-header);
}
.skip-link:focus {
  left: var(--space-3);
  top: var(--space-3);
}

/*
  Stato neutro "verifica sessione" (ui-spec §4.3): nessun dato applicativo,
  nessuna intestazione. Mostrato finché getSession() non ha risposto sulle
  rotte protette.
*/
.route-loading {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.route-loading .spinner {
  width: 28px;
  height: 28px;
  border-width: 3px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  border-top-color: var(--color-primary);
  animation: spin 700ms linear infinite;
  flex-shrink: 0;
}

/* Gli attributi hidden prevalgono sempre su regole display di classe (BUG-06, BUG-11) */
[hidden] { display: none !important; }