/* ============================================================================
   MOSSA 4 — SEZIONI AMMINISTRATIVE, STATO/NOTIFICHE, PROFILO, CONTROLLO PV
   Scopato body.ds-page; consuma la base di ds-page.css e i token.
   ========================================================================== */

/* ---- Stati, controlli e notifiche -------------------------------------------- */
body.ds-page .control-metric { border-radius: var(--ds-radius-md); }
body.ds-page .control-metric.warning { background: var(--ds-warning-surface); border-color: var(--ds-warning-border); color: var(--ds-warning); }
body.ds-page .control-metric.error { background: var(--ds-danger-surface); border-color: var(--ds-danger-border); color: var(--ds-danger); }
body.ds-page .control-metric.info { background: var(--ds-info-surface); border-color: var(--ds-info-border); color: var(--ds-info); }
body.ds-page .control-metric.passed { background: var(--ds-success-surface); border-color: var(--ds-success-border); color: var(--ds-success); }
/* Con la tile "Informazioni" presente le colonne diventano 4: auto-fit evita
   una seconda riga con una sola tile. */
body.ds-page .status-controls-metrics { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
body.ds-page .issue { border-radius: var(--ds-radius-md); color: var(--ds-text); }
body.ds-page .issue.urgent { background: var(--ds-danger-surface); border-color: var(--ds-danger); }
body.ds-page .issue.urgent .sev { color: var(--ds-danger); }
body.ds-page .issue.error { background: var(--ds-danger-surface); border-color: var(--ds-danger-border); }
body.ds-page .issue.error .sev { color: var(--ds-danger); }
body.ds-page .issue.warn { background: var(--ds-warning-surface); border-color: var(--ds-warning-border); }
body.ds-page .issue.warn .sev { color: var(--ds-warning); }
body.ds-page .issue.info { background: var(--ds-info-surface); border-color: var(--ds-info-border); }
body.ds-page .issue.info .sev { color: var(--ds-info); }

/* ---- Log di sicurezza ---------------------------------------------------------- */
body.ds-page .seclog-ok { color: var(--ds-success); font-weight: var(--ds-weight-bold); }
body.ds-page .seclog-fail { color: var(--ds-danger); font-weight: var(--ds-weight-bold); }
body.ds-page .seclog-filters { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
body.ds-page .seclog-filters label { display: grid; gap: 4px; font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold); color: var(--ds-text-secondary); text-transform: uppercase; letter-spacing: var(--ds-tracking-label); }
body.ds-page .seclog-filters input { min-height: 38px; padding: 6px 10px; }

/* ---- Acquisizione MEGA ---------------------------------------------------------- */
body.ds-page .mega-state-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
body.ds-page .mega-state-card {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-1);
  padding: 14px;
}
body.ds-page .mega-state-card h2 { margin: 0 0 8px; border: 0; font-size: var(--ds-text-md); }
body.ds-page .mega-state-card dl { display: grid; gap: 5px; margin: 8px 0 0; }
body.ds-page .mega-state-card dl div { display: flex; justify-content: space-between; gap: 10px; }
body.ds-page .mega-state-card dt { color: var(--ds-text-secondary); font-size: var(--ds-text-sm); }
body.ds-page .mega-state-card dd { margin: 0; font-weight: var(--ds-weight-semibold); font-size: var(--ds-text-sm); overflow-wrap: anywhere; text-align: right; }
body.ds-page .mega-next-runs { margin: 6px 0 0; padding-left: 18px; color: var(--ds-text); }

/* ---- Import a passi (Costi pro litro) --------------------------------------------
   Stepper puramente visivo: il passo attivo segue lo stato reale della pagina
   (anteprima visibile => passo 2) via :has, senza toccare la logica JS. */
body.ds-page .ds-stepper {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin: 4px 0 12px; padding: 0; list-style: none;
}
body.ds-page .ds-stepper li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: var(--ds-radius-full);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface); color: var(--ds-text-secondary);
  font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold);
}
body.ds-page .ds-stepper li::before {
  content: attr(data-step);
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ds-surface-subtle); color: var(--ds-text-secondary);
  font-size: 11px; font-weight: var(--ds-weight-bold);
}
body.ds-page .ds-stepper li.is-active,
body.ds-page:has([data-oc-preview-panel]:not([hidden])) .ds-stepper li[data-step="2"] {
  border-color: var(--ds-brand-border); background: var(--ds-brand-soft); color: var(--ds-brand-text);
}
body.ds-page .ds-stepper li.is-active::before,
body.ds-page:has([data-oc-preview-panel]:not([hidden])) .ds-stepper li[data-step="2"]::before {
  background: var(--ds-brand-solid); color: var(--ds-on-brand);
}
/* Quando l'anteprima e' visibile, il passo 1 torna neutro. */
body.ds-page:has([data-oc-preview-panel]:not([hidden])) .ds-stepper li[data-step="1"] {
  border-color: var(--ds-success-border); background: var(--ds-success-surface); color: var(--ds-success);
}
body.ds-page .other-costs-anomaly {
  display: inline-flex; padding: 1px 8px; border-radius: var(--ds-radius-full);
  background: var(--ds-warning-surface); border: 1px solid var(--ds-warning-border);
  color: var(--ds-warning); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold);
}
body.ds-page .other-costs-history-item { border-bottom: 1px solid var(--ds-border); padding: 6px 0; }
body.ds-page .other-costs-history-item summary { cursor: pointer; }
body.ds-page .other-costs-superseded { color: var(--ds-text-faint); font-size: var(--ds-text-xs); }

