/*
  increment6.css — Correzioni dopo le prime prove (US-38 → US-50),
  ui-spec.md §3.6. File separato, come i precedenti incrementi, per non
  toccare il CSS già verificato. Caricato per ultimo.
*/

/* ---------- Intestazione a 6 voci (§3.6.0) ----------
   A 640px o meno le voci vanno a capo sotto il marchio e l'intestazione non
   resta fissa (due righe da 44px sarebbero un quarto dello schermo). */
@media (max-width: 640px) {
  .app-header { position: static; }
  .app-nav { width: 100%; gap: var(--space-1); }
  .nav-link { padding: var(--space-2); }
}

/* ---------- Riga delle azioni dei moduli (§3.6.2, US-39) ----------
   DOM = visivo = Tab: [Elimina, solo in modifica] [Annulla] [Salva].
   Salva è sempre l'ultimo e il più a destra. */
.form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: nowrap;
}
.form-actions .form-actions-delete { margin-right: auto; }
@media (max-width: 480px) {
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .button { width: 100%; }
  .form-actions .form-actions-delete { margin-right: 0; }
}

/* Passi dell'import: i due pulsanti ai lati opposti della riga (§3.6.2). */
.form-actions--steps { justify-content: space-between; }

/* ---------- Finestre di conferma ---------- */
.modal--confirm { max-width: var(--dialog-confirm-max-width); }
.modal h2:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.modal .alert { margin-bottom: var(--space-4); }
.modal .alert p { margin: 0; color: inherit; }
.button[aria-busy="true"] { cursor: progress; }
@media (max-width: 480px) {
  .modal-actions { flex-direction: column; align-items: stretch; }
  .modal-actions .button { width: 100%; }
}

/* ---------- Distanza tra i riquadri della dashboard (§3.6.4, US-41) ----------
   Ogni blocco [data-dashboard-block] dista --space-section (24px) dal
   successivo; nessun altro margine verticale tra blocchi. */
[data-dashboard-block] { margin-top: 0; margin-bottom: 0; }
[data-dashboard-block] + [data-dashboard-block] { margin-top: var(--space-section); }
.page .page-subtitle { margin-bottom: var(--space-section); } /* sottotitolo → primo blocco */
/* Il titolo fa parte del blocco: il suo margine superiore non si somma (né collassa) con la distanza tra blocchi. */
[data-dashboard-block] > .section-title:first-child { margin-top: 0; }
[data-dashboard-block] .cards-grid { margin-bottom: 0; }
[data-dashboard-block] .cards-grid, [data-dashboard-block] .month-cards { gap: var(--space-section); }
/* Le card della pagina Investimenti non sono nella dashboard: gap standard. */
.investments-list-content .cards-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); margin-bottom: 0; }
@media (max-width: 360px) {
  .investments-list-content .cards-grid { grid-template-columns: 1fr; }
}

/* ---------- Pagina Investimenti (§3.6.6): scheletro di caricamento ---------- */
.skeleton { background: var(--color-surface-alt); border-radius: var(--radius-sm); }
.skeleton-value { height: 28px; width: 60%; margin-bottom: var(--space-2); }
.investments-list-content .account-card { min-width: 0; }
.investments-list-content .account-name { overflow-wrap: anywhere; }
.investments-list-content .alert-error { align-items: flex-start; }
.investments-list-content .alert-error p { margin: 0 0 var(--space-2); }

/* ---------- Import: modello e guida in tre passi (§3.6.7, US-46) ---------- */
.option-card h2, .form-title { font-size: var(--font-size-lg); margin: 0 0 var(--space-2); }
.option-tag { display: inline-block; margin: 0 0 var(--space-2); padding: 2px 10px; border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); background: var(--color-primary-soft); color: var(--color-primary); border: var(--border-width) solid var(--color-primary); }
.option-tag-secondary { background: var(--color-surface-alt); color: var(--color-text-muted); border-color: var(--color-border-strong); }
.option-intro { margin: 0 0 var(--space-4); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.guide-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.guide-title { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-weight: var(--font-weight-bold); }
.guide-num { width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary); color: var(--color-text-on-primary); font-size: var(--font-size-sm); }
.guide-rules { margin: 0; padding-left: var(--space-5); font-size: var(--font-size-sm); }
.guide-rules li { margin-bottom: var(--space-2); }
.guide-text { margin: 0; font-size: var(--font-size-sm); }
.guide-steps .help-text { margin-top: var(--space-2); }
.guide-steps .button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; text-decoration: none; }
@media (max-width: 480px) {
  .guide-steps .button { display: flex; width: 100%; }
}

