/* ===================================================================
   Dashboard Monitoring PDAM — Dark SCADA Theme (ringan, responsif)
   =================================================================== */
:root {
  --bg:#0b1220; --bg-grad1:#0b1220; --bg-grad2:#0e1830;
  --panel:#131f35; --panel-2:#0f1a2e; --elev:#16233d;
  --text:#e6edf7; --muted:#8492ab; --faint:#5b6880;
  --line:#1e2d49; --line-2:#26375a;
  --primary:#22d3ee; --primary-d:#0891b2;
  --normal:#34d399; --rendah:#fbbf24; --kritis:#f43f5e; --offline:#64748b;
  --normal-g:rgba(52,211,153,.15); --rendah-g:rgba(251,191,36,.15);
  --kritis-g:rgba(244,63,94,.15); --offline-g:rgba(100,116,139,.15);
  --radius:14px; --radius-sm:10px;
  --shadow:0 4px 18px rgba(0,0,0,.35);
  --glow:0 0 0 1px rgba(34,211,238,.15), 0 8px 30px rgba(8,145,178,.12);
}
* { box-sizing:border-box; }
body {
  margin:0; font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:radial-gradient(1200px 600px at 80% -10%, rgba(20,43,77,.6), transparent),
             linear-gradient(160deg,var(--bg-grad1),var(--bg-grad2));
  background-attachment:fixed;
  color:var(--text); font-size:14px; line-height:1.5; min-height:100vh;
}
a { color:var(--primary); text-decoration:none; }
a:hover { color:#67e8f9; }
::selection{ background:rgba(34,211,238,.3); }

/* ---------- Topbar / Nav ---------- */
.topbar {
  display:flex; align-items:center; gap:16px;
  background:rgba(10,17,32,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); color:#fff; padding:0 18px; height:58px;
  position:sticky; top:0; z-index:50;
}
.topbar-brand { display:flex; align-items:center; gap:10px; font-weight:700; white-space:nowrap; letter-spacing:.3px; }
.topbar-brand::before{ content:''; width:10px; height:10px; border-radius:50%; background:var(--primary); box-shadow:0 0 10px var(--primary); }
.topbar-logo { height:30px; width:auto; border-radius:6px; background:#fff; padding:2px; }
.topnav { display:flex; gap:4px; flex:1; }
.topnav a { color:var(--muted); padding:8px 13px; border-radius:9px; font-weight:600; font-size:13px; transition:.15s; }
.topnav a:hover { background:var(--elev); color:#fff; }
.topnav a.active { background:linear-gradient(135deg,var(--primary-d),var(--primary)); color:#04141a; box-shadow:0 4px 14px rgba(34,211,238,.3); }
.topbar-user { display:flex; align-items:center; gap:10px; }
.user-chip { color:var(--text); font-size:13px; font-weight:600; }
.user-chip small { color:var(--faint); font-weight:400; }
.nav-toggle { display:none; background:none; border:none; color:#fff; font-size:22px; cursor:pointer; }

/* ---------- Layout ---------- */
.container { max-width:1320px; margin:0 auto; padding:20px; }
h1 { font-size:22px; font-weight:700; letter-spacing:.2px; }
.footer { text-align:center; color:var(--faint); padding:24px; font-size:12px; }

/* ---------- Statusbar tipis ---------- */
.statusbar {
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:12px 18px; box-shadow:var(--shadow); margin-bottom:18px;
}
.statusbar .spacer { flex:1; }
.statusbar .meta { color:var(--muted); font-size:12px; text-align:right; line-height:1.7; }
.conn-ok { color:var(--normal); font-weight:700; }
.conn-ok::before, .conn-bad::before{ content:'\25cf'; margin-right:5px; }
.conn-bad { color:var(--kritis); font-weight:700; }
.live-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--normal); margin-right:6px; box-shadow:0 0 8px var(--normal); animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.3;} }

/* ---------- KPI cards ---------- */
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
@media(max-width:860px){ .kpi-grid{ grid-template-columns:repeat(2,1fr);} }
.kpi {
  position:relative; overflow:hidden; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow);
}
.kpi::after{ content:''; position:absolute; right:-30px; top:-30px; width:90px; height:90px; border-radius:50%; opacity:.12; background:var(--accent,var(--primary)); }
.kpi .ico{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:19px; margin-bottom:10px; background:var(--accent-g,rgba(34,211,238,.15)); color:var(--accent,var(--primary)); }
.kpi .num{ font-size:30px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; }
.kpi .lbl{ color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.05em; margin-top:3px; }
.kpi .num small{ font-size:15px; font-weight:600; color:var(--muted); }
.kpi.k-total{ --accent:#22d3ee; --accent-g:rgba(34,211,238,.15);}
.kpi.k-normal{ --accent:var(--normal); --accent-g:var(--normal-g);}
.kpi.k-kritis{ --accent:var(--kritis); --accent-g:var(--kritis-g);}
.kpi.k-volume{ --accent:#818cf8; --accent-g:rgba(129,140,248,.15);}

/* ---------- Grid widget atas ---------- */
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; align-items:stretch; margin-bottom:18px; }
@media(max-width:980px){ .grid-3{ grid-template-columns:1fr; } }
.grid-main { display:grid; grid-template-columns:1fr 340px; gap:16px; align-items:start; }
@media(max-width:980px){ .grid-main{ grid-template-columns:1fr; } }

/* ---------- Card ---------- */
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:18px; }
.card h2, .card h3 { margin:0; padding:14px 18px; border-bottom:1px solid var(--line); font-size:14px; font-weight:700; letter-spacing:.3px; color:#cdd9ec; display:flex; align-items:center; gap:8px; }
.card h2::before, .card h3::before{ content:''; width:4px; height:15px; border-radius:3px; background:var(--primary); box-shadow:0 0 8px var(--primary); }
.card .body { padding:16px 18px; }

/* ---------- Donut & gauge ---------- */
.chart-center{ position:relative; display:flex; align-items:center; justify-content:center; min-height:170px; }
.chart-center canvas{ max-height:180px; }
.donut-overlay{ position:absolute; text-align:center; pointer-events:none; }
.donut-overlay .big{ font-size:30px; font-weight:800; }
.donut-overlay .sm{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.legend{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:4px 0 2px; }
.legend span{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.legend i{ width:9px; height:9px; border-radius:3px; }

.gauge-val{ text-align:center; margin-top:-6px; }
.gauge-val .big{ font-size:32px; font-weight:800; font-variant-numeric:tabular-nums; }
.gauge-val .unit{ color:var(--muted); font-size:13px; font-weight:600; }
.gauge-sub{ text-align:center; color:var(--muted); font-size:12px; margin-top:4px; }

/* ---------- Toolbar ---------- */
.toolbar { display:flex; gap:10px; padding:12px 18px; border-bottom:1px solid var(--line); flex-wrap:wrap; align-items:center; }
.toolbar input[type=search]{ flex:1; min-width:170px; }
.filter-chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip-btn { border:1px solid var(--line-2); background:var(--panel-2); color:var(--muted); border-radius:999px; padding:6px 13px; cursor:pointer; font-size:12.5px; font-weight:600; transition:.15s; }
.chip-btn:hover{ border-color:var(--primary); color:var(--text); }
.chip-btn.active { background:linear-gradient(135deg,var(--primary-d),var(--primary)); color:#04141a; border-color:transparent; }

/* ---------- Tabel ---------- */
table.data { width:100%; border-collapse:collapse; }
table.data th, table.data td { padding:11px 18px; text-align:left; border-bottom:1px solid var(--line); }
table.data th { background:var(--panel-2); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); font-weight:700; }
table.data tbody tr{ transition:background .12s; }
table.data tbody tr:hover { background:var(--elev); cursor:pointer; }
.val { font-weight:800; font-variant-numeric:tabular-nums; }
.trend { font-size:11px; margin-left:4px; }
.trend.up{color:var(--normal);} .trend.down{color:var(--kritis);} .trend.flat{color:var(--faint);}

/* sparkline */
.spark{ display:block; }
.spark polyline{ fill:none; stroke-width:1.8; }

/* ---------- Badge / pill ---------- */
.badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; border:1px solid transparent; }
.badge .dot{ width:7px;height:7px;border-radius:50%; }
.st-normal{ background:var(--normal-g); color:var(--normal); border-color:rgba(52,211,153,.3);} .st-normal .dot{background:var(--normal); box-shadow:0 0 6px var(--normal);}
.st-rendah{ background:var(--rendah-g); color:var(--rendah); border-color:rgba(251,191,36,.3);} .st-rendah .dot{background:var(--rendah); box-shadow:0 0 6px var(--rendah);}
.st-kritis{ background:var(--kritis-g); color:var(--kritis); border-color:rgba(244,63,94,.3);} .st-kritis .dot{background:var(--kritis); box-shadow:0 0 6px var(--kritis);}
.st-offline{ background:var(--offline-g); color:var(--muted); border-color:rgba(100,116,139,.3);} .st-offline .dot{background:var(--offline);}

.pill { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; font-weight:700; font-size:12.5px; }
.pill .dot { width:8px; height:8px; border-radius:50%; }
.pill.normal { background:var(--normal-g); color:var(--normal);} .pill.normal .dot{background:var(--normal);}
.pill.rendah { background:var(--rendah-g); color:var(--rendah);} .pill.rendah .dot{background:var(--rendah);}
.pill.kritis { background:var(--kritis-g); color:var(--kritis);} .pill.kritis .dot{background:var(--kritis);}
.pill.offline { background:var(--offline-g); color:var(--muted);} .pill.offline .dot{background:var(--offline);}

/* ---------- Widget samping (flow & panel) ---------- */
.metric { font-size:34px; font-weight:800; font-variant-numeric:tabular-nums; }
.metric small { font-size:14px; font-weight:600; color:var(--muted); }
.sub { color:var(--muted); font-size:12px; }
.kv { display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); }
.kv:last-child{ border-bottom:none; }
.phase { display:inline-flex; align-items:center; gap:7px; font-weight:700; }
.phase .dot{ width:13px;height:13px;border-radius:50%; }
.phase.on .dot{ background:var(--normal); box-shadow:0 0 10px var(--normal);} .phase.on{ color:var(--normal);}
.phase.off .dot{ background:var(--kritis); box-shadow:0 0 10px var(--kritis);} .phase.off{ color:var(--kritis);}
.relay-big { font-size:20px; font-weight:800; color:var(--primary); }
.relay-chips{ display:flex; gap:5px; flex-wrap:wrap; margin-top:4px; }
.relay-chips b{ width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; background:var(--panel-2); color:var(--faint); border:1px solid var(--line); }
.relay-chips b.on{ background:linear-gradient(135deg,var(--primary-d),var(--primary)); color:#04141a; border-color:transparent; box-shadow:0 0 12px rgba(34,211,238,.5); }

/* ---------- Summary cards (detail) ---------- */
.cards4 { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media(max-width:760px){ .cards4{ grid-template-columns:repeat(2,1fr);} }
.scard { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
.scard .label { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
.scard .num { font-size:24px; font-weight:800; font-variant-numeric:tabular-nums; margin-top:4px; }

/* ---------- Form / button ---------- */
label { display:block; margin-bottom:12px; font-weight:600; font-size:13px; color:#c4d0e2; }
input, select, button, textarea { font-family:inherit; font-size:14px; }
input[type=text],input[type=password],input[type=number],input[type=search],
input[type=datetime-local],input[type=time],select,textarea {
  width:100%; padding:10px 12px; border:1px solid var(--line-2); border-radius:9px; margin-top:5px;
  background:var(--panel-2); color:var(--text);
}
input::placeholder{ color:var(--faint); }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(34,211,238,.15); }
select option{ background:var(--panel); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 17px; border-radius:9px; border:1px solid var(--line-2); font-weight:700; cursor:pointer; background:var(--elev); color:var(--text); transition:.15s; }
.btn:hover{ border-color:var(--primary); }
.btn-primary{ background:linear-gradient(135deg,var(--primary-d),var(--primary)); color:#04141a; border-color:transparent; }
.btn-primary:hover{ filter:brightness(1.08); }
.btn-danger{ background:var(--kritis); color:#fff; border-color:transparent; }
.btn-ghost{ background:transparent; border-color:var(--line-2); color:var(--text); }
.btn-sm{ padding:6px 11px; font-size:13px; }
.btn-block{ width:100%; }

.alert{ padding:11px 15px; border-radius:9px; margin-bottom:15px; font-size:13px; font-weight:600; }
.alert-error{ background:var(--kritis-g); color:#fecdd3; border:1px solid rgba(244,63,94,.3); }
.alert-ok{ background:var(--normal-g); color:#a7f3d0; border:1px solid rgba(52,211,153,.3); }

.range-bar{ display:flex; gap:10px; flex-wrap:wrap; align-items:end; margin-bottom:18px; }

/* ---------- Login ---------- */
.login-page{ display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-card{ background:var(--panel); border:1px solid var(--line); padding:34px; border-radius:18px; width:350px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.login-card h1{ margin:0 0 2px; font-size:21px; text-align:center; }
.login-sub{ text-align:center; color:var(--muted); margin:0 0 22px; font-size:13px; }
.login-logo{ display:block; max-height:64px; margin:0 auto 16px; }

/* ---------- Peta ---------- */
#map{ height:72vh; min-height:440px; border-radius:var(--radius); border:1px solid var(--line); }
.leaflet-popup-content-wrapper{ background:var(--panel); color:var(--text); border-radius:10px; }
.leaflet-popup-tip{ background:var(--panel); }
.leaflet-popup-content a{ color:var(--primary); }

/* ---------- Pagination ---------- */
.pager{ display:flex; gap:6px; align-items:center; padding:14px 18px; justify-content:center; flex-wrap:wrap; }
.pager button{ min-width:38px; }

/* ---------- Editable rows (lokasi) ---------- */
.lrow{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:11px 18px; border-bottom:1px solid var(--line); }
.lrow:hover{ background:var(--elev); }
.lrow .tname{ font-family:monospace; color:var(--faint); min-width:110px; font-size:12px; }
.lrow input[type=text],.lrow input[type=number]{ margin-top:0; }
.lrow .grow{ flex:1; min-width:120px; }
.lhead{ display:flex; gap:8px; padding:9px 18px; font-size:11px; text-transform:uppercase; color:var(--faint); background:var(--panel-2); border-bottom:1px solid var(--line); font-weight:700; }

/* ---------- Responsive nav ---------- */
@media(max-width:780px){
  .nav-toggle{ display:block; order:3; }
  .topnav{ display:none; position:absolute; top:58px; left:0; right:0; flex-direction:column; background:var(--panel); padding:10px; border-bottom:1px solid var(--line); }
  body.nav-open .topnav{ display:flex; }
  .topbar-user .user-chip{ display:none; }
}
.hide{ display:none !important; }
.txt-muted{ color:var(--muted); }
.mt0{margin-top:0;} .mb0{margin-bottom:0;}
details summary{ color:var(--primary); }