/* ---- Gestione utenti --------------------------------------------------------------- */
body.ds-page .user-table th { color: var(--ds-text-secondary); }
body.ds-page .user-actions .btn { min-height: 32px; }
body.ds-page .user-create-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; padding: 14px; }
body.ds-page .user-create-form label { display: grid; gap: 4px; font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); }
body.ds-page .user-create-form input, body.ds-page .user-create-form select { min-height: 40px; padding: 7px 10px; }
body.ds-page .user-create-actions { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ---- Profilo ------------------------------------------------------------------------- */
body.ds-page .profile-card {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface); box-shadow: var(--ds-shadow-1);
}
body.ds-page .profile-card span { color: var(--ds-text-secondary); }
body.ds-page .profile-card strong { color: var(--ds-text); }
body.ds-page .tfa-methods { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-top: 12px; }
body.ds-page .tfa-method {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface); padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
body.ds-page .tfa-method header { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
body.ds-page .tfa-method h3 { margin: 0; font-size: var(--ds-text-md); }
body.ds-page .tfa-method p { margin: 0; color: var(--ds-text-secondary); font-size: var(--ds-text-sm); }
body.ds-page .tfa-tag {
  display: inline-flex; padding: 1px 8px; border-radius: var(--ds-radius-full);
  background: var(--ds-success-surface); border: 1px solid var(--ds-success-border);
  color: var(--ds-success); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-bold);
}
body.ds-page .tfa-code {
  background: var(--ds-surface-subtle); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm); padding: 2px 8px;
  font-weight: var(--ds-weight-bold); letter-spacing: .08em;
}
body.ds-page .tfa-link-box, body.ds-page .tfa-totp-setup {
  border: 1px dashed var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-subtle); padding: 12px;
}
body.ds-page .tfa-qr { border-radius: var(--ds-radius-md); background: #fff; padding: 8px; }
body.ds-page .tfa-radio { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
body.ds-page .tfa-radio.is-disabled { opacity: .55; }
body.ds-page .tfa-waiting { color: var(--ds-info); font-weight: var(--ds-weight-semibold); }
body.ds-page .email-change-pending {
  border-color: var(--ds-info-border); background: var(--ds-info-surface); color: var(--ds-info);
  border-radius: var(--ds-radius-md);
}
/* Selettore tema nel profilo: gruppo segmentato del design system. */
body.ds-page .profile-theme-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
body.ds-page .profile-theme-form .ds-segmented label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; min-height: 30px; cursor: pointer;
  border-radius: calc(var(--ds-radius-sm) - 2px);
  color: var(--ds-text-secondary); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold);
}
body.ds-page .profile-theme-form .ds-segmented label:has(input:checked) {
  background: var(--ds-surface); color: var(--ds-text); box-shadow: var(--ds-shadow-1);
}
body.ds-page .profile-theme-form .ds-segmented input { accent-color: var(--ds-brand-solid); }

/* ---- Pannello Strumenti Amministrativi ------------------------------------------------ */
body.ds-page .admin-tools-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
body.ds-page .admin-tool-card {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface); box-shadow: var(--ds-shadow-1);
  padding: 16px; color: inherit; text-decoration: none;
  transition: border-color var(--ds-dur-base) var(--ds-ease),
              box-shadow var(--ds-dur-base) var(--ds-ease),
              transform var(--ds-dur-base) var(--ds-ease);
}
body.ds-page .admin-tool-card:hover {
  border-color: var(--ds-brand-border); box-shadow: var(--ds-shadow-2);
  transform: translateY(-1px); text-decoration: none;
}
body.ds-page .admin-tool-card .app-icon { width: 24px; height: 24px; color: var(--ds-brand-text); }
body.ds-page .admin-tool-card strong { color: var(--ds-text); font-size: var(--ds-text-md); }
body.ds-page .admin-tool-card p { margin: 0; color: var(--ds-text-secondary); font-size: var(--ds-text-sm); line-height: 1.4; }
body.ds-page .admin-tool-card .admin-tool-status { margin-top: auto; font-size: var(--ds-text-xs); color: var(--ds-text-faint); }

/* ---- Pagina di caricamento startup ------------------------------------------------------ */
body.ds-page .startup-loading progress { accent-color: var(--ds-brand-solid); }
body.ds-page .progress-title span { color: var(--ds-text-secondary); }

@media (prefers-reduced-motion: reduce) {
  body.ds-page .admin-tool-card, body.ds-page .admin-tool-card:hover { transform: none; transition: none; }
}

/* ---- Invio e-mail file PV (export_mail_admin) ------------------------------------------- */
body.ds-page .mega-inline-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0 24px; }
body.ds-page .mega-inline-form input[type="email"],
body.ds-page .mega-inline-form input[type="text"] { min-height: 40px; padding: 7px 10px; min-width: 240px; }
body.ds-page .mega-inline-form input[type="date"] { min-height: 40px; padding: 7px 10px; }

/* ---- Card-azione del Pannello strumenti (ex voce "Reimporta schede") ---------------------- */
body.ds-page form.admin-tool-card--action { margin: 0; cursor: default; }
body.ds-page form.admin-tool-card--action:hover { transform: none; }
body.ds-page .admin-tool-card--action .btn { margin-top: auto; align-self: start; min-height: 40px; }

/* ---- Profilo: azioni in testata (Guida utente + Cambia password) ------------ */
body.ds-page .profile-heading-actions { display: flex; gap: 8px; flex-wrap: wrap; }