/* --------------------------------------------------------------------------- Layout del pannello. Consuma esclusivamente token semantici: nessun valore esadecimale, nessun primitivo, nessuna classe di tema. Il test di conformità del design system vale anche qui — cambiando `data-kit` su tutto deve ripitturarsi, e se qualcosa resta fermo non appartiene ancora al sistema. Le classi `.sv-*` vengono dalla libreria del brand kit e non sono ridefinite: quanto segue aggiunge solo la griglia e i pochi elementi che il pannello ha in più (misuratori, righe di servizio). --------------------------------------------------------------------------- */ /* ── Accesso ─────────────────────────────────────────────────────────── */ .pannello-accesso { min-height: 100dvh; display: grid; place-items: center; padding: var(--sv-s5); } .pannello-accesso__carta { width: min(26rem, 100%); } .pannello-titolo { margin: 0; } /* ── Barra ───────────────────────────────────────────────────────────── */ .barra { display: flex; align-items: center; gap: var(--sv-s4); min-height: 56px; } .barra__nome { color: var(--sv-text-2); } .barra__coda { margin-inline-start: auto; display: flex; align-items: center; gap: var(--sv-s3); flex-wrap: wrap; } .contenuto { padding-block: var(--sv-s6) var(--sv-s8); gap: var(--sv-s7); } /* ── KPI ─────────────────────────────────────────────────────────────── */ .griglia-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--sv-s4); margin-block-start: var(--sv-s3); } .kpi { background: var(--sv-surface-1); border: 1px solid var(--sv-line); border-radius: var(--sv-r2); padding: var(--sv-s4); display: grid; gap: var(--sv-s2); } .kpi__etichetta { font: var(--sv-t-ov); line-height: var(--sv-t-ov-lh); letter-spacing: .08em; text-transform: uppercase; color: var(--sv-text-3); } .kpi__valore { font-family: var(--sv-font-display); font-size: var(--sv-t-h2); line-height: 1.1; color: var(--sv-text-1); font-variant-numeric: tabular-nums; } .kpi__unita { font-family: var(--sv-font-ui); font-size: var(--sv-t-bs); color: var(--sv-text-3); margin-inline-start: .15em; } .kpi__nota { font: var(--sv-t-cap); line-height: var(--sv-t-cap-lh); color: var(--sv-text-3); font-variant-numeric: tabular-nums; } /* ── Misuratore ──────────────────────────────────────────────────────── */ /* Il colore comunica una soglia, quindi viene dai token di feedback e non da una scala inventata qui. Sotto il 75% resta l'accento: un misuratore che è sempre rosso non segnala più niente. */ .misuratore { height: 6px; border-radius: var(--sv-r-full); background: var(--sv-surface-3); overflow: hidden; } .misuratore__barra { height: 100%; border-radius: inherit; background: var(--sv-accent-1); transition: width var(--sv-dur-2) var(--sv-ease), background-color var(--sv-dur-2) var(--sv-ease); } .misuratore__barra[data-livello="attenzione"] { background: var(--sv-warn); } .misuratore__barra[data-livello="critico"] { background: var(--sv-err); } /* ── Allocazione ─────────────────────────────────────────────────────── */ .allocazione-riga { display: grid; gap: var(--sv-s2); } .allocazione-riga__intestazione { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sv-s3); font-size: var(--sv-t-bs); color: var(--sv-text-2); font-variant-numeric: tabular-nums; } /* ── Siti ────────────────────────────────────────────────────────────── */ .griglia-siti { display: grid; grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); gap: var(--sv-s4); margin-block-start: var(--sv-s3); } .sito__testa { display: flex; align-items: center; justify-content: space-between; gap: var(--sv-s3); } .sito__dominio { font-family: var(--sv-font-mono); font-size: var(--sv-t-bs); color: var(--sv-text-1); text-decoration: none; word-break: break-all; } .sito__dominio:hover { color: var(--sv-accent-1-text); } .servizi { display: grid; gap: var(--sv-s3); } .servizio { display: grid; grid-template-columns: 5.5rem 1fr auto; align-items: center; gap: var(--sv-s3); font-size: var(--sv-t-cap); color: var(--sv-text-2); font-variant-numeric: tabular-nums; } .servizio__nome { font-family: var(--sv-font-mono); color: var(--sv-text-3); } .servizio__cifre { white-space: nowrap; color: var(--sv-text-2); } .sito__piede { display: flex; align-items: center; justify-content: space-between; gap: var(--sv-s3); flex-wrap: wrap; } /* ── Editor di allocazione ───────────────────────────────────────────── */ .editor { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--sv-s3); padding-block-start: var(--sv-s3); border-block-start: 1px solid var(--sv-line); } .editor__azioni { grid-column: 1 / -1; display: flex; gap: var(--sv-s3); align-items: center; flex-wrap: wrap; } /* ── Avvisi ──────────────────────────────────────────────────────────── */ .contenitore-avvisi { position: fixed; inset-block-end: var(--sv-s5); inset-inline-end: var(--sv-s5); display: grid; gap: var(--sv-s3); z-index: var(--sv-z-overlay); max-width: min(24rem, calc(100vw - 2 * var(--sv-s5))); } /* ── Utilità ─────────────────────────────────────────────────────────── */ .visivamente-nascosto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .assente { color: var(--sv-text-3); } @media (prefers-reduced-motion: reduce) { .misuratore__barra { transition: none; } }