/* Restyling TrinacriaPoC — console web (rosso/bianco/antracite, coerente
   col restyling dell'app Android). Sostituisce la precedente skin teal "da
   centrale operativa". Le variabili Bootstrap NON bastano da sole in
   Bootstrap 5.3 (i colori dei componenti sono compilati da Sass, non
   risolti a runtime da --bs-primary): ogni componente colorato va
   ridefinito esplicitamente qui via le sue --bs-btn-*/--bs-* locali.

   File esterno, non <style> inline: la Content-Security-Policy
   (style-src 'self' cdn.jsdelivr.net, vedi app/__init__.py) blocca gli
   stili inline senza nonce. */
:root {
  --tvox-primary: #E30613;
  --tvox-primary-dark: #B9000A;
  --tvox-primary-soft: #FDECEC;
  --tvox-primary-soft-2: #FBE3E4;
  --tvox-sidebar-bg: #0C1E30;
  --tvox-sidebar-bg-2: #0A1826;
  --tvox-bg: #F5F6F8;
  --tvox-surface: #FFFFFF;
  --tvox-on-surface: #141A1F;
  --tvox-muted: #70757A;
  --tvox-border: #E7E9EE;
  --tvox-online: #2FB344;
  --tvox-offline: #B0B5BB;
  --tvox-busy: #F39C12;
  --tvox-emergency: #E30613;
  --tvox-emergency-critical: #B9000A;

  /* Override Bootstrap globali (quelli che SÌ funzionano a runtime). */
  --bs-body-bg: #F5F6F8;
  --bs-body-color: #141A1F;
  --bs-tertiary-bg: #FFFFFF;
  --bs-secondary-bg: #FFFFFF;
  --bs-border-color: #E7E9EE;
  --bs-primary: #E30613;
  --bs-primary-rgb: 227, 6, 19;
  --bs-secondary-color: #70757A;
  --bs-link-color: #E30613;
  --bs-link-hover-color: #B9000A;
  --bs-border-radius: 0.7rem;
  --bs-border-radius-sm: 0.5rem;
  --bs-border-radius-lg: 1rem;
}

