/*
  increment4.css — Componenti introdotti dall'Incremento 4 (Controllo dei
  propri dati): export dei dati (US-13), zona pericolosa di cancellazione
  account (US-14), piè di pagina applicativo (§2.14) e pagina informativa
  privacy (US-15). File separato, come finance.css/increment3.css per gli
  incrementi precedenti, per non toccare il CSS già verificato dal tester.
*/

/* ---------- "I tuoi dati" — export (US-13, ui-spec.md §3.4.1) ---------- */
.export-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.export-help {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: var(--space-3) 0 0;
  line-height: var(--line-height-base);
}

/* ---------- Zona pericolosa — elimina account (US-14, ui-spec.md §3.4.2) ---------- */
.section-danger {
  background: var(--color-negative-soft);
  border: var(--border-width) solid var(--color-negative);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.section-danger h2 { font-size: var(--font-size-lg); margin: 0 0 var(--space-1); color: var(--color-negative); }
.section-danger .section-desc { color: var(--color-text); }
.section-danger .section-desc strong { color: var(--color-negative); }

/* ---------- Modale di cancellazione account: invito a esportare prima (§2.7) ---------- */
.export-reminder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  background: var(--color-info-soft);
  border: var(--border-width) solid var(--color-info);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-5);
}
.export-reminder p { margin: 0; color: var(--color-info); font-size: var(--font-size-sm); }

/* ---------- Alert di successo (nuova variante di §2.6, US-14 c.3) ---------- */
.alert-success {
  background: var(--color-positive-soft);
  color: var(--color-positive);
  border: var(--border-width) solid var(--color-positive);
}

/* ---------- Piè di pagina applicativo (§2.14): su ogni pagina (US-15 c.1) ---------- */
.app-footer {
  max-width: var(--container-app-width);
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-6);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  border-top: var(--border-width) solid var(--color-border);
}
.app-footer a { color: var(--color-primary); font-weight: var(--font-weight-medium); }
.app-footer a:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Variante per le pagine pubbliche a card centrata (login/registrazione,
   informativa-privacy): contenitore più stretto, nessun bordo superiore
   perché non segue direttamente un blocco di contenuto largo. */
.app-footer--narrow { max-width: var(--container-form-width); border-top: none; }

/* ---------- Informativa privacy (US-15) — design/informativa-privacy.html ---------- */
.info-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-surface);
  border-bottom: var(--border-width) solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.toc {
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
}
.toc p { margin: 0 0 var(--space-2); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); }
.toc ol { margin: 0; padding-left: var(--space-5); font-size: var(--font-size-sm); columns: 2; column-gap: var(--space-5); }
.toc a { color: var(--color-primary); }
.toc a:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
@media (max-width: 480px) {
  .toc ol { columns: 1; }
}

section.info-section { margin-bottom: var(--space-6); }
section.info-section h2 {
  font-size: var(--font-size-lg);
  margin: 0 0 var(--space-3);
  padding-top: var(--space-2);
  border-top: var(--border-width) solid var(--color-border);
}
section.info-section:first-of-type h2 { border-top: none; padding-top: 0; }
section.info-section h3 { font-size: var(--font-size-base); margin: var(--space-4) 0 var(--space-2); }
section.info-section p { margin: 0 0 var(--space-3); }
section.info-section ul,
section.info-section ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
section.info-section li { margin-bottom: var(--space-1); }
section.info-section a { color: var(--color-primary); font-weight: var(--font-weight-medium); }
section.info-section a:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }

/* BUG-10 (docs/test-report.md): a 320-360px la tabella (min-width: 480px)
   eccede lo schermo, quindi questo contenitore diventa scorrevole
   orizzontalmente. Serve `tabindex="0"` sull'elemento (js/views/
   informativaPrivacy.js) per renderlo raggiungibile da tastiera
   (axe-core "scrollable-region-focusable"); qui solo l'indicatore di focus
   visibile per quando quel tabindex riceve il focus. */
.info-table-wrap { overflow-x: auto; margin: 0 0 var(--space-4); }
.info-table-wrap:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
table.info-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); min-width: 480px; }
.info-table caption { text-align: left; font-size: var(--font-size-xs); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.info-table th, .info-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: var(--border-width) solid var(--color-border);
  vertical-align: top;
}
.info-table thead th {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  background: var(--color-surface-alt);
}

.export-links { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
.export-links a.button-like {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--color-border-strong);
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}
.export-links a.button-like:hover { background: var(--color-surface-alt); }
.export-links a.button-like:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }