/* =========================================================================
   MBG WATCH — DESIGN LAYER (v4)
   Dimuat setelah style.css. Berisi token warna final untuk tema gelap &
   terang, permukaan (sidebar, topbar, kartu), splash screen, dan layout PC.

   CATATAN KOMPATIBILITAS (penting):
   Layer sebelumnya memakai color-mix(), yang baru didukung Chrome 111+.
   Di Chrome/Edge lama (mis. Windows 7 -> Chrome 109) nilai itu gagal dibaca,
   sehingga latar sidebar/topbar/body menjadi transparan (putih) sementara
   teksnya tetap terang: menu "hilang" dan tema terlihat campur aduk.
   Layer ini TIDAK memakai color-mix(), oklch(), :has(), atau fitur CSS baru
   lain. Semua warna turunan didefinisikan eksplisit sebagai token.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKEN — TEMA GELAP (default)
   ------------------------------------------------------------------------- */
:root {
  --navy-900: #040B1C;
  --navy-800: #0A1631;
  --navy-700: #12254F;

  --bg-0: #060E20;
  --bg-1: #0A1631;
  --bg-2: #112247;
  --bg-card: #0D1B3D;
  --border-soft: rgba(160,185,235,0.11);
  --border-strong: rgba(160,185,235,0.24);

  --text-hi: #EEF3FF;
  --text-mid: #B6C4DE;
  --text-lo: #8496B5;

  --blue-600: #3B8CEB;
  --blue-500: #5AAEF7;
  --accent-cyan: #38CBE8;
  --accent-cyan-dim: rgba(56,203,232,0.15);
  --accent-cyan-line: rgba(56,203,232,0.45);
  --accent-green: #5FD068;
  --accent-green-dim: rgba(95,208,104,0.15);
  --accent-green-line: rgba(95,208,104,0.45);
  --accent-orange: #F5B940;
  --accent-orange-dim: rgba(245,185,64,0.16);
  --accent-orange-line: rgba(245,185,64,0.50);
  --accent-red: #FF6464;
  --accent-red-dim: rgba(255,100,100,0.17);
  --accent-red-line: rgba(255,100,100,0.50);
  --accent-gray: #8496B5;
  --accent-gray-dim: rgba(132,150,181,0.16);
  --accent-gray-line: rgba(132,150,181,0.45);
  --accent-gold: #E3BC42;
  --accent-gold-2: #B88912;
  --accent-gold-dim: rgba(227,188,66,0.14);
  --accent-gold-soft: rgba(227,188,66,0.40);

  --danger-wash: rgba(255,100,100,0.08);
  --danger-line: rgba(255,100,100,0.36);

  --banner-bg: rgba(245,185,64,0.10);
  --banner-fg: #F5B940;
  --banner-line: rgba(245,185,64,0.22);

  --aurora-a: rgba(56,203,232,0.10);
  --aurora-b: rgba(227,188,66,0.09);

  --map-sea-top: #0D1F44;
  --map-sea-bottom: #050D24;

  --glass-line: rgba(160,185,235,0.11);
  --accent-gradient: linear-gradient(135deg, #F0CB6B 0%, #DDB43C 55%, #C99A1E 100%);
  --accent-gradient-soft: linear-gradient(135deg, rgba(227,188,66,0.16), rgba(56,203,232,0.08));

  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 18px;

  --shadow-card: 0 1px 2px rgba(0,0,0,0.30), 0 10px 28px -14px rgba(0,0,0,0.55);
  --shadow-elevated: 0 2px 4px rgba(0,0,0,0.30), 0 24px 56px -18px rgba(0,0,0,0.70);

  /* splash */
  --splash-ring: rgba(227,188,66,0.45);
  --splash-sweep: #E3BC42;
  --splash-track: rgba(160,185,235,0.16);
  --splash-fill: linear-gradient(90deg, #E3BC42, #38CBE8);

  --ease-out: cubic-bezier(.16,.84,.32,1);
  --sidebar-w: 264px;
  --topbar-h: 68px;
}

/* -------------------------------------------------------------------------
   2. TOKEN — TEMA TERANG
   Sistemnya berdiri sendiri: kanvas abu-biru muda, kartu putih, teks navy.
   Warna teks status digelapkan agar lolos kontras WCAG AA di atas putih.
   ------------------------------------------------------------------------- */
[data-theme="light"] {
  --navy-900: #0A1B45;
  --navy-800: #102A63;
  --navy-700: #183B85;

  --bg-0: #EDF1F8;
  --bg-1: #FFFFFF;
  --bg-2: #F1F5FB;
  --bg-card: #FFFFFF;
  --border-soft: rgba(12,32,84,0.10);
  --border-strong: rgba(12,32,84,0.22);

  --text-hi: #0B1B45;
  --text-mid: #43567A;
  --text-lo: #5A6A88;

  --blue-600: #1769C2;
  --blue-500: #2388D9;
  --accent-cyan: #0E7490;
  --accent-cyan-dim: rgba(14,116,144,0.12);
  --accent-cyan-line: rgba(14,116,144,0.45);
  --accent-green: #2C7A3A;
  --accent-green-dim: rgba(44,122,58,0.12);
  --accent-green-line: rgba(44,122,58,0.45);
  --accent-orange: #B05F00;
  --accent-orange-dim: rgba(176,95,0,0.12);
  --accent-orange-line: rgba(176,95,0,0.50);
  --accent-red: #C42B2B;
  --accent-red-dim: rgba(196,43,43,0.11);
  --accent-red-line: rgba(196,43,43,0.45);
  --accent-gray: #667794;
  --accent-gray-dim: rgba(102,119,148,0.14);
  --accent-gray-line: rgba(102,119,148,0.45);
  --accent-gold: #8A6200;
  --accent-gold-2: #6E4E00;
  --accent-gold-dim: rgba(138,98,0,0.11);
  --accent-gold-soft: rgba(138,98,0,0.32);

  --danger-wash: #FCEFEF;
  --danger-line: rgba(196,43,43,0.28);

  --banner-bg: #FFF3D2;
  --banner-fg: #7A4A00;
  --banner-line: #F0DDA0;

  --aurora-a: rgba(14,116,144,0.07);
  --aurora-b: rgba(138,98,0,0.06);

  --glass-line: rgba(12,32,84,0.09);
  --accent-gradient: linear-gradient(135deg, #E8C55A 0%, #D9AE38 55%, #C4961C 100%);
  --accent-gradient-soft: linear-gradient(135deg, rgba(138,98,0,0.10), rgba(14,116,144,0.06));

  --shadow-card: 0 1px 2px rgba(10,27,69,0.05), 0 8px 22px -14px rgba(10,27,69,0.20);
  --shadow-elevated: 0 2px 6px rgba(10,27,69,0.07), 0 22px 48px -18px rgba(10,27,69,0.28);

  --map-land-top: rgba(216,180,84,0.85);
  --map-land-bottom: rgba(168,124,40,0.88);
  --map-land-glow: rgba(138,98,0,0.28);
  --map-land-stroke: rgba(110,78,10,0.85);

  --splash-ring: rgba(10,27,69,0.28);
  --splash-sweep: #B8860B;
  --splash-track: rgba(10,27,69,0.13);
  --splash-fill: linear-gradient(90deg, #102A63, #C4961C);
}

/* -------------------------------------------------------------------------
   3. PERMUKAAN "SELALU GELAP"
   Sidebar, banner masthead, dan layar login selalu memakai palet navy —
   apa pun tema halamannya. Dengan begitu teks menu di sidebar SELALU
   terbaca dan identitas institusional tetap konsisten di dua tema.
   Token dideklarasikan lokal, jadi semua var(...) di dalamnya kembali ke
   nilai gelap.
   ------------------------------------------------------------------------- */
.login-gate, .sidebar, .view-header-masthead {
  --navy-900: #040B1C; --navy-800: #0A1631; --navy-700: #12254F;
  --bg-0: #060E20; --bg-1: #0A1631; --bg-2: #112247; --bg-card: #0D1B3D;
  --border-soft: rgba(160,185,235,0.11); --border-strong: rgba(160,185,235,0.24);
  --text-hi: #EEF3FF; --text-mid: #B6C4DE; --text-lo: #8496B5;
  --accent-cyan: #38CBE8; --accent-cyan-dim: rgba(56,203,232,0.15);
  --accent-green: #5FD068; --accent-green-dim: rgba(95,208,104,0.15);
  --accent-orange: #F5B940; --accent-orange-dim: rgba(245,185,64,0.16);
  --accent-red: #FF6464; --accent-red-dim: rgba(255,100,100,0.17);
  --accent-gray: #8496B5; --accent-gray-dim: rgba(132,150,181,0.16);
  --accent-gold: #E3BC42; --accent-gold-dim: rgba(227,188,66,0.14); --accent-gold-soft: rgba(227,188,66,0.40);
  --glass-line: rgba(160,185,235,0.11);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.30), 0 10px 28px -14px rgba(0,0,0,0.55);
  color: var(--text-hi);
}

/* -------------------------------------------------------------------------
   4. DASAR HALAMAN
   ------------------------------------------------------------------------- */
body {
  background-color: var(--bg-0);
  background-image:
    radial-gradient(ellipse 60% 340px at 12% 0%, var(--aurora-a), transparent 70%),
    radial-gradient(ellipse 55% 320px at 100% 0%, var(--aurora-b), transparent 70%);
  background-repeat: no-repeat;
  background-attachment: scroll;
  color: var(--text-hi);
}
.app-shell::before { display: none; }          /* grid dekoratif: dibuang (ringan untuk PC lama) */
.app-shell::after {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 50;
  background: var(--accent-gradient); pointer-events: none;
}
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 20px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-gold-soft); background-clip: padding-box; }
::selection { background: var(--accent-gold-soft); color: var(--text-hi); }
:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; }