body {
  background: var(--tvox-bg, #F5F6F8);
  color: var(--tvox-on-surface, #141A1F);
  /* Nessuno scroll orizzontale di PAGINA: i contenuti larghi (tabelle)
     scrollano dentro il proprio contenitore (.table-responsive), non
     spingono l'intera pagina di lato tagliando topbar e sidebar su mobile. */
  overflow-x: hidden;
}

/* ---------- Componenti Bootstrap ricolorati (var locali, runtime) ---------- */
.btn-primary {
  --bs-btn-bg: var(--tvox-primary, #E30613);
  --bs-btn-border-color: var(--tvox-primary, #E30613);
  --bs-btn-hover-bg: var(--tvox-primary-dark, #B9000A);
  --bs-btn-hover-border-color: var(--tvox-primary-dark, #B9000A);
  --bs-btn-active-bg: var(--tvox-primary-dark, #B9000A);
  --bs-btn-active-border-color: var(--tvox-primary-dark, #B9000A);
  --bs-btn-disabled-bg: var(--tvox-primary, #E30613);
  --bs-btn-disabled-border-color: var(--tvox-primary, #E30613);
  font-weight: 600;
}
.btn-outline-primary {
  --bs-btn-color: var(--tvox-primary, #E30613);
  --bs-btn-border-color: var(--tvox-primary, #E30613);
  --bs-btn-hover-bg: var(--tvox-primary, #E30613);
  --bs-btn-hover-border-color: var(--tvox-primary, #E30613);
  --bs-btn-active-bg: var(--tvox-primary, #E30613);
  --bs-btn-active-border-color: var(--tvox-primary, #E30613);
  font-weight: 600;
}
.btn-danger {
  --bs-btn-bg: var(--tvox-primary, #E30613);
  --bs-btn-border-color: var(--tvox-primary, #E30613);
  --bs-btn-hover-bg: var(--tvox-primary-dark, #B9000A);
  --bs-btn-hover-border-color: var(--tvox-primary-dark, #B9000A);
  --bs-btn-active-bg: var(--tvox-primary-dark, #B9000A);
}
.btn { border-radius: 0.6rem; }
.btn-sm { border-radius: 0.5rem; }

.text-primary { color: var(--tvox-primary, #E30613) !important; }
.bg-primary { background-color: var(--tvox-primary, #E30613) !important; }
.border-primary { border-color: var(--tvox-primary, #E30613) !important; }
.link-primary, a { }

.badge.bg-primary { background-color: var(--tvox-primary, #E30613) !important; }
.badge.bg-danger { background-color: var(--tvox-primary, #E30613) !important; }

.form-control:focus,
.form-select:focus,
.btn-check:focus + .btn,
.form-check-input:focus {
  border-color: var(--tvox-primary, #E30613);
  box-shadow: 0 0 0 0.2rem rgba(227, 6, 19, 0.15);
}
.form-check-input:checked {
  background-color: var(--tvox-primary, #E30613);
  border-color: var(--tvox-primary, #E30613);
}
.form-control, .form-select {
  border-radius: 0.55rem;
  border-color: var(--tvox-border, #E7E9EE);
}

.card {
  border: 1px solid var(--tvox-border, #E7E9EE);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.card-title { font-weight: 700; }

.nav-tabs .nav-link.active { color: var(--tvox-primary, #E30613); }
.nav-tabs .nav-link { color: var(--tvox-muted, #70757A); }

.table { --bs-table-border-color: var(--tvox-border, #E7E9EE); }

/* Bootstrap .alert-* usa le sue palette; l'alert "danger" resta rosso
   coerente col brand, gli altri restano informativi. */
.alert-success { --bs-alert-color: #146c2e; --bs-alert-bg: #e7f6ec; --bs-alert-border-color: #b7e2c4; }

/* ---------- Shell: topbar bianca ---------- */
.app-topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 64px;
  padding: 0 1.25rem;
  background: var(--tvox-surface, #FFFFFF);
  border-bottom: 1px solid var(--tvox-border, #E7E9EE);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.app-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.app-brand .brand-trinacria { color: var(--tvox-on-surface, #141A1F); }
.app-brand .brand-poc { color: var(--tvox-primary, #E30613); }
.app-brand svg,
.app-brand .app-brand-logo { width: 34px; height: 34px; flex-shrink: 0; object-fit: contain; }

.app-topnav {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  height: 100%;
  margin-left: 1.5rem;
}
.app-topnav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 100%;
  padding: 0 1.1rem;
  text-decoration: none;
  color: var(--tvox-muted, #70757A);
  font-weight: 600;
  border-bottom: 3px solid transparent;
}
.app-topnav-link:hover { color: var(--tvox-on-surface, #141A1F); }
.app-topnav-link.active {
  color: var(--tvox-primary, #E30613);
  border-bottom-color: var(--tvox-primary, #E30613);
}

.app-topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.app-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--tvox-border, #E7E9EE);
  border-radius: 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--tvox-on-surface, #141A1F);
  text-decoration: none;
  background: var(--tvox-surface, #FFFFFF);
}
.app-role-chip:hover { border-color: var(--tvox-primary, #E30613); color: var(--tvox-primary, #E30613); }
.app-esci-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  background: var(--tvox-primary, #E30613);
  color: #fff;
  border-radius: 0.6rem;
  text-decoration: none;
  font-weight: 700;
}
.app-esci-btn:hover { background: var(--tvox-primary-dark, #B9000A); color: #fff; }

/* ---------- Shell: layout sidebar + contenuto ---------- */
.app-shell {
  display: flex;
  min-height: calc(100vh - 64px);
}
.app-sidebar {
  width: 232px;
  flex-shrink: 0;
  background: var(--tvox-sidebar-bg, #0C1E30);
  padding: 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.app-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.6rem;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}
.app-sidebar-link i { width: 20px; text-align: center; font-size: 1rem; }
.app-sidebar-link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.app-sidebar-link.active { background: var(--tvox-primary, #E30613); color: #fff; }
.app-sidebar-spacer { flex: 1; }
.app-sidebar-collapse {
  align-self: flex-start;
  margin: 0.5rem 0 0 0.4rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}
.app-sidebar-collapse:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

.app-main {
  flex: 1;
  min-width: 0;
  padding: 1.75rem 2rem;
}
.app-page-title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
}

/* ---------- Elementi condivisi in stile mockup ---------- */
/* Chip icona (card header): quadrato arrotondato rosso tenue + icona rossa. */
.tvox-icon-chip {
  width: 52px;
  height: 52px;
  border-radius: 0.9rem;
  background: var(--tvox-primary-soft, #FDECEC);
  color: var(--tvox-primary, #E30613);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

/* Avatar iniziali (tabella utenti/operatori). */
.tvox-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tvox-primary-soft-2, #FBE3E4);
  color: var(--tvox-primary-dark, #B9000A);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* Badge ruolo pill. */
.tvox-role-badge {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
}
.tvox-role-badge.role-admin { background: var(--tvox-primary-soft, #FDECEC); color: var(--tvox-primary, #E30613); }
.tvox-role-badge.role-dispatcher { background: #FFF3E0; color: #E67E00; }
.tvox-role-badge.role-operator { background: #EAF1FB; color: #2563EB; }

/* Chip di stato (topbar dispatcher): light pill + eventuale pallino. */
.tvox-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--tvox-border, #E7E9EE);
  border-radius: 0.6rem;
  background: var(--tvox-surface, #FFFFFF);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tvox-on-surface, #141A1F);
  white-space: nowrap;
}
.tvox-status-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tvox-offline, #B0B5BB); }
.tvox-status-chip .dot.online { background: var(--tvox-online, #2FB344); }
.tvox-status-chip.ok { background: #E9F7EC; border-color: #BFE6C7; color: #146c2e; }

/* QR di enrollment (era uno <style> inline in admin/enroll.html, bloccabile
   dalla CSP — spostato qui). */
.tvox-enroll-qr { width: 180px; height: 180px; flex-shrink: 0; }
.tvox-enroll-qr svg { width: 100%; height: 100%; display: block; }

/* Dashboard Utilizzo (admin/stats.html). */
/* Altezza ESPLICITA (non solo max-height): Chart.js con
   maintainAspectRatio:false dimensiona il canvas sull'altezza del contenitore
   — senza un'altezza determinata il grafico collassava a 0px ("non si vede").
   position:relative è la modalità consigliata da Chart.js per il responsive. */
.stats-chart-wrapper { position: relative; height: 320px; }

/* ---------- Login a schermo intero ---------- */
.app-login {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.app-login-card { width: 100%; max-width: 400px; }
.app-login-logo {
  display: block;
  max-width: 260px;
  width: 70%;
  height: auto;
  margin: 0 auto 1.5rem;
}

@media (max-width: 767px) {
  /* Topbar compatta che STA nel viewport: nav e chip a sole icone, così
     "Esci" resta sempre raggiungibile (con overflow-x:hidden un bottone
     spinto fuori sarebbe irraggiungibile). */
  .app-topbar { gap: 0.4rem; padding: 0 0.7rem; }
  .app-brand { font-size: 1.05rem; gap: 0.4rem; }
  .app-topnav { margin-left: 0.35rem; gap: 0; }
  .app-topnav-link { padding: 0 0.5rem; }
  .app-topnav-link .tn-label { display: none; }   /* nav a sole icone */
  .app-topnav-link .fa-chevron-down { display: none; }
  .app-topbar-right { gap: 0.35rem; }
  .app-role-chip { display: none; }                /* ruolo nascosto su mobile */
  .app-esci-btn .tn-label { display: none; }       /* "Esci" a sola icona */

  .app-sidebar { width: 64px; padding: 1rem 0.4rem; }
  .app-sidebar-link span { display: none; }
  .app-sidebar-link { justify-content: center; gap: 0; }
  .app-main { padding: 1.25rem 1rem; min-width: 0; }
}

/* Tabelle larghe (Dispositivi, Audit, ...) SEMPRE scrollabili dentro la card
   invece di allargare la pagina — completa .table-responsive dove usato e fa
   da rete di sicurezza dove il wrapper mancasse. */
.table-responsive { -webkit-overflow-scrolling: touch; }