/* CentralinoBot — look "regia TV" coerente con lo spot.
   Accent rosso #dc3545, tipografia Poppins, card animate, badge/pill. */

:root {
  --acc: #dc3545;
  --acc-2: #e84c5c;
  --bg: #19233a;
  --bg-2: #202c46;
  --panel: #2b3856;
  --panel-2: #34426f;
  --ink: #f1f4fa;
  --muted: #aab7d1;
  --good: #2fbf71;
  --warn: #f0b429;
  --danger: #dc3545;
  --radius: 16px;

  /* Bootstrap dà per scontato uno sfondo chiaro e usa questi grigi scuri
     per .text-muted, bordi, ecc. — su questo tema scuro erano quasi
     invisibili. Sovrascrivendo le variabili di Bootstrap invece della
     singola classe, si sistema ogni componente che le legge (label,
     testo secondario, bordi form) senza dover inseguire ogni selettore. */
  --bs-body-color: var(--ink);
  --bs-body-bg: transparent;
  --bs-secondary-color: var(--muted);
  --bs-secondary-bg: var(--panel-2);
  --bs-tertiary-bg: var(--panel-2);
  --bs-border-color: rgba(255, 255, 255, 0.14);
  --bs-heading-color: var(--ink);
}

body {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(220, 53, 69, 0.18), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(224, 76, 92, 0.12), transparent 55%),
    linear-gradient(160deg, #19233a 0%, #202c46 55%, #19233a 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Poppins", "Segoe UI", system-ui, sans-serif;
  min-height: 100vh;
}

.card,
.panel {
  background: rgba(43, 56, 86, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

/* ---------- Navbar / brand ---------- */
.navbar {
  background: rgba(25, 35, 58, 0.85) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--acc), var(--acc-2));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(220, 53, 69, 0.45);
  margin-right: 10px;
}
.navbar-brand {
  font-weight: 600;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
}
.nav-link {
  border-radius: 10px;
  padding: 0.45rem 0.85rem;
  transition: background 0.2s;
}
.nav-link:hover { background: rgba(255, 255, 255, 0.06); }

/* ---------- Titoli ---------- */
.page-title {
  font-weight: 600;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.page-title .accent-bar {
  width: 5px;
  height: 24px;
  border-radius: 3px;
  background: linear-gradient(var(--acc), var(--acc-2));
}

/* ---------- Card / metriche ---------- */
.stat-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  animation: rise 0.45s ease both;
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stat-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--muted);
}
.stat-value {
  font-size: 1.7rem;
  font-weight: 700;
}

/* ---------- Badge / pill ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: 1px solid transparent;
}
.pill-danger  { background: rgba(220, 53, 69, 0.16); color: #ff8a94; border-color: rgba(220, 53, 69, 0.4); }
.pill-good    { background: rgba(47, 191, 113, 0.14); color: #7ee2a8; border-color: rgba(47, 191, 113, 0.4); }
.pill-warn    { background: rgba(240, 180, 41, 0.14); color: #ffd47a; border-color: rgba(240, 180, 41, 0.4); }
.pill-muted   { background: rgba(147, 161, 187, 0.14); color: #b8c4dc; border-color: rgba(147, 161, 187, 0.35); }

/* Pulse rosso quando allarme attivo */
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(220, 53, 69, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}
.pulse { animation: pulse 1.8s infinite; border-color: var(--danger) !important; }

/* ---------- Timeline escalation ---------- */
.esc-step {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.55rem 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.esc-step:last-child { border-bottom: none; }
.esc-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 6px;
  flex: 0 0 auto;
  background: var(--muted);
}

/* ---------- Tabelle ---------- */
.table {
  --bs-table-color: var(--ink);
  --bs-table-hover-color: #fff;
}
.table thead th {
  background: rgba(25, 35, 58, 0.7) !important;
  color: var(--muted) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-size: 0.72rem;
}
.table tbody td { border-color: rgba(255, 255, 255, 0.06); }
.table-hover tbody tr:hover { background: rgba(255, 255, 255, 0.04); }

/* ---------- Form e bottoni ---------- */
.form-control, .form-select {
  background: rgba(25, 35, 58, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ink);
}
.form-control:focus, .form-select:focus {
  background: rgba(25, 35, 58, 0.9);
  color: var(--ink);
  border-color: var(--acc);
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.2);
}
.form-control::placeholder { color: #5c6a85; }

.btn-danger {
  background: linear-gradient(135deg, var(--acc), var(--acc-2));
  border: none;
}
.btn-danger:hover { filter: brightness(1.08); }

.user-row, .alarm-row {
  background: rgba(25, 35, 58, 0.5);
  border-radius: 12px;
  padding: 0.6rem !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Login */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card { width: 360px; }