/* ============================================================
   dashboard.css — parti specifiche dell'area clienti
   (token e componenti comuni in area.css)
   ============================================================ */

.ms-kpis { gap: 20px; }
.ms-kpis > .ms-kpi { min-height: 118px; }
.ms-kpi .s .ms-btn { height: 24px; padding: 0 6px; margin-left: 4px; }

.ms-paybar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 12px; }
.ms-paybar label { margin-right: -4px; }
.ms-paytotal b { color: var(--ms-text); }

.ms-compare-box { margin-top: 16px; padding: 0; overflow: hidden; }
.ms-compare-box > summary { padding: 16px 20px; cursor: pointer; font-weight: 600; border-radius: var(--ms-r-lg); list-style-position: inside; }
.ms-compare-box > summary:hover { background: rgba(255,255,255,0.02); }
.ms-compare-box[open] > summary { border-bottom: 1px solid var(--ms-border); border-radius: var(--ms-r-lg) var(--ms-r-lg) 0 0; }
.ms-compare-scroll { overflow-x: auto; padding: 0 8px 8px; }
.ms-compare { min-width: 520px; }
.ms-compare tbody th { font-weight: 400; color: var(--ms-text-2); text-align: left; }
.ms-compare .n { font-size: 12px; }

.ms-avatar-lg { width: 48px; height: 48px; border-radius: 14px; font-size: 16px; }
.ms-break { word-break: break-all; }
.ms-page-error { max-width: 560px; margin: 40px auto; }
.ms-pe-host { min-height: 120px; }
.ms-sumbox { background: var(--ms-surface-2); border-radius: 12px; padding: 6px 14px; margin: 16px 0 12px; }
.ms-sumbox li small { display: block; color: var(--ms-text-3); font-size: 12px; max-width: 360px; }

.ms-plan .ms-btn.block { justify-content: center; }
.ms-plan .ms-plan-note .ms-link { white-space: nowrap; }
.ms-feat li > span { min-width: 0; }

.ms-dl-card .ms-btn { align-self: flex-start; }

.ms-sb-user .ms-iconbtn { flex: none; }

/* Pagamenti: la tabella diventa un elenco di card sotto i 768 px */
@media (max-width: 767px) {
  .ms-kpis { gap: 12px; }
  .ms-kpis > .ms-kpi { min-height: 0; }
  .ms-paybar .ms-paytotal { order: 3; width: 100%; }
  .ms-paybar .ms-spacer { display: none; }
  .ms-dl-card .ms-btn { align-self: stretch; }
  .ms-card-foot .ms-btn.cta, .ms-card-foot .ms-btn.primary { flex: 1 1 auto; }
}
.ms-compare-box > summary:focus-visible { box-shadow: inset 0 0 0 2px var(--ms-cyan); border-radius: var(--ms-r-lg); }
#msTitle:focus, #msTitle:focus-visible { box-shadow: none; outline: none; }
.ms-kv-actions { flex-wrap: wrap; justify-content: flex-end; }
.ms-kv-actions > span:first-child { white-space: nowrap; }
/* 22/10 · Nessuno spostamento del layout: gli scheletri delle due card in alto riservano
   un'altezza vicina a quella finale (misurata: 277-511 px l'abbonamento, 314-424 px i crediti). */
/* --ms-sub-h / --ms-cred-h: altezze dell'ultima visita in questo browser (dashboard.js, ms_skel_h) */
.ms-card[data-card="sub"]:has(> [aria-busy="true"]) { min-height: var(--ms-sub-h, 440px); }
.ms-card[data-card="cred"]:has(> [aria-busy="true"]) { min-height: var(--ms-cred-h, 330px); }
@media (min-width: 1100px) { .ms-card[data-card="sub"]:has(> [aria-busy="true"]) { min-height: var(--ms-sub-h, 380px); } .ms-card[data-card="cred"]:has(> [aria-busy="true"]) { min-height: var(--ms-cred-h, 380px); } }
.ms-content.is-waiting { visibility: hidden; }
.ms-content.is-waiting > #msPageError { visibility: visible; }

