:root{
  --bg:#0b0d10;
  --panel:#141820;
  --muted:#8b95a7;
  --text:#e6e9ef;
  --green:#22c55e;
  --gray:#566074;
  --red:#ef4444;
  --card:#10151d;
  --border:#1f2430;
  --blue:#3b82f6;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,Arial,sans-serif;
  background:linear-gradient(180deg,#0a0d12 0%, #0b0d10 100%);
  color:var(--text);
}

.site-header,.site-footer{
  max-width:1100px;
  margin:0 auto;
  padding:16px 20px;
}
.site-header{
  display:flex; align-items:center; justify-content:space-between;
}
.header-left{
  display:flex; align-items:center; gap:24px;
}
.site-header h1{
  font-size:1.25rem; margin:0;
}

.nav-links{
  display:flex; gap:8px;
}
.nav-links a{
  color:var(--muted);
  text-decoration:none;
  padding:6px 12px;
  border-radius:8px;
  font-size:0.95rem;
  transition:background 0.2s, color 0.2s;
}
.nav-links a:hover{
  background:var(--panel);
  color:var(--text);
}
.nav-links a.active{
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--border);
}

.controls{display:flex; gap:12px; align-items:center;}
button{
  background:var(--panel); color:var(--text); border:1px solid var(--border);
  padding:8px 12px; border-radius:10px; cursor:pointer;
}
button:hover{filter:brightness(1.1)}
.poll select{
  background:var(--panel); color:var(--text); border:1px solid var(--border);
  border-radius:10px; padding:6px 10px;
}

main{max-width:1100px; margin:0 auto; padding:0 20px 24px;}

.health-status{
  margin:12px 0 16px 0;
}
.health-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.health-indicator{
  display:flex;
  align-items:center;
  gap:10px;
}
.health-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  display:inline-block;
  box-shadow:0 0 10px rgba(0,0,0,.4);
}
.health-dot.green{
  background:var(--green);
  box-shadow:0 0 12px rgba(34,197,94,.6);
}
.health-dot.red{
  background:var(--red);
  box-shadow:0 0 12px rgba(239,68,68,.6);
}
.health-dot.gray{
  background:var(--gray);
}
.health-text{
  font-weight:600;
  font-size:1rem;
}
.health-details{
  display:flex;
  gap:16px;
}
.health-detail{
  color:var(--muted);
  font-size:0.9rem;
}

.status{
  margin:6px 0 14px 0; color:var(--muted); font-size:.95rem;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:14px;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  box-shadow:0 4px 18px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.02);
  transition:transform .12s ease, box-shadow .12s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
}
.card.on{outline:1px solid rgba(34,197,94,.15)}
.card.off{opacity:.95}

.card-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;
}
.name{display:flex; align-items:center; gap:10px;}
h2{font-size:1.05rem; margin:0;}
.badge{
  width:10px; height:10px; border-radius:999px; display:inline-block;
  box-shadow:0 0 10px rgba(0,0,0,.4), 0 0 12px rgba(0,0,0,.2) inset;
}
.badge.green{background:var(--green)}
.badge.gray{background:var(--gray)}

.state{
  padding:3px 8px; border-radius:999px; font-size:.75rem;
  border:1px solid var(--border);
}
.state-on{background:rgba(34,197,94,.15); color:#c0f2d3; border-color:rgba(34,197,94,.25)}
.state-off{background:rgba(86,96,116,.15); color:#d0d6e2; border-color:rgba(86,96,116,.25)}

.card-body{display:grid; gap:8px}
.row{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 10px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.02);
}
.label{color:var(--muted); font-size:.9rem}
.value{font-weight:600}
.vol{letter-spacing:.3px}

/* Dashboard styles */
.dashboard-header{
  margin:12px 0 16px 0;
}
.date-range-picker{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 18px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.date-range-picker label{
  font-size:0.9rem;
  color:var(--muted);
}
.date-range-picker select,
.date-range-picker input{
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px 10px;
  font-size:0.9rem;
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:14px;
  margin-bottom:20px;
}

.stat-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  box-shadow:0 4px 18px rgba(0,0,0,.25);
}
.stat-card h3{
  font-size:0.95rem;
  color:var(--muted);
  margin:0 0 12px 0;
  font-weight:500;
}
.stat-value{
  font-size:2rem;
  font-weight:700;
  margin:8px 0;
}
.stat-value.green{color:var(--green)}
.stat-value.red{color:var(--red)}
.stat-value.blue{color:var(--blue)}
.stat-detail{
  font-size:0.85rem;
  color:var(--muted);
  margin-top:8px;
}

.chart-container{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  box-shadow:0 4px 18px rgba(0,0,0,.25);
  margin-bottom:20px;
}
.chart-container h3{
  font-size:1rem;
  margin:0 0 16px 0;
  font-weight:600;
}
.chart-wrapper{
  position:relative;
  height:300px;
}

.zone-filter{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 18px;
  margin-bottom:16px;
}
.zone-filter label{
  font-size:0.9rem;
  color:var(--muted);
  margin-right:8px;
}
.zone-filter select{
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:8px;
  padding:6px 10px;
  font-size:0.9rem;
}

.activity-table{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  box-shadow:0 4px 18px rgba(0,0,0,.25);
  overflow-x:auto;
}
.activity-table h3{
  font-size:1rem;
  margin:0 0 16px 0;
  font-weight:600;
}
.activity-table table{
  width:100%;
  border-collapse:collapse;
}
.activity-table th,
.activity-table td{
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
}
.activity-table th{
  color:var(--muted);
  font-size:0.85rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.activity-table td{
  font-size:0.9rem;
}
.activity-table tbody tr:hover{
  background:rgba(255,255,255,.02);
}
.activity-table .zone-status{
  padding:3px 8px;
  border-radius:999px;
  font-size:0.75rem;
  display:inline-block;
}
.activity-table .zone-status.on{
  background:rgba(34,197,94,.15);
  color:#c0f2d3;
}
.activity-table .zone-status.off{
  background:rgba(86,96,116,.15);
  color:#d0d6e2;
}

.loading{
  text-align:center;
  padding:40px;
  color:var(--muted);
  font-size:1rem;
}