/* ilmioDNS - v3.01 - grafica piu' marcata e identitaria (scuro +
   accento acciaio/ambra) al posto della precedente palette generica
   blu-grigio. Le classi qui sotto sono tutte quelle effettivamente
   usate nelle view EJS: nessuna view va toccata solo per questo
   restyling, a parte i punti gia' aggiornati per il logo dinamico. */

:root {
  --color-primary: #e6a53c;
  --color-primary-dark: #c98a25;
  --color-primary-light: #fbf0dc;
  --color-ink: #14151f;
  --color-ink-2: #1d1f2e;
  /* v3.04: fasce header/nav schiarite rispetto a --color-ink/-2 (che
     restano invariati: sono usati anche altrove, es. intestazioni
     tabella, pagina di login, dove non e' stato chiesto di intervenire).
     L'header (prima fascia) e' schiarito di piu' del nav (seconda
     fascia), cosi' il logo (riquadro bianco) non "staglia" piu' cosi'
     tanto sullo sfondo. */
  --color-header-bg: #3b4160;
  --color-header-bg-2: #454c73;
  --color-nav-bg: #262b40;
  --color-bg: #f6f3ec;
  --color-surface: #ffffff;
  --color-border: #e7e0d2;
  --color-text: #201f1a;
  --color-text-muted: #75705f;
  --color-danger: #d6432e;
  --color-danger-bg: #fbe4de;
  --color-success: #1f8a5f;
  --color-success-bg: #e0f3e8;
  --color-warning: #b5581a;
  --color-warning-bg: #fbe8d2;
  --radius: 8px;
  --radius-sm: 5px;
  --shadow-sm: 0 1px 2px rgba(20, 21, 31, .08);
  --shadow-md: 0 8px 24px rgba(20, 21, 31, .16);
  /* v5.96: colore link - segnalato dall'utente: i link visitati
     risultavano in un colore giallino poco leggibile (il browser
     applica di default un colore diverso ai link gia' visitati, non
     coperto dalla precedente regola "a { color: ... }", che da sola
     lascia comunque al browser liberta' su :visited in alcuni casi/
     browser). Richiesta esplicita: link sempre blu, visitati o no. */
  --color-link: #1a5cb0;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.45;
}

a, a:visited { color: var(--color-link); }

/* ------------------------------------------------------------ */
/* Header + navigazione                                          */
/* ------------------------------------------------------------ */
header.app-header {
  background: var(--color-header-bg);
  background-image:
    radial-gradient(600px circle at 0% 0%, rgba(230, 165, 60, .16), transparent 60%),
    linear-gradient(120deg, var(--color-header-bg), var(--color-header-bg-2) 70%);
  color: #fff;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-md);
  border-bottom: 3px solid var(--color-primary);
}
header.app-header .app-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
header.app-header h1 {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .2px;
}
/* v5.41: switch tenant, in alto a destra accanto a nome utente/Logout
   (vedi .nav-right sotto) - prima (v5.30) era qui a sinistra */