/* ==========================================================================
   22/10 · critica design
   ========================================================================== */
/* Avvisi globali: stessa larghezza e stessi margini del contenuto (prima andavano
   da bordo a bordo e il riquadro arrotondato veniva tagliato a destra). */
.ms-notices { width: 100%; max-width: var(--ms-content-max); margin: 0 auto; padding: 20px 40px 0; display: grid; gap: 10px; }
.ms-notices:not(:empty) + .ms-content { padding-top: 20px; }
@media (max-width: 1279px) { .ms-notices { padding: 18px 28px 0; } }
@media (max-width: 767px) { .ms-notices { padding: 12px 16px 0; gap: 8px; } .ms-notices:not(:empty) + .ms-content { padding-top: 12px; } }

/* Il sottotitolo della barra tiene sempre la sua riga: niente salti quando cambia sezione */
.ms-topbar .title p { min-height: 20px; }

/* Testata di benvenuto della Panoramica (linguaggio della console admin e della home):
   saluto grande con il nome in gradiente, luce morbida dietro. */
.ms-hero { position: relative; isolation: isolate; padding: 6px 0 6px; }
.ms-hero::before { content: ""; position: absolute; z-index: -1; left: -40px; top: -60px; width: min(720px, 90%); height: 220px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 229, 255, .10), transparent 70%), radial-gradient(closest-side at 70% 60%, rgba(124, 77, 255, .10), transparent 72%); filter: blur(8px); }
.ms-hero-hi { margin: 0; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.04; font-weight: 800; letter-spacing: -.045em; color: var(--ms-text); text-wrap: balance; }
.ms-hero-hi .ms-grad { background: var(--ms-grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--ms-cyan); }
.ms-hero-sub { margin: 12px 0 0; font-size: 16px; line-height: 24px; color: var(--ms-text-2); }
@media (max-width: 767px) {
  .ms-hero { padding: 10px 0 4px; }
  .ms-hero-hi { font-size: 32px; }
  .ms-hero-sub { margin-top: 8px; font-size: 14.5px; line-height: 22px; }
}
@media (forced-colors: active) { .ms-hero-hi .ms-grad { -webkit-text-fill-color: currentColor; background: none; } }

/* Riquadri «Prossimo rinnovo / addebito / Pagamento con» sul telefono: righe intere
   (prima tre riquadri in due colonne, etichette spezzate e un riquadro orfano). */
@media (max-width: 599px) {
  .ms-sub-facts { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--ms-line); border-radius: 14px; background: rgba(255,255,255,0.03); box-shadow: var(--ms-glass-hi); overflow: hidden; }
  .ms-fact { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; padding: 12px 14px; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .ms-fact + .ms-fact { border-top: 1px solid var(--ms-line); }
  .ms-fact.is-danger { box-shadow: inset 3px 0 0 var(--ms-danger); }
  .ms-fact .v { margin-top: 0; text-align: right; }
  .ms-fact .v small { margin-top: 1px; }
  /* scheletro con la stessa forma della riga finale (nessun salto all'arrivo dei dati) */
  .ms-fact[aria-hidden="true"] > .ms-skel:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .ms-fact[aria-hidden="true"] > .ms-skel:nth-child(2) { grid-column: 2; justify-self: end; width: 104px !important; margin-top: 0 !important; }
  .ms-fact[aria-hidden="true"] > .ms-skel:nth-child(3) { grid-column: 2; justify-self: end; width: 72px !important; margin-top: 6px !important; }
}

/* Ancore delle sezioni in cima alla pagina: i link #panoramica… hanno una destinazione
   (controllo «skip link» di Lighthouse) e il salto all'ancora resta in cima. */
.ms-anchors { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; }

/* 22/10 · critica design: con un numero dispari di scelte l'ultima occupa la riga intera (niente riquadro orfano) */
@media (max-width: 767px) { .ms-chips > :last-child:nth-child(odd), .ms-typegrid > :last-child:nth-child(odd) { grid-column: 1 / -1; } }