/* ---------- Import: riconoscimento, domanda sul decimale, spiegazione di blocco ---------- */
.detected-note { display: block; color: var(--color-positive); font-weight: var(--font-weight-medium); }
.recognized-intro { margin-bottom: var(--space-3); }
.count-pill.is-neutral { border-color: var(--color-border-strong); color: var(--color-text); background: var(--color-surface-alt); }
.stat-card.is-neutral { border-color: var(--color-border-strong); background: var(--color-surface-alt); color: var(--color-text); }
.question { border: var(--border-width) solid var(--color-info); background: var(--color-info-soft); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); font-size: var(--font-size-sm); color: var(--color-text); }
.question p { margin: 0 0 var(--space-2); }
.question ul { margin: 0 0 var(--space-2); padding-left: var(--space-5); }
.question .question-title { font-weight: var(--font-weight-bold); }
.question code, .blocked-reason code { background: var(--color-surface); padding: 0 4px; border-radius: var(--radius-sm); font-size: var(--font-size-xs); overflow-wrap: anywhere; }
.confirm-area { margin-top: var(--space-4); }
.blocked-reason { background: var(--color-warning-soft); border: var(--border-width) solid var(--color-warning); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); font-size: var(--font-size-sm); color: var(--color-text); }
.blocked-reason p { margin: 0 0 var(--space-2); }
.blocked-reason p:last-child { margin-bottom: 0; }
.blocked-reason ul { margin: 0; padding-left: var(--space-5); }
.blocked-reason li { margin-bottom: var(--space-1); }
.blocked-reason .blocked-title { font-weight: var(--font-weight-bold); }
/* Pulsante bloccato: bordo tratteggiato, il blocco non è affidato al solo colore. */
.button[aria-disabled="true"] { border: var(--border-width) dashed var(--color-border-strong); cursor: not-allowed; }
.button[aria-disabled="true"]:hover { background: var(--color-disabled-bg); }

/* ---------- Nomi di conto lunghi senza spazi (BUG-19, RNF-24) ---------- */
.account-card, .account-card-top > div, .account-card-mini, .account-card-mini-top > div, .cards-grid > * { min-width: 0; }
.account-name, .account-type { overflow-wrap: anywhere; }

/* ---------- US-44 c.3 / BUG-21: a schermi stretti pulsanti affiancati e spiegazione compatta, ma con il
   testo a 14 px (decisione del designer, ui-spec §3.6.10: si accorciano i testi, non il carattere). ---------- */
.blocked-reason ul.reasons { list-style: disc; }
@media (max-width: 480px) {
  .confirm-area { margin-top: var(--space-3); }
  .confirm-area .form-actions--steps { flex-direction: row; align-items: stretch; flex-wrap: nowrap; gap: var(--space-2); }
  .confirm-area .form-actions--steps .button { width: auto; flex: 1 1 0; min-width: 0; padding-left: var(--space-2); padding-right: var(--space-2); display: inline-flex; align-items: center; justify-content: center; text-align: center; box-sizing: border-box; }
  .blocked-reason { padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); font-size: var(--font-size-sm); line-height: 1.4; }
  .blocked-reason p { margin-bottom: var(--space-1); }
  .blocked-reason ul { padding-left: var(--space-4); }
  .blocked-reason li { margin-bottom: 2px; }
}

/* ---------- Righe escluse e avvisi del riepilogo (§3.6.9, US-50 → US-54) ---------- */
.excluded-box { background: var(--color-surface-alt); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); font-size: var(--font-size-sm); color: var(--color-text); }
.excluded-box h3 { font-size: var(--font-size-sm); margin: 0 0 var(--space-1); }
.excluded-intro { margin: 0 0 var(--space-2); }
.excluded-list { list-style: none; margin: 0; padding: 0; }
.excluded-list li { display: flex; gap: var(--space-2); padding: var(--space-2) 0; border-top: var(--border-width) solid var(--color-border-strong); }
.excluded-sym { flex-shrink: 0; }
.excluded-list > li > div { min-width: 0; overflow-wrap: anywhere; }
.excluded-list p { margin: 0 0 var(--space-1); }
.excluded-list p:last-child { margin-bottom: 0; }
.excluded-title { font-weight: var(--font-weight-bold); }
.excluded-list summary { cursor: pointer; color: var(--color-primary); font-weight: var(--font-weight-medium); min-height: var(--touch-target-min); display: flex; align-items: center; }
.excluded-list summary:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }
.excluded-list details p { margin-top: var(--space-1); }
.summary-text { font-size: var(--font-size-sm); margin: 0 0 var(--space-3); }
.notice { display: flex; gap: var(--space-2); background: var(--color-warning-soft); border: var(--border-width) solid var(--color-warning); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); font-size: var(--font-size-sm); color: var(--color-text); }
.notice.is-info { background: var(--color-info-soft); border-color: var(--color-info); }
.notice-sym { flex-shrink: 0; }
.notice > div { min-width: 0; overflow-wrap: anywhere; }
.notice p { margin: 0 0 var(--space-1); }
.notice p:last-child { margin-bottom: 0; }
.notice-title { font-weight: var(--font-weight-bold); }
.notice a { color: var(--color-primary); font-weight: var(--font-weight-medium); }
.notice a:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.stat-card { min-width: 0; }
/* A 320-480 px le card stanno a due colonne e con meno spazio attorno: quattro card non allungano la pagina. */
@media (max-width: 480px) {
  .summary-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .stat-card { padding: var(--space-3); }
  .stat-card .stat-value { font-size: var(--font-size-xl); }
}