/* roster_sites.css — Page-specific styles (only properties not covered by Design Tokens)
   MIGRAZIONE SPA (2026-08-02): estratto da inline <style> del vecchio gestione_siti.html.
   Usa esclusivamente Design Token per colori, spacing, radius, tipografia. */

/* ── Bridge variabili legacy usate dai moduli JS ──
   roster_sites_tabella.js e roster_sites_modali.js usano
   var(--wac-green) / var(--wac-red) / var(--border-light) /
   var(--text-muted): vengono mappati ai token DS. */
:root {
  --wac-green: var(--color-success);
  --wac-red: var(--color-error);
  --border-light: var(--color-border);
  --text-muted: var(--color-text-secondary);
}

/* ── Tabella gerarchica espandibile (nazioni → luoghi → punti) ── */
.siti-table .datatable__actions {
  text-align: center;
}

.espandi-btn-nazione,
.espandi-btn-luogo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: none;
  border: none;
  border-radius: var(--radius-small);
  cursor: pointer;
  font-family: var(--font-family-primary);
  font-size: var(--font-body-large);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  text-align: left;
  min-height: 44px;
  transition: background var(--motion-fast) var(--ease-standard);
}

.espandi-btn-nazione:hover,
.espandi-btn-luogo:hover {
  background: var(--color-surface-container);
}

.espandi-btn-nazione:focus-visible,
.espandi-btn-luogo:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.espandi-btn-nazione .material-symbols-outlined,
.espandi-btn-luogo .material-symbols-outlined {
  color: var(--color-primary);
}

.espandi-btn-nazione__nome,
.espandi-btn-luogo__nome {
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.espandi-btn-nazione__icon,
.espandi-btn-luogo__icon,
.icon--sm {
  font-size: 1.25rem;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

/* ── Modale form ── */
.modal__body--scroll {
  max-height: 70vh;
  overflow-y: auto;
}

.form-field__input {
  padding-right: var(--space-4);
}

.form-field__input--textarea {
  height: auto;
  min-height: 96px;
  resize: vertical;
}

.form-hint {
  font-size: var(--font-body-medium);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2);
}

/* ── Bridge stato mappa ── */
.mappa-stato {
  font-size: var(--font-body-medium);
  color: var(--color-info);
  min-height: 1.2em;
}

.mappa-stato.visible {
  min-height: 1.2em;
}

.mappa-stato.comprimendo {
  color: var(--color-info);
}

.mappa-stato.salvato,
.mappa-stato.ok {
  color: var(--color-success);
}

.mappa-stato.err {
  color: var(--color-error);
}

/* ── Confirm modal (bridge per shared_utils.showConfirmModal) ── */
#confirm-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

#confirm-modal.active {
  display: flex;
}

#confirm-modal .confirm-content {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-extra-large);
  padding: var(--space-6);
  max-width: 440px;
  width: 100%;
  box-shadow: var(--shadow-high);
  text-align: center;
}

#confirm-modal .confirm-icon {
  font-size: 48px;
  color: var(--color-warning);
  display: block;
  margin-bottom: var(--space-3);
}

#confirm-modal .confirm-message {
  font-size: var(--font-body-large);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
  line-height: var(--line-height-normal);
}

#confirm-modal .confirm-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}

/* ── Notifica bar (bridge per shared_utils.mostraNotifica) ── */
#notifica-bar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-body-large);
  font-weight: var(--weight-medium);
  text-align: center;
  color: var(--color-on-error);
  box-shadow: var(--shadow-medium);
}

#notifica-bar.notifica-visible {
  display: block;
}

#notifica-bar.notifica-successo {
  background: var(--color-success);
}

#notifica-bar.notifica-errore {
  background: var(--color-error);
}

#notifica-bar.notifica-info {
  background: var(--color-info);
}

/* ── Form row (affiancamento campi nella modale) ── */
.form-row {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.form-row .form-field {
  flex: 1;
  min-width: 200px;
}