.tenant-switch-label {
  font-size: 12px;
  font-weight: 600;
  color: #e3e4f6;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  white-space: nowrap;
}
.tenant-switch-form select {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  max-width: 180px;
}
.tenant-switch-form select:focus { outline: none; border-color: var(--color-primary); }
.tenant-assegnazione {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-bg);
}
.tenant-assegnazione-voce { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: 13px; }
/* v5.50/v5.51: scelta ambito selezionati/globale nel form Messaggi */
.radio-inline { display: inline-flex; align-items: center; gap: 5px; margin-right: 18px; font-weight: 400; }
.link-btn {
  background: none; border: none; padding: 0; margin: 0;
  color: var(--color-primary); font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: underline;
}
.link-btn:hover { color: var(--color-ink); }
header.app-header h1 .brand-accent { color: var(--color-primary); }
header.app-header .ver {
  font-size: 11px;
  color: #9a9bb5;
  font-weight: 400;
  margin-left: 6px;
}
header.app-header .logo {
  height: 42px;
  max-width: 180px;
  object-fit: contain;
  display: block;
  background: #fff;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}

nav.app-nav {
  background: var(--color-nav-bg);
  padding: 0 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
nav.app-nav a {
  color: #b7b9d6;
  text-decoration: none;
  margin-right: 2px;
  font-size: 13px;
  font-weight: 500;
  padding: 12px 14px;
  display: inline-block;
  border-bottom: 3px solid transparent;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
nav.app-nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, .06);
}
nav.app-nav a.active {
  color: #fff;
  border-bottom-color: var(--color-primary);
  font-weight: 700;
}
/* v5.41: gruppo tenant + utente + logout, tutto insieme in alto a
   destra (prima solo "Logout" aveva margin-left:auto, con "nav-user"
   impilato a sinistra insieme alle voci di menu invece che vicino al
   Logout: spostando il margin-left:auto sull'intero gruppo, i tre
   elementi restano adiacenti fra loro E ancorati a destra) */
nav.app-nav .nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
nav.app-nav a.nav-logout { margin-right: 0; }
/* v5.56: "nav-user" era uno <span>, ora e' un link verso /account (il
   mio account - cambio password, attiva/disattiva 2FA): stesso aspetto
   di prima, con solo un sottolineato leggero all'hover/focus per far
   capire che e' cliccabile, e un accento quando /account e' la pagina
   corrente (stessa convenzione ".active" delle altre voci di nav). */
nav.app-nav .nav-user {
  color: #e3e4f6;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
nav.app-nav .nav-user:hover,
nav.app-nav .nav-user:focus,
nav.app-nav .nav-user.active {
  color: var(--color-primary);
  text-decoration: underline;
}

/* voci di menu con sottomenu (es. "DNS", "Impostazioni"): stesso
   stile del link normale, con una piccola freccia, e un pannello a
   tendina che compare al passaggio del mouse o con focus da tastiera */
nav.app-nav .nav-dropdown { position: relative; }
nav.app-nav .nav-dropdown > .nav-dropdown-toggle {
  cursor: default;
}
nav.app-nav .nav-dropdown > .nav-dropdown-toggle::after {
  content: '\25BE';
  margin-left: 5px;
  font-size: 10px;
  opacity: .7;
}
nav.app-nav .nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  background: var(--color-nav-bg);
  border: 1px solid rgba(255, 255, 255, .12);
  border-top: 3px solid var(--color-primary);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
  z-index: 50;
  padding: 4px 0;
}
nav.app-nav .nav-dropdown:hover > .nav-dropdown-menu,
nav.app-nav .nav-dropdown:focus-within > .nav-dropdown-menu {
  display: block;
}
nav.app-nav .nav-dropdown-menu a {
  display: block;
  margin: 0;
  border-bottom: none;
  border-left: 3px solid transparent;
}
nav.app-nav .nav-dropdown-menu a.active {
  border-bottom: none;
  border-left-color: var(--color-primary);
}

/* ------------------------------------------------------------ */
/* Layout principale                                             */
/* ------------------------------------------------------------ */
main { padding: 24px; max-width: 1280px; margin: 0 auto; }
h2 {
  margin: 0 0 16px; font-size: 21px; font-weight: 800; color: var(--color-ink);
  padding-left: 12px; border-left: 5px solid var(--color-primary);
}

/* ------------------------------------------------------------ */
/* Tabelle                                                       */
/* ------------------------------------------------------------ */
table {
  border-collapse: collapse;
  width: 100%;
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}
th, td {
  padding: 9px 12px;
  font-size: 13px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
th {
  background: var(--color-ink);
  color: #d8d9ee;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 2px solid var(--color-primary);
}
th a { color: #d8d9ee; text-decoration: none; }
th a:hover { color: var(--color-primary); }
tbody tr:hover { background: var(--color-primary-light); }
tbody tr:last-child td { border-bottom: none; }

tr.scaduto { background: var(--color-danger-bg); }
tr.scaduto:hover { background: #f6cec4; }
tr.inscadenza { background: var(--color-warning-bg); }
tr.inscadenza:hover { background: #f6d8ac; }
tr.inattivo { color: var(--color-text-muted); font-style: italic; }
tr.dv-diff { background: var(--color-warning-bg); }
tr.dv-diff:hover { background: #f6d8ac; }
tr.dv-nonverificabile { color: var(--color-text-muted); font-style: italic; }
tr.dv-uguale { }
tr.riga-corrente { background: var(--color-primary-light); }
tr.riga-corrente:hover { background: #f6e6c4; }

/* ------------------------------------------------------------ */
/* Azioni / badge / etichette con tooltip                        */
/* ------------------------------------------------------------ */
.azioni { white-space: nowrap; padding-left: 6px; padding-right: 6px; }
.azioni a.icona-azione, .azioni .icona-azione-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; margin-right: 1px;
  border-radius: 50%; font-size: 12px; text-decoration: none;
  color: var(--color-ink-2); transition: background .15s ease, color .15s ease;
}
.azioni a.icona-azione:last-child, .azioni .icona-azione-btn:last-child { margin-right: 0; }
.azioni a.icona-azione:hover, .azioni .icona-azione-btn:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }
/* icone SVG inline (es. iconaCestino/elimina, v5.69): niente baseline
   extra sotto l'SVG, cosi' resta centrata dentro il cerchio come le
   emoji delle altre icone azione */
.azioni a.icona-azione svg, .azioni .icona-azione-btn svg { display: block; }
.azioni .icona-azione-btn {
  border: none; background: transparent; cursor: pointer; padding: 0; font: inherit;
}
.azione-inline { display: inline-block; margin: 0; }

.short-label { border-bottom: 1px dotted #b4ab90; cursor: help; }

.badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
}
.badge-ok { background: var(--color-success-bg); color: var(--color-success); }
.badge-no { background: #eeece3; color: #756f63; }
.badge-danger { background: var(--color-danger-bg); color: var(--color-danger); font-weight: 700; }
/* v5.01: badge blu "informativo", per etichette che non sono ne'
   positive/attive (verde) ne' negative/disattivate (grigio) - es. il
   ruolo "Secondario" di un DNS server, che non deve sembrare
   disattivato solo perche' non e' "Primario". */
.badge-info { background: #dde8f7; color: #2a5ba8; }

/* ------------------------------------------------------------ */
/* Bottoni                                                        */
/* ------------------------------------------------------------ */
.btn {
  display: inline-block; background: var(--color-primary); color: var(--color-ink);
  padding: 8px 18px; border-radius: 999px; text-decoration: none;
  font-size: 13px; font-weight: 700; border: none; cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
  box-shadow: 0 2px 8px rgba(230, 165, 60, .35);
}
.btn:hover { background: var(--color-primary-dark); box-shadow: 0 4px 14px rgba(201, 138, 37, .45); }
.btn:active { transform: translateY(1px); }
.btn.grigio { background: var(--color-ink-2); color: #fff; box-shadow: none; }
.btn.grigio:hover { background: #2a2c42; }
.btn.rosso { background: var(--color-danger); color: #fff; box-shadow: none; }
.btn.rosso:hover { background: #b93221; }
.btn.secondario {
  background: #fff; color: var(--color-ink-2);
  border: 1px solid var(--color-border); box-shadow: none;
}
.btn.secondario:hover { background: var(--color-primary-light); border-color: var(--color-primary); }
/* v5.19: bottone giallo (stesso stile di .btn) usato come <summary> di un
   <details>, per evidenziare azioni secondarie a comparsa (es. "Modifica
   nome zona / commento") che altrimenti si perdono nel resto della
   pagina se lasciate come semplice testo cliccabile. */
.btn-summary { list-style: none; }
.btn-summary::-webkit-details-marker { display: none; }
.btn-summary::marker { content: ''; }

/* ------------------------------------------------------------ */
/* Form                                                           */
/* ------------------------------------------------------------ */
.campo { margin-bottom: 12px; display: flex; align-items: flex-start; }
.campo label {
  display: inline-block; width: 170px; flex-shrink: 0;
  padding-top: 7px; font-size: 13px; font-weight: 600; color: var(--color-ink-2);
}
.campo input[type=text], .campo input[type=password], .campo input[type=date],
.campo input[type=file], .campo input[type=number], .campo input[type=email],
.campo select, .campo textarea, textarea {
  width: 320px; max-width: 100%; padding: 7px 10px; font-size: 13px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: #fff; color: var(--color-text); font-family: inherit;
}
.campo input[type=text]:focus, .campo input[type=password]:focus,
.campo input[type=date]:focus, .campo input[type=number]:focus, .campo input[type=email]:focus,
.campo select:focus, .campo textarea:focus, textarea:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.campo input[type=checkbox] { margin-top: 9px; accent-color: var(--color-primary-dark); width: 16px; height: 16px; }
.campo input[type=radio] { accent-color: var(--color-primary-dark); }
.nota { display: block; color: var(--color-text-muted); font-size: 12px; margin-top: 4px; }
/* v5.57: campo + azione inline (es. Email + tasto "Manda la mail di
   verifica") sulla stessa riga invece che impilati */
.campo-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.campo-inline input[type=email] { width: 260px; }
/* v5.71: checkbox + etichetta sulla stessa riga, allineati al centro
   (es. "genera password automaticamente", "forza cambio password") */
.campo-checkbox { display: inline-flex; align-items: center; gap: 7px; font-weight: 400; font-size: 13px; color: var(--color-text); }
.campo-checkbox input[type=checkbox] { margin-top: 0; }

/* campi data con icona calendario (vedi public/js/date-picker.js) */
.data-wrap { display: inline-flex; align-items: center; gap: 6px; }
.data-wrap input[type=text] { width: 150px; }
.data-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); background: #fff; cursor: pointer;
  font-size: 15px; line-height: 1; color: var(--color-ink-2);
  transition: background .15s ease, border-color .15s ease;
}
.data-btn:hover { background: var(--color-primary-light); border-color: var(--color-primary); }
.data-native {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* opzioni radio "modalita' rinnovo" */
.opzione-radio { display: block; margin-bottom: 10px; font-size: 13px; }
.opzione-radio input[type=radio] { margin-right: 6px; }

/* filtro "stato" (Gestione DNS server) */
.filtro-stato {
  margin-bottom: 14px; display: flex; gap: 16px; align-items: center;
  font-size: 13px; color: var(--color-ink-2);
}
.filtro-stato label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.filtro-stato input[type=radio] { accent-color: var(--color-primary-dark); }

/* ------------------------------------------------------------ */
/* Messaggi                                                       */
/* ------------------------------------------------------------ */
.errore, .ok, .avviso {
  padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px;
  font-size: 13px; border-left: 4px solid transparent;
}
.errore { background: var(--color-danger-bg); border-left-color: var(--color-danger); color: #7a2314; }
.ok { background: var(--color-success-bg); border-left-color: var(--color-success); color: #114b31; }
.avviso { background: var(--color-warning-bg); border-left-color: var(--color-warning); color: #6e3710; }

/* ------------------------------------------------------------ */
/* Toolbar                                                        */
/* ------------------------------------------------------------ */
.toolbar { margin-bottom: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.toolbar form { display: inline-flex; align-items: center; gap: 8px; margin-right: 0; }
.toolbar input[type=text], .toolbar select {
  padding: 7px 10px; font-size: 13px; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
form.inline { display: inline; }

/* ------------------------------------------------------------ */
/* Footer                                                         */
/* ------------------------------------------------------------ */
footer.app-footer {
  text-align: center; padding: 20px 20px; font-size: 12px; color: #8f8873;
}
footer.app-footer a { color: var(--color-primary-dark); font-weight: 600; }

/* ------------------------------------------------------------ */
/* Pagina di login                                                */
/* ------------------------------------------------------------ */
.login-page {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  background: var(--color-ink);
  background-image:
    radial-gradient(700px circle at 15% 15%, rgba(230, 165, 60, .22), transparent 55%),
    linear-gradient(150deg, #14151f, #1d1f2e 70%);
}
.login-box {
  background: #fff; padding: 38px 42px; border-radius: 14px; width: 330px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .45);
  text-align: center;
  border-top: 4px solid var(--color-primary);
}
.login-box img.logo { max-height: 60px; max-width: 220px; object-fit: contain; margin-bottom: 18px; }
.login-box h1 { font-size: 19px; margin: 0 0 22px; color: var(--color-ink); font-weight: 800; }
.login-box input, .login-box select {
  width: 100%; padding: 10px 12px; margin-bottom: 12px; font-size: 14px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: #fff; color: var(--color-ink);
}
.login-box input:focus, .login-box select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.login-box .btn { width: 100%; padding: 11px; font-size: 14px; }
.login-page footer.app-footer { color: #8688a8; }
.login-page footer.app-footer a { color: var(--color-primary); }

/* ------------------------------------------------------------ */
/* v5.55: setup 2FA (wizard) - stessa impronta grafica del box di
   login (.login-box), solo piu' largo per lasciare posto al QR code
   TOTP e al testo delle spiegazioni di ogni passo                    */
/* ------------------------------------------------------------ */
.due-fa-box {
  background: #fff; padding: 38px 42px; border-radius: 14px; width: 420px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .45);
  text-align: center;
  border-top: 4px solid var(--color-primary);
}
.due-fa-box h1 { font-size: 19px; margin: 0 0 8px; color: var(--color-ink); font-weight: 800; }
.due-fa-box .due-fa-passo { font-size: 12px; color: var(--color-text-muted); margin-bottom: 22px; }
.due-fa-box p.nota { text-align: left; }
.due-fa-box input {
  width: 100%; padding: 10px 12px; margin-bottom: 12px; font-size: 14px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: #fff; color: var(--color-ink); box-sizing: border-box;
}
.due-fa-box input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.due-fa-box .btn { width: 100%; padding: 11px; font-size: 14px; }
.due-fa-metodi { display: flex; gap: 14px; margin: 18px 0; }
.due-fa-metodo-scelta {
  flex: 1; border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 16px 12px; cursor: pointer; text-align: center; background: var(--color-bg);
}
.due-fa-metodo-scelta:hover { border-color: var(--color-primary); background: var(--color-primary-light); }
.due-fa-metodo-scelta .titolo { display: block; font-weight: 700; margin-bottom: 4px; color: var(--color-ink); }
.due-fa-qr { margin: 18px 0; padding: 16px; background: var(--color-bg); border-radius: var(--radius); }
.due-fa-qr img { width: 200px; height: 200px; }
.due-fa-segreto {
  font-family: monospace; font-size: 13px; word-break: break-all; background: var(--color-bg);
  padding: 8px 10px; border-radius: var(--radius-sm); margin: 10px 0; user-select: all;
}
/* v5.55: badge stato 2FA in Gestione utenti - stessi colori delle
   classi .badge-ok/.badge-no/.avviso gia' usate altrove */
.due-fa-badge {
  display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
}
.due-fa-badge-attiva { background: var(--color-success-bg); color: #114b31; }
.due-fa-badge-grazia { background: var(--color-warning-bg); color: #6e3710; }
.due-fa-badge-mancante { background: var(--color-danger-bg); color: #7a2314; }

/* ------------------------------------------------------------ */
/* Impostazioni                                                   */
/* ------------------------------------------------------------ */
.settings-box {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius); padding: 22px 26px; max-width: 520px;
  box-shadow: var(--shadow-sm);
}
.settings-box + .settings-box { margin-top: 18px; }
.settings-box h3 { margin: 0 0 14px; font-size: 15px; color: var(--color-ink); }
.logo-preview {
  display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
  padding: 14px; background: var(--color-bg); border: 1px dashed var(--color-border); border-radius: var(--radius-sm);
}
.logo-preview img { max-height: 60px; max-width: 220px; object-fit: contain; }
.logo-preview .logo-preview-label { font-size: 12px; color: var(--color-text-muted); }

/* ------------------------------------------------------------ */
/* Home: statistiche, grafici, novita'                            */
/* ------------------------------------------------------------ */
.stats-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px; margin-bottom: 22px;
}
/* sotto una certa larghezza 7 colonne fisse diventerebbero illeggibili:
   si torna alla larghezza minima elastica di prima, che va comunque
   a capo con grazia su schermi piccoli */
@media (max-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
/* v5.02: layout uniforme per TUTTE le card (tranne "DNS server", che
   resta la card "raggruppata" a parte, vedi .stat-split sotto): stessa
   struttura a 3 righe per ognuna (titolo in alto / valore(i) / didascalia
   opzionale in basso) con lo STESSO font (dimensione e peso) per ogni
   riga corrispondente su tutte le card, cosi' che la riga di statistiche
   sia visivamente coerente invece di avere numeri di dimensioni diverse
   da una card all'altra. */
.stat-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 4px;
}
.stat-card .stat-title { font-size: 12px; color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.stat-card .stat-value-row { display: flex; align-items: baseline; gap: 8px; }
.stat-card .stat-value { font-size: 26px; font-weight: 800; color: var(--color-ink); line-height: 1.1; }
.stat-card .stat-value.stat-ok { color: var(--color-success); }
.stat-card .stat-value-row small { font-size: 15px; font-weight: 600; color: var(--color-text-muted); }
.stat-card .stat-caption { font-size: 12px; color: var(--color-text-muted); font-weight: 600; }
.stat-card.stat-warning { border-top-color: var(--color-warning); }
.stat-card.stat-warning .stat-value { color: var(--color-warning); }
.stat-card.stat-danger { border-top-color: var(--color-danger); }
.stat-card.stat-danger .stat-value { color: var(--color-danger); }
/* pattern piu' vecchio (valore sopra, etichetta sotto, es. il riepilogo
   import CSV in domini/importResult.ejs): tenuto per compatibilita',
   NON usato dalla dashboard dalla v5.02 */
.stat-card .stat-label { font-size: 12px; color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.stat-card.stat-ok { border-top-color: var(--color-success); }
.stat-card.stat-ok .stat-value { color: var(--color-success); }
.stat-card.stat-muted { border-top-color: #b7b09a; }

/* card "raggruppate": piu' numeri correlati (es. DNS server primari/
   secondari) affiancati in una sola card invece di occuparne una
   ciascuno */
.stat-card.stat-split { gap: 8px; }
.stat-split-title { font-size: 11px; color: var(--color-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.stat-split-row { display: flex; gap: 14px; }
.stat-split-item { display: flex; flex-direction: column; gap: 2px; }
/* v5.03: stessa dimensione/peso del numero usata dalle altre card
   (26px/800), non piu' 20px: era l'unico numero visibilmente piu'
   piccolo del resto della dashboard. */
.stat-split-item .stat-value { font-size: 26px; font-weight: 800; color: var(--color-ink); line-height: 1.1; }
.stat-split-item .stat-value small { font-size: 15px; font-weight: 600; }
.stat-split-item .stat-label { font-size: 10px; color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.stat-split-item.stat-ok .stat-value { color: var(--color-success); }
.stat-split-item.stat-muted .stat-value { color: var(--color-text-muted); }

.dashboard-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px; margin-bottom: 22px; align-items: start;
}
.chart-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow-sm);
}
.chart-card h3 { margin: 0 0 14px; font-size: 14px; color: var(--color-ink); font-weight: 700; }

/* v5.82: intestazione del box grafico con lo switch "ACT/ALL" allineato
   a destra (grafici registrar/DNS in Dashboard, default solo domini
   attivi) - stesso principio di .news-box-head, ma il margine sotto
   resta sull'h3 (non sul wrapper) per non alterare lo spazio prima
   delle barre. */
.chart-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.chart-card-head h3 { margin: 0; }

.chart-scope-switch { position: relative; display: inline-flex; cursor: pointer; user-select: none; flex-shrink: 0; }
.chart-scope-switch input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
  opacity: 0; cursor: pointer;
}
.chart-scope-track {
  display: flex; align-items: center; position: relative;
  width: 58px; height: 20px; padding: 2px;
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 999px;
}
.chart-scope-knob {
  position: absolute; top: 2px; left: 2px; width: 27px; height: 16px;
  background: var(--color-primary); border-radius: 999px;
  transition: transform .15s ease;
}
.chart-scope-switch input:checked ~ .chart-scope-track .chart-scope-knob { transform: translateX(28px); }
.chart-scope-opt {
  flex: 1; position: relative; z-index: 1; text-align: center;
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em; color: var(--color-text-muted);
}
.chart-scope-switch input:not(:checked) ~ .chart-scope-track .chart-scope-opt-act { color: #fff; }
.chart-scope-switch input:checked ~ .chart-scope-track .chart-scope-opt-all { color: #fff; }

.chart-pie-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.chart-legend { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.chart-legend li { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.chart-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.chart-pct { color: var(--color-text-muted); }

.dns-agenti-stato { margin-top: 16px; }
.dns-agenti-stato th, .dns-agenti-stato td { padding: 6px 10px; font-size: 12.5px; }
/* v5.52: versione agente diversa da quella dell'app - aggiornamento
   mancante, da segnalare con risalto (stesso colore del pallino rosso) */
.dns-agenti-stato .agente-versione-vecchia { color: var(--color-danger); font-weight: 700; }

.chart-bars { display: flex; flex-direction: column; gap: 9px; }
.chart-bar-row { display: grid; grid-template-columns: 110px 1fr 32px; align-items: center; gap: 8px; font-size: 12.5px; }
.chart-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-ink-2); }
.chart-bar-track { background: var(--color-bg); border-radius: 999px; height: 12px; overflow: hidden; }
.chart-bar-fill { display: block; height: 100%; border-radius: 999px; }
.chart-bar-value { text-align: right; font-weight: 700; color: var(--color-ink-2); }

.news-box { max-width: none; }
.news-box-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.news-box-head h3 { margin: 0; }
.btn-small { padding: 4px 14px; font-size: 12.5px; }
.news-list { list-style: none; margin: 8px 0 0; padding: 0; }
.news-item { padding: 12px 0; border-top: 1px solid var(--color-border); }
.news-item:first-child { border-top: none; }
.news-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.news-title { font-weight: 700; color: var(--color-ink); }
.news-date { color: var(--color-text-muted); font-size: 12px; margin-left: auto; }
.news-text { margin: 0; font-size: 13px; color: var(--color-text); white-space: pre-wrap; }

/* ------------------------------------------------------------ */
/* Overlay "operazione in corso" (v3.05) - vedi public/js/wip-overlay.js */
/* ------------------------------------------------------------ */
.wip-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(20, 21, 31, .55);
  display: flex; align-items: center; justify-content: center;
}
.wip-box {
  background: var(--color-surface); color: var(--color-ink);
  padding: 30px 42px; border-radius: var(--radius);
  box-shadow: var(--shadow-md); text-align: center;
  font-size: 14.5px; font-weight: 700;
}
.wip-spinner {
  width: 34px; height: 34px; margin: 0 auto 14px;
  border: 4px solid var(--color-border); border-top-color: var(--color-primary);
  border-radius: 50%; animation: wip-spin .8s linear infinite;
}
@keyframes wip-spin { to { transform: rotate(360deg); } }