/* Banner prototipe: terbaca di dua tema (dulu oranye pucat di atas putih) */
.proto-banner {
  background: var(--banner-bg); color: var(--banner-fg);
  border-bottom: 1px solid var(--banner-line);
  font-size: 12px; font-weight: 600; letter-spacing: .01em; padding: 8px 16px;
}

/* -------------------------------------------------------------------------
   5. SIDEBAR
   ------------------------------------------------------------------------- */
.sidebar {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, #0B1839 0%, #07112B 100%);
  border-right: 1px solid rgba(160,185,235,0.10);
  box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 22px 14px 16px;
}
.sidebar-brand {
  padding: 2px 8px 18px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
}
.sidebar-brand .brand-mark img, .login-brand .brand-mark img, .topbar .brand-mark img {
  width: 38px; height: 38px; border-radius: 50%;
  box-shadow: 0 0 0 2px #0A1631, 0 0 0 3px var(--accent-gold-soft);
}
.brand-title { font-size: 16px; font-weight: 800; letter-spacing: .01em; color: #fff; }
.brand-tag { font-size: 10px; color: var(--accent-gold); letter-spacing: .08em; }

.nav-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--text-lo);
  margin: 20px 12px 6px;
}
.nav-label:first-child { margin-top: 8px; }
.nav-item {
  padding: 10px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 500;
  color: var(--text-mid); gap: 12px;
  transition: background .15s ease, color .15s ease;
}
.nav-item .ic { width: 18px; height: 18px; opacity: .9; }
.nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; transform: none; }
.nav-item.is-active {
  background: rgba(227,188,66,0.14); color: #F3D272; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(227,188,66,0.22);
}
.nav-item.is-active::before {
  left: -14px; width: 4px; height: 58%;
  background: var(--accent-gold);
  border-radius: 0 4px 4px 0;
}
.sidebar-footer { border-top: 1px solid var(--border-soft); padding-top: 14px; margin-top: 12px; }
.operator {
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-soft);
  border-radius: 12px; padding: 10px 12px;
}
.operator-name { color: #fff; }
.operator-status { color: var(--text-mid); }
.sidebar .avatar { background: rgba(227,188,66,0.18); color: #F3D272; }

/* -------------------------------------------------------------------------
   6. TOPBAR
   ------------------------------------------------------------------------- */
.topbar {
  height: var(--topbar-h);
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-soft);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 0 28px; gap: 18px;
}
.topbar-title span:first-child { font-size: 15px; font-weight: 800; letter-spacing: -.005em; color: var(--text-hi); }
.topbar-sub { font-size: 11px; color: var(--text-lo); }
.topbar-search {
  background: var(--bg-2); border: 1px solid var(--border-soft); border-radius: 12px;
  padding: 0 14px; height: 42px; max-width: 460px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.topbar-search:focus-within { border-color: var(--accent-gold-soft); box-shadow: 0 0 0 3px var(--accent-gold-dim); background: var(--bg-card); }
.topbar-search input { font-size: 13.5px; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 12px; background: var(--bg-2);
  border: 1px solid var(--border-soft); color: var(--text-mid);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.icon-btn:hover { color: var(--text-hi); border-color: var(--border-strong); background: var(--bg-card); transform: none; box-shadow: none; }
.icon-btn svg { width: 18px; height: 18px; }
.user-chip {
  height: 42px; border-radius: 14px; padding: 0 12px 0 5px; background: var(--bg-2);
  border: 1px solid var(--border-soft); color: var(--text-hi); font-weight: 600;
}
.user-chip .avatar { width: 32px; height: 32px; }
.badge { border: 2px solid var(--bg-1); box-sizing: content-box; }

.notif-panel { right: 28px; top: calc(var(--topbar-h) + 6px); width: 360px; border-radius: 16px; box-shadow: var(--shadow-elevated); border-color: var(--border-strong); }

/* -------------------------------------------------------------------------
   7. KONTEN & HEADER HALAMAN
   ------------------------------------------------------------------------- */
.content { padding: 26px 30px 40px; max-width: 1680px; }
.view { animation: viewFadeIn .3s var(--ease-out) both; }
@keyframes viewFadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .view { animation: none; } }

/* Judul halaman biasa: solid, tanpa teks gradien */
.view-header h1 {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--text-hi); -webkit-text-fill-color: currentColor;
  font-size: 26px; letter-spacing: -.02em; margin: 0 0 4px;
}
.view-header p.muted, .view-header .muted { font-size: 13.5px; }
.datetime { color: var(--text-mid); }

/* Masthead (Overview + Dapur): banner navy dengan aksen emas */
.view-header-masthead {
  display: block; position: relative; overflow: hidden;
  background: linear-gradient(115deg, #0A1839 0%, #0F2A63 60%, #163780 100%);
  border: 1px solid rgba(227,188,66,0.30);
  border-radius: 18px; padding: 24px 28px 18px; margin-bottom: 18px;
  box-shadow: var(--shadow-card);
}
.view-header-masthead::before {
  content: ""; position: absolute; top: -90px; right: -40px; width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(227,188,66,0.20), transparent 68%); pointer-events: none;
}
.view-header-masthead h1 {
  color: #fff; -webkit-text-fill-color: #fff; font-size: 30px; margin: 0 0 2px; letter-spacing: -.02em;
}
.view-header-masthead .muted { color: #B6C4DE; }
.masthead-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; position: relative; z-index: 1; }
.masthead-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.masthead-logo {
  flex-shrink: 0; width: 60px; height: 60px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 2px #0A1839, 0 0 0 4px rgba(227,188,66,0.55), 0 8px 22px -8px rgba(0,0,0,0.6);
}
.masthead-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.view-header-masthead .view-header-meta { position: relative; z-index: 1; align-items: flex-end; }
.view-header-masthead .datetime { color: #B6C4DE; font-size: 12.5px; }
.masthead-bottom {
  position: relative; z-index: 1; margin-top: 16px; padding-top: 14px; margin-bottom: 0;
  border-top: 1px solid rgba(160,185,235,0.18);
}
.masthead-bottom #dapurGreeting { margin: 0; }
.view-header-masthead .sim-badge { background: rgba(227,188,66,0.16); color: #F3D272; border-color: rgba(227,188,66,0.45); }
.view-header-masthead .status-pill { background: rgba(95,208,104,0.16); color: #7DE087; }

.sim-badge { border-radius: 8px; letter-spacing: .05em; }
.status-pill { border-radius: 20px; }

.topbar-logo { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 0 0 1.5px var(--glass-line); }
.topbar-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* -------------------------------------------------------------------------
   8. KPI: STRIP LIVE (satu batang menyatu) + KARTU STATUS
   ------------------------------------------------------------------------- */
.pulse-strip {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-bottom: 18px;
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: 16px; box-shadow: var(--shadow-card); overflow: hidden;
}
.pulse-strip .pulse-item {
  background: transparent; border: none; border-right: 1px solid var(--border-soft);
  border-radius: 0; box-shadow: none; padding: 16px 22px; gap: 12px;
}
.pulse-strip .pulse-item:last-child { border-right: none; }
.pulse-value { font-size: 22px; letter-spacing: -.02em; }
.pulse-label { font-size: 11.5px; color: var(--text-mid); margin-top: 2px; }
.pulse-item-admin .pulse-value { color: var(--accent-green); }
.pulse-value.pulse-flash { color: var(--accent-gold); }

.stats-grid { gap: 16px; margin-bottom: 20px; }
.stat-card {
  position: relative; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border-soft);
  border-radius: 14px; padding: 18px 18px 16px 22px;
  box-shadow: inset 4px 0 0 var(--stat-line, var(--border-strong)), var(--shadow-card);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.stat-card:hover { transform: none; box-shadow: inset 4px 0 0 var(--stat-line, var(--border-strong)), var(--shadow-elevated); }
.stat-card::before { display: none; }
.stat-card > * { position: relative; z-index: 1; }
.stat-card.accent-green  { --stat-line: var(--accent-green);  border-top: 1px solid var(--border-soft); }
.stat-card.accent-cyan   { --stat-line: var(--accent-cyan);   border-top: 1px solid var(--border-soft); }
.stat-card.accent-orange { --stat-line: var(--accent-orange) }
.stat-card.accent-red    { --stat-line: var(--accent-red);    border-top: 1px solid var(--border-soft); }
.stat-card.accent-gray   { --stat-line: var(--accent-gray);   border-top: 1px solid var(--border-soft); }
.stat-card.accent-gold   { --stat-line: var(--accent-gold);   border-top: 1px solid var(--border-soft); }
.stat-top { margin-bottom: 12px; gap: 10px; }
.stat-card .stat-label { font-size: 12px; color: var(--text-mid); font-weight: 500; letter-spacing: 0; line-height: 1.3; }
.stat-card .stat-value { font-size: 32px; letter-spacing: -.03em; margin: 0 0 12px; line-height: 1.1; }
.stat-icon { border-radius: 9px; box-shadow: none; }
.stat-bar { height: 5px; background: var(--bg-2); }

/* -------------------------------------------------------------------------
   9. PANEL, TOMBOL, CHIP, TABEL
   ------------------------------------------------------------------------- */
.critical-strip {
  background: var(--danger-wash); border: 1px solid var(--danger-line);
  border-radius: 16px; padding: 18px 20px; margin-bottom: 20px;
}
.strip-head strong { color: var(--accent-red); font-size: 13px; letter-spacing: .04em; }
.strip-item { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 12px; padding: 14px 16px; box-shadow: none; }
.strip-item:hover { transform: none; box-shadow: none; }
.strip-sppg { font-size: 13.5px; color: var(--text-hi); }
.strip-msg { font-size: 12.5px; }

.section-row { grid-template-columns: minmax(0, 1.7fr) minmax(340px, 1fr); gap: 20px; margin-bottom: 20px; }
.panel {
  border-radius: 16px; background: var(--bg-card); border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card); margin-bottom: 20px;
}
.section-row > .panel { margin-bottom: 0; }
.panel-head { padding: 16px 22px; border-bottom: 1px solid var(--border-soft); }
.panel-head h2 { font-size: 15px; font-weight: 700; letter-spacing: -.005em; }
.panel-map, .panel-map-large { border-radius: 16px; background: var(--bg-card); }
.panel-map .map-wrap svg, .panel-map-large .map-wrap svg { box-shadow: inset 0 0 0 1px var(--border-soft); border-radius: 12px; }

.link-btn { color: var(--accent-gold); font-weight: 600; }
.btn-primary {
  background: var(--accent-gradient); border: none; color: #1A1304; font-weight: 700;
  border-radius: 12px; padding: 10px 20px; box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 6px 16px -8px rgba(201,154,30,0.7);
  transition: filter .15s ease, box-shadow .15s ease;
}
.btn-primary:hover { filter: brightness(1.06); transform: none; }
.btn-ghost { border-radius: 12px; background: var(--bg-card); color: var(--text-mid); border: 1px solid var(--border-strong); transition: background .15s ease, color .15s ease, border-color .15s ease; }
.btn-ghost:hover { background: var(--bg-2); color: var(--text-hi); transform: none; }

.chip { border-radius: 20px; padding: 7px 14px; background: var(--bg-card); border: 1px solid var(--border-soft); transition: background .15s ease, border-color .15s ease, color .15s ease; }
.chip:hover { border-color: var(--border-strong); color: var(--text-hi); transform: none; }
.chip.is-active { background: var(--accent-gold-dim); border-color: var(--accent-gold-soft); color: var(--accent-gold); box-shadow: none; font-weight: 600; }
select#provinceFilter { border-radius: 12px; height: 38px; }

.map-zoom-controls button, .modal-close { border-radius: 10px; }
.map-zoom-controls button:hover, .modal-close:hover { transform: none; box-shadow: none; }

/* Kartu yang bisa diklik: cukup ganti border, tanpa "melayang" */
.risk-card, .cctv-card, .sppg-card, .role-card { transition: border-color .15s ease, box-shadow .15s ease; }
.risk-card:hover, .cctv-card:hover, .sppg-card:hover { transform: none; border-color: var(--accent-gold-soft); box-shadow: var(--shadow-elevated); }
.cctv-card, .risk-card, .menu-day-card, .sppg-card { border-radius: 14px; }
.cctv-grid { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 18px; }
.risk-grid { gap: 16px; }

.attention-row { padding: 13px 14px; }
.attention-row:hover { background: var(--bg-2); }
.ops-list li { padding: 12px 14px; }

.data-table th { background: var(--bg-2); color: var(--text-mid); font-weight: 600; font-size: 12px; letter-spacing: .02em; padding: 13px 18px; }
.data-table td { padding: 13px 18px; }
.data-table tbody tr:hover td { background: var(--bg-2); }

.modal-overlay { background: rgba(4,10,28,0.62); backdrop-filter: none; -webkit-backdrop-filter: none; }
.modal { background: var(--bg-card); border-radius: 18px; box-shadow: var(--shadow-elevated); }

.dot-normal { box-shadow: 0 0 8px var(--accent-green-dim), 0 0 0 3px var(--accent-green-dim); }
.dot-monitoring { box-shadow: 0 0 0 3px var(--accent-cyan-dim); }
.dot-warning { box-shadow: 0 0 0 3px var(--accent-orange-dim); }
.dot-critical { box-shadow: 0 0 0 3px var(--accent-red-dim); }

.site-footer { background: var(--bg-1) }
.site-footer strong { color: var(--text-hi); }

.live-toast { background: var(--bg-card); border-color: var(--border-strong); box-shadow: var(--shadow-elevated); }

/* -------------------------------------------------------------------------
   10. LOGIN (selalu gelap)
   ------------------------------------------------------------------------- */
.login-shell { background: var(--bg-card); backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 20px; border: 1px solid var(--border-strong); box-shadow: var(--shadow-elevated); }
.login-shell::before { display: none; }
.role-card { border-radius: 14px; }
.role-card:hover { border-color: var(--accent-gold-soft); transform: none; box-shadow: none; background: rgba(227,188,66,0.06); }

/* -------------------------------------------------------------------------
   11. SPLASH / LOADING SCREEN — dirancang untuk kedua tema
   Terang: kanvas putih-kebiruan, cincin navy, sapuan emas, teks navy.
   Gelap : navy pekat, cincin & sapuan emas.
   ------------------------------------------------------------------------- */
.splash-screen {
  background-color: var(--bg-0);
  background-image: radial-gradient(ellipse 60% 50% at 50% 42%, rgba(59,140,235,0.14), transparent 70%);
}
[data-theme="light"] .splash-screen {
  background-color: #EDF1F8;
  background-image: radial-gradient(ellipse 65% 55% at 50% 42%, #FFFFFF 0%, #F3F6FC 55%, rgba(237,241,248,0) 100%);
}
.splash-mark { width: 168px; height: 168px; margin-bottom: 14px; }
.splash-ring-outer { border: 1.5px dashed var(--splash-ring); opacity: 1; }
.splash-ring-mid { border: 1px solid var(--splash-ring); }
.splash-ring-sweep {
  background: conic-gradient(from 0deg, transparent 0deg, var(--splash-sweep) 20deg, transparent 52deg);
}
.splash-core img.splash-logo-img {
  width: 84px; height: 84px; background: #fff; padding: 0;
  box-shadow: 0 0 0 3px rgba(227,188,66,0.55), 0 10px 28px -8px rgba(10,27,69,0.45);
  filter: none; animation: none;
}
[data-theme="light"] .splash-core img.splash-logo-img { box-shadow: 0 0 0 3px rgba(138,98,0,0.45), 0 12px 30px -8px rgba(10,27,69,0.35); }
.splash-word {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--text-hi); -webkit-text-fill-color: currentColor;
  font-size: 28px; letter-spacing: .16em; margin-top: 10px;
}
.splash-sub { color: var(--text-mid); font-size: 11.5px; letter-spacing: .16em; margin-top: 8px; font-weight: 500; }
.splash-progress-track { width: 280px; height: 5px; background: var(--splash-track); margin-top: 30px; }
.splash-progress-fill { background: var(--splash-fill); border-radius: 4px; }
.splash-status { color: var(--text-mid); font-size: 11.5px; margin-top: 14px; }
.splash-footer { color: var(--banner-fg); font-size: 11px; font-weight: 700; letter-spacing: .08em; }

/* -------------------------------------------------------------------------
   12. LAYAR LEBAR (PC)
   ------------------------------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1279px) {
  :root { --sidebar-w: 236px; }
  .content { padding: 22px 22px 36px; }
  .topbar { padding: 0 20px; }
  .section-row { grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); }
  .stat-card .stat-value { font-size: 28px; }
  .pulse-strip .pulse-item { padding: 14px 16px; }
  .pulse-value { font-size: 19px; }
}
@media (min-width: 1440px) {
  .content { padding: 30px 40px 48px; }
  .topbar { padding: 0 40px; }
  .notif-panel { right: 40px; }
  .stats-grid { gap: 20px; }
}
@media (min-width: 1920px) {
  :root { --sidebar-w: 280px; }
  .content { max-width: 1800px; }
  .stat-card .stat-value { font-size: 36px; }
}

/* Tablet & HP: tetap memakai tata letak bawaan (bottom nav), hanya token ini */
@media (max-width: 1024px) {
  :root { --topbar-h: 60px; }
  .topbar { padding: 0 14px; gap: 10px; }
  .content { padding: 14px 14px 20px; }
  .pulse-strip { grid-template-columns: repeat(3, 1fr); }
  .pulse-strip .pulse-item { border-bottom: 1px solid var(--border-soft); }
  .section-row { grid-template-columns: 1fr; }
  .view-header-masthead { padding: 18px 18px 14px; }
  .view-header-masthead h1 { font-size: 24px; }
  .masthead-logo { width: 48px; height: 48px; }
  .notif-panel { right: 12px; width: min(360px, calc(100vw - 24px)); }
}
@media (max-width: 640px) {
  .pulse-strip {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr);
    overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
    margin: 0 0 16px; border-radius: 14px;
  }
  .pulse-strip .pulse-item { border-bottom: none; scroll-snap-align: start; }
  .view-header-masthead { padding: 14px 14px 12px; }
  .view-header-masthead h1 { font-size: 20px; }
  .masthead-logo { width: 40px; height: 40px; }
  .stat-card .stat-value { font-size: 22px; }
  .cctv-grid { grid-template-columns: 1fr; }
}

/* Ikon segitiga alert: sebelumnya terisi hitam default SVG */
.strip-icon svg { fill: var(--accent-red-dim); stroke: var(--accent-red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Daftar Early Warning: dua kolom di layar lebar supaya tidak memanjang */
@media (min-width: 1280px) {
  #view-alerts .alert-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 0; margin-top: 16px; }
}