/*
 * SETTINGS V5 PROD — CAP-DEV-1.1 pilot
 *
 * Namespace: .set-*
 * Scope: body.has-topbar-v5 (settings.html content area)
 *
 * Filosofia: MINIMALE — riusa .card / .stat-card / .form-* / .r-section / .btn*
 * di globals.css e system.css. Questo foglio copre SOLO:
 *   - .set-table         — tabella crediti (header/th statici; tbody = JS-generated)
 *   - .set-modal__*      — backdrop/panel interni modale eliminazione account
 *   - .set-page-body     — spacing e layout pagina
 *   - .set-upgrade       — fix bordo invisibile sezione Upgrade Pro + accenti V5
 *   - .set-danger-card   — card Elimina Account (warning accent)
 *   - .set-form-grid     — grid form multi-colonna (Dati Personali, Fatturazione)
 *   - .set-credits-*     — header saldo crediti
 *   - .set-readonly-input — input sola lettura (stato visivo V5)
 *
 * Light + dark parity via token chain (var(--surface), var(--hair), var(--ink-*)).
 * Nessun valore colore hardcoded (D17).
 *
 * Sess 136 — 2026-05-20
 * Linked from: settings.html (ULTIMO stylesheet, dopo sidebar-v5-prod.css)
 */

/* ============================================================
 * Page layout tweak (V5 content area)
 * ============================================================ */
body.has-topbar-v5 .set-page-body {
  max-width: 840px;
}

/* Card margin-bottom uniforme (rimpiazza style="margin-bottom: 30px;") */
body.has-topbar-v5 .set-card-section {
  margin-bottom: var(--space-6);
}

body.has-topbar-v5 .set-card-section:last-of-type {
  margin-bottom: calc(var(--space-6) * 4);
}

/* ============================================================
 * Form grid — layout multi-colonna tokenizzato
 * ============================================================ */
body.has-topbar-v5 .set-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
}

body.has-topbar-v5 .set-form-grid--single {
  display: grid;
  gap: var(--space-5);
}

body.has-topbar-v5 .set-form-grid .set-full-col {
  grid-column: 1 / -1;
}

/* Margin-top per il blocco azione sotto la griglia */
body.has-topbar-v5 .set-form-actions {
  margin-top: var(--space-5);
}

/* ============================================================
 * Input sola lettura (readonly) — stile V5
 * ============================================================ */
body.has-topbar-v5 .set-readonly-input {
  background: var(--surface-alt, var(--surface)) !important;
  cursor: not-allowed;
  color: var(--ink-500);
}

[data-theme="dark"] body.has-topbar-v5 .set-readonly-input,
body.has-topbar-v5 [data-theme="dark"] .set-readonly-input {
  background: var(--surface-alt, var(--surface)) !important;
  color: var(--ink-500);
}

/* ============================================================
 * Stats grid — Piano & Utilizzo (5 stat-card)
 * ============================================================ */
body.has-topbar-v5 .set-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

/* Accento spine V5 sul valore colorato (Plan Name) */
body.has-topbar-v5 .set-stat-value--accent {
  color: var(--spine, var(--color-primary));
}

/* Stat value colorato success (saldo crediti) */
body.has-topbar-v5 .set-stat-value--success {
  color: var(--color-success-text);
}

/* ============================================================
 * Credits header — saldo totale + pulsante ricarica
 * ============================================================ */
body.has-topbar-v5 .set-credits-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

body.has-topbar-v5 .set-credits-label {
  font-size: var(--font-size-sm);
  color: var(--ink-500);
}

body.has-topbar-v5 .set-credits-total {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-success-text);
  line-height: 1;
}

body.has-topbar-v5 .set-credits-reload {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-4);
  background: var(--color-success-text);
  color: var(--paper);
  border-radius: var(--r-md);
  text-decoration: none;
  font-size: var(--font-size-xs);
  font-weight: 600;
  transition: opacity 0.15s;
}
body.has-topbar-v5 .set-credits-reload:hover { opacity: 0.85; }

[data-theme="dark"] body.has-topbar-v5 .set-credits-reload {
  color: var(--paper);
}

/* ============================================================
 * Table — tabella crediti (solo elementi statici: table/thead/th)
 * Le righe <tr> sono generate dal JS — NON toccare.
 * ============================================================ */
body.has-topbar-v5 .set-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

body.has-topbar-v5 .set-table thead tr {
  border-bottom: 1px solid var(--hair-strong, var(--color-border));
}

body.has-topbar-v5 .set-table th {
  padding: var(--space-2) var(--space-3);
  color: var(--ink-500);
  font-weight: 600;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
}

[data-theme="dark"] body.has-topbar-v5 .set-table thead tr {
  border-bottom-color: var(--hair-strong);
}

[data-theme="dark"] body.has-topbar-v5 .set-table th {
  color: var(--ink-500);
}

/* ============================================================
 * Upgrade Pro — fix bordo invisibile (bg == border era il bug)
 * + accenti V5 semantici
 * ============================================================ */
body.has-topbar-v5 .set-upgrade {
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-text);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

body.has-topbar-v5 .set-upgrade__title {
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: 700;
  color: var(--color-success-text);
  margin: 0 0 var(--space-3);
}

body.has-topbar-v5 .set-upgrade__sub {
  font-size: var(--font-size-sm);
  color: var(--color-success-text);
  margin: 0 0 var(--space-5);
  opacity: 0.9;
}

body.has-topbar-v5 .set-upgrade__price-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

body.has-topbar-v5 .set-upgrade__price {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-success-text);
  line-height: 1;
}

body.has-topbar-v5 .set-upgrade__price-suffix {
  font-size: var(--font-size-sm);
  font-weight: 400;
  color: var(--color-success-text);
  opacity: 0.8;
}

[data-theme="dark"] body.has-topbar-v5 .set-upgrade {
  border-color: var(--color-success-text);
}

/* ============================================================
 * Danger card — Elimina Account (accent warning V5)
 * ============================================================ */
body.has-topbar-v5 .set-danger-card {
  border-left: 3px solid var(--flag-high);
  margin-bottom: calc(var(--space-6) * 4);
}

/* ============================================================
 * Modal — backdrop + panel interni
 * Il root #deleteModal mantiene style="display:none" inline (JS-controlled).
 * Questo CSS restyle SOLO backdrop e panel contenuto.
 * ============================================================ */
body.has-topbar-v5 .set-modal__backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

body.has-topbar-v5 .set-modal__panel {
  background: var(--surface);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-lg);
  padding: var(--space-8);
  max-width: 500px;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

body.has-topbar-v5 .set-modal__title {
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: 700;
  color: var(--flag-high);
  margin: 0 0 var(--space-4);
}

body.has-topbar-v5 .set-modal__desc {
  font-size: var(--font-size-sm);
  color: var(--ink-500);
  margin: 0 0 var(--space-5);
}

body.has-topbar-v5 .set-modal__actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

[data-theme="dark"] body.has-topbar-v5 .set-modal__panel {
  background: var(--surface);
  border-color: var(--hair-strong);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}

/* ============================================================
 * T11 CSP cleanup — utility classes extracted from inline style attrs
 * ============================================================ */

/* Modal toggle (JS uses classList.add/remove instead of style.display) */
.set-modal--hidden {
  display: none !important;
}

/* Section description paragraphs (language card, danger zone) */
body.has-topbar-v5 .set-section-desc {
  margin-bottom: var(--space-5);
  color: var(--ink-500);
}

/* Credits section scroll-margin (anchor link from topbar) */
body.has-topbar-v5 .set-scroll-anchor {
  scroll-margin-top: 80px;
}

/* Credits table overflow wrapper */
body.has-topbar-v5 .set-overflow-x {
  overflow-x: auto;
}

/* Loading/empty placeholder cell in credits table */
body.has-topbar-v5 .set-table-placeholder {
  padding: var(--space-4);
  color: var(--ink-500);
  text-align: center;
}

/* Billing address textarea — allow vertical resize only */
body.has-topbar-v5 .set-resize-v {
  resize: vertical;
}

/* Country input — auto-uppercase display */
body.has-topbar-v5 .set-country-input {
  text-transform: uppercase;
}

/* ============================================================
 * T11 CSP — credits table tbody rows (JS-generated)
 * ============================================================ */

/* Data row separator */
body.has-topbar-v5 .credits-batch-row {
  border-bottom: 1px solid var(--color-border);
}

/* Standard cell padding — mirrors .set-table th */
body.has-topbar-v5 .credits-batch-cell {
  padding: var(--space-2) var(--space-3);
}

/* Credits amount cell */
body.has-topbar-v5 .credits-batch-cell--credits {
  font-weight: 600;
}

/* Expiry date — has expiry (warm warning) */
body.has-topbar-v5 .credits-batch-cell--exp {
  color: #c05621;
}

/* Expiry date — no expiry (muted) */
body.has-topbar-v5 .credits-batch-cell--noexp {
  color: #718096;
}

/* ============================================================
 * Blocco d'acquisto crediti (Wave PAGAMENTI, 2026-08-19)
 * Costruito da assets/js/credits-purchase.js. Il gemello mobile
 * (.mb-set-buy / .mb-buy__*) sta in preview-mobile/mobile/css/mobile.css:
 * stesso modulo JS, namespace di piattaforma diversi (L3).
 * ============================================================ */
body.has-topbar-v5 .set-credits-buy {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--hair);
}

body.has-topbar-v5 .buy__title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--ink-700);
  margin: 0 0 var(--space-3);
}

body.has-topbar-v5 .buy__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Messaggio di stato: è anche il testo che dice «i pagamenti non sono ancora
   attivi». Deve leggersi come informazione, non come errore. */
body.has-topbar-v5 .buy__msg {
  font-size: var(--font-size-sm);
  color: var(--ink-500);
  margin: var(--space-3) 0 0;
  min-height: 1em;
}

/* Nota sulla durata dei crediti, sotto i pacchetti. È una condizione
   contrattuale (CREDITI-CONTRACT §1) e va letta dove si compra. */
body.has-topbar-v5 .buy__nota {
  font-size: var(--font-size-xs);
  color: var(--ink-500);
  margin: var(--space-3) 0 0;
}