/* THEME-BUILD: 2026-08-25-darkblue-v9-card-pekat */
:root, [data-theme="dark"] {
  --navy: #030916;
  --navy-2: #071224;
  --navy-light: #0d1d33;
  --accent: #2f97ff;
  --accent-2: #6fd4ff;
  --bg: #020610;
  --surface: #040e1c;
  --surface-2: #081a2c;
  --border-soft: rgba(255,255,255,0.08);
  --text-main: #dfe8f4;
  --text-muted: #8ea1b8;
  --hover-tint: rgba(255,255,255,0.05);
  --clr-primary: #6fb0ea;
  --clr-success: #4fd08e;
  --clr-danger:  #f2999c;
  --clr-warning: #f6bd5b;
  --subtle-primary: rgba(47,151,255,0.22);
  --subtle-success: rgba(35,178,109,0.22);
  --subtle-danger:  rgba(229,72,77,0.22);
  --subtle-warning: rgba(245,166,35,0.22);
  --alert-success-bg: rgba(35,178,109,0.18);
  --alert-success-text: #7ee0ac;
  --alert-success-border: rgba(35,178,109,0.3);
  --alert-danger-bg: rgba(229,72,77,0.18);
  --alert-danger-text: #f5a2a4;
  --alert-danger-border: rgba(229,72,77,0.3);
  --alert-warning-bg: var(--surface-2);
  --alert-warning-text: var(--text-main);
  --alert-warning-border: rgba(245,166,35,0.35);
  --alert-info-bg: rgba(47,151,255,0.18);
  --alert-info-text: #8fc3f2;
  --alert-info-border: rgba(47,151,255,0.3);
}

[data-theme="light"] {
  --bg: #eef2f7;
  --surface: #ffffff;
  --surface-2: #fbfcfe;
  --border-soft: rgba(15,41,66,0.08);
  --text-main: #16283e;
  --text-muted: #8291a3;
  --hover-tint: rgba(15,41,66,0.04);
  --clr-primary: #2f97ff;
  --clr-success: #178a53;
  --clr-danger:  #b3272b;
  --clr-warning: #d4820a;
  --subtle-primary: #dbeafe;
  --subtle-success: #d7f5e6;
  --subtle-danger:  #fbdcdd;
  --subtle-warning: #fdedd2;
  --alert-success-bg: #d7f5e6;
  --alert-success-text: #178a53;
  --alert-success-border: #b6e9cd;
  --alert-danger-bg: #fbdcdd;
  --alert-danger-text: #b3272b;
  --alert-danger-border: #f5c1c2;
  --alert-warning-bg: #fdedd2;
  --alert-warning-text: #a15e04;
  --alert-warning-border: #f8d99a;
  --alert-info-bg: #dbeafe;
  --alert-info-text: #1b5eae;
  --alert-info-border: #b9d7f7;
}

* { box-sizing: border-box; }

/* Scrollbar utama HALAMAN (bukan lagi punya sidebar sendiri -- lihat
   komentar di ".sidebar" soal kenapa sidebar sekarang ikut scroll bareng
   halaman). Dikustomisasi supaya jelas kelihatan sebagai SATU garis yang
   bisa ditarik naik-turun, dan overflow-y dikunci "scroll" (bukan "auto")
   supaya garisnya SELALU tampil dari awal, tidak baru muncul setelah
   discroll / tidak hilang-hilangan tergantung tinggi konten -- konsisten
   di semua halaman, termasuk yang kontennya pendek. */
html {
  /* Ukuran huruf dasar aplikasi -- SEBELUMNYA ikut default browser (16px),
     yang bikin tabel dengan banyak kolom (mis. Profil Langganan: Nama
     Profil/Router/Tipe/Media/Group/Rate Limit/Shared/Aktif/Harga/Komisi/
     Status/Aksi) jadi terlalu lebar & hurufnya kelihatan kebesaran sampai
     tidak muat pas di layar. Diperkecil sedikit di sini -- karena hampir
     semua ukuran di Bootstrap (badge, tombol, form, tabel, heading) pakai
     satuan rem yang relatif ke nilai ini, satu baris ini otomatis
     mengecilkan SEMUA halaman (admin & reseller, termasuk semua menu grup
     di sidebar) secara proporsional tanpa perlu ubah tiap komponen satu-satu.
  */
  font-size: 14px;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.45) rgba(255,255,255,0.06);
}
html::-webkit-scrollbar {
  width: 10px;
}
html::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.06);
}
html::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.45);
  border-radius: 10px;
  border: 2px solid rgba(12,20,33,0.9);
}
html::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255,255,255,0.65);
}

body {
  background:
    radial-gradient(circle at 10% 0%, rgba(47,151,255,0.14) 0%, transparent 45%),
    radial-gradient(circle at 90% 10%, rgba(111,212,255,0.12) 0%, transparent 40%),
    var(--bg);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  color: var(--text-main);
  font-feature-settings: "tnum" 1, "cv05" 1;
}

/* Angka statistik, jam, badge status, dan teks teknis (kode/IP/username)
   dipakaikan monospace ala dashboard NOC -- kesan presisi & profesional,
   angka jadi selalu rata (tabular), gampang dipindai cepat. */
code, kbd, pre,
.stat-v2-value,
.topbar-clock,
.router-info-item,
.table code,
.font-mono {
  font-family: "JetBrains Mono", "Roboto Mono", ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.stat-v2-value { letter-spacing: -0.01em; }

/* Sidebar */
.sidebar {
  width: 250px;
  /* PENTING: flex-shrink:0 mengunci lebar sidebar supaya TIDAK PERNAH
     disusutkan oleh flexbox. Sebelumnya sidebar sempat diberi
     "overflow-x: hidden" langsung di elemen flex ini untuk jaga-jaga, tapi
     itu berefek samping: menurut spesifikasi flexbox, item yang overflow-nya
     bukan "visible" otomatis boleh menyusut sampai 0 (lebih kecil dari
     kontennya) kalau ruang dianggap kurang oleh browser — misalnya karena
     tabel lebar (mis. tabel OLT/ONU) di konten sebelah kanan. Akibatnya
     sidebar tampak kepotong sempit & teks menu berantakan seperti di
     screenshot. flex-shrink:0 memastikan lebar sidebar selalu tetap 250px
     apa pun isi kontennya. */
  flex-shrink: 0;
  /* BUGFIX (revert dari pendekatan sebelumnya): sebelumnya dikunci
     "height: 100vh" + .sidebar-nav discroll SENDIRI secara terpisah
     (overflow-y:auto internal). Masalahnya: begitu beberapa grup dibuka
     sekaligus dan menunya lebih panjang dari 1 layar, yang bisa digulir
     cuma area SEMPIT di dalam sidebar itu sendiri -- gampang tidak
     ketemu/tidak disadari ada scrollbar terpisah di situ, jadi kelihatan
     seperti menu di bagian bawah "hilang/ketutup" permanen padahal
     sebenarnya cuma perlu di-scroll dengan cara yang tidak jelas.
     Sekarang "height: 100vh" & "max-height: 100vh" DIHAPUS, diganti
     "min-height: 100vh" (cuma standar minimum, bukan batas atas) supaya
     sidebar boleh memanjang ke bawah kalau isinya memang lebih tinggi dari
     1 layar. "align-self: flex-start" dipakai supaya sidebar TIDAK
     dipaksa stretch setinggi kolom konten di sebelahnya oleh flexbox --
     tingginya murni mengikuti isi menu sendiri. Hasilnya: begitu sidebar
     lebih tinggi dari layar, dia otomatis ikut discroll bareng SATU
     scrollbar utama halaman (yang sudah biasa dipakai semua orang),
     bukan scrollbar tersembunyi kedua yang membingungkan. */
  min-height: 100vh;
  align-self: flex-start;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #cddbea;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  box-shadow: 3px 0 18px rgba(0,0,0,0.18);
}
.sidebar-brand {
  padding: 24px 22px;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #fff;
}
/* Font & warna teks nama aplikasi disesuaikan dengan logotype SafeNode
   (Poppins semi-bold, biru khas logo) supaya senada dengan gambar logo. */
.brand-font {
  font-family: "Poppins", "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.sidebar-brand i { color: var(--accent-2); font-size: 1.4rem; }
/* Logo dibungkus <a> supaya bisa diklik balik ke Dashboard -- reset semua
   gaya default link (warna biru & garis bawah) biar tampilannya persis
   sama seperti sebelum logo bisa diklik. */
.sidebar-brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  width: 100%;
  cursor: pointer;
}
.sidebar-brand-link:hover,
.sidebar-brand-link:focus {
  color: inherit;
  text-decoration: none;
}
.sidebar-logo-img {
  max-height: 34px;
  max-width: 40px;
  object-fit: contain;
  border-radius: 6px;
}
.sidebar-logo-img-lg {
  max-height: 100px;
  max-width: 100%;
  width: auto;
  height: auto;
  background: #fff;
  padding: 8px 12px;
  border-radius: 8px;
}
.sidebar .nav-link {
  color: #a9bcd4;
  padding: 11px 16px;
  margin: 2px 12px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 11px;
  border-left: 3px solid transparent;
  font-size: 0.92rem;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.sidebar .nav-link i { font-size: 1rem; width: 18px; text-align: center; }

/* Item menu tingkat atas yang hurufnya sengaja dibikin sama persis gayanya
   kayak label grup (mis. "CUSTOMER", "POP SITE") -- uppercase, kecil, tebal,
   ber-letter-spacing -- supaya baris ini nyambung secara visual dengan
   baris-baris grup lain di sekitarnya walau dia sendiri bukan grup/tidak
   collapsible (klik langsung ke halaman, seperti Dashboard).
   Tombol grup (.sidebar-group-title) tidak punya margin kiri-kanan (dia
   selebar penuh sidebar), sedangkan .nav-link biasa punya margin 12px kiri-
   kanan buat kotak highlight rounded-nya -- itu yang bikin ikonnya kelihatan
   "lebih menjorok" dibanding label grup di atas/bawahnya. Nolkan margin
   kiri-kanannya di sini (ganti dengan padding kiri-kanan yang senilai)
   supaya ikon & tulisannya SEJAJAR PERSIS dengan "POP SITE"/"CUSTOMER". */
.sidebar .nav-link.nav-link-grouplike {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-2);
  opacity: 0.85;
  margin-left: 0;
  margin-right: 0;
  padding-left: 16px;
  padding-right: 16px;
  border-radius: 0;
}
.sidebar .nav-link.nav-link-grouplike:hover {
  opacity: 1;
}
.sidebar .nav-link.nav-link-grouplike i.bi:not(.small) { font-size: 0.95rem; }

/* Icon berwarna: tiap item menu (termasuk submenu bertingkat) dapat warna
   icon yang beda-beda mengikuti urutannya di dalam grup, supaya tidak polos
   satu warna abu-abu semua. Warna cuma menempel di icon-nya sendiri (bukan
   ikut warna teks link), jadi tetap kelihatan berwarna walau link lagi
   hover/active. Chevron pembuka submenu (".small" / ".sidebar-group-caret")
   sengaja dikecualikan supaya tetap netral. */
.sidebar-nav .nav-item:nth-child(8n+1) > .nav-link i.bi:not(.small):not(.sidebar-group-caret) { color: #4ade80; }
.sidebar-nav .nav-item:nth-child(8n+2) > .nav-link i.bi:not(.small):not(.sidebar-group-caret) { color: #38bdf8; }
.sidebar-nav .nav-item:nth-child(8n+3) > .nav-link i.bi:not(.small):not(.sidebar-group-caret) { color: #fb923c; }
.sidebar-nav .nav-item:nth-child(8n+4) > .nav-link i.bi:not(.small):not(.sidebar-group-caret) { color: #c084fc; }
.sidebar-nav .nav-item:nth-child(8n+5) > .nav-link i.bi:not(.small):not(.sidebar-group-caret) { color: #fb7185; }
.sidebar-nav .nav-item:nth-child(8n+6) > .nav-link i.bi:not(.small):not(.sidebar-group-caret) { color: #facc15; }
.sidebar-nav .nav-item:nth-child(8n+7) > .nav-link i.bi:not(.small):not(.sidebar-group-caret) { color: #2dd4bf; }
.sidebar-nav .nav-item:nth-child(8n+0) > .nav-link i.bi:not(.small):not(.sidebar-group-caret) { color: #f472b6; }
.sidebar .nav-link.active i.bi:not(.small):not(.sidebar-group-caret) {
  /* Di dalam link yang aktif (background gradient biru terang), warna icon
     custom di atas malah kurang kebaca -- balikin ke putih khusus di state ini. */
  color: #fff;
}

.sidebar .nav-link:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}
.sidebar .nav-link:active,
.sidebar .nav-link:focus,
.sidebar .nav-link:focus-visible {
  background: var(--subtle-primary);
  color: #fff;
  outline: none;
  box-shadow: none;
}
.sidebar .nav-link.active {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #fff;
  border-left-color: transparent;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(47,151,255,0.35);
}
.sidebar .nav-link.active:hover,
.sidebar .nav-link.active:active,
.sidebar .nav-link.active:focus {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #fff;
}
.sidebar-footer {
  margin-top: auto;
  padding: 18px 22px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Sidebar: grup menu collapsible */
.sidebar-nav {
  flex: 1 1 auto;
  /* BUGFIX: dulu bagian ini yang jadi scroll container SENDIRI (overflow-y:
     auto/scroll + min-height:0) supaya muat pas 1 layar sementara .sidebar
     dikunci height:100vh. Sekarang .sidebar tidak dikunci tingginya lagi
     (lihat komentar di .sidebar), jadi bagian ini juga tidak boleh punya
     scroll/clip sendiri -- overflow diset "visible" supaya daftar menu
     baru boleh memanjang mengikuti .sidebar-nya, dan yang menggulir cukup
     SATU scrollbar utama halaman saja, tidak ada scrollbar tersembunyi
     kedua lagi di sini. */
  overflow-y: visible;
  overflow-x: hidden;
  padding-bottom: 10px;
}
/* FIX: Bootstrap ".nav" bawaan punya "flex-wrap: wrap". Karena sidebar cuma
   menambahkan ".flex-column" (cuma ganti arah, wrap-nya tetap nyala), begitu
   tinggi isi sidebar (atau isi 1 grup) melebihi tinggi kontainernya, flexbox
   otomatis melipat ke KOLOM BARU di sampingnya. Itu penyebab menu kelihatan
   "2 blok" berdampingan dan submenu grup melebar ke samping alih-alih turun
   ke bawah. Matikan wrap-nya supaya menu selalu tersusun 1 kolom vertikal
   dan meninggi ke bawah (discroll), bukan melebar ke samping.*/
.sidebar .nav.flex-column,
.sidebar-nav,
.sidebar-group-body {
  flex-wrap: nowrap !important;
}
.sidebar-group {
  margin-bottom: 2px;
  /* PENTING: "overflow-x: hidden" TANPA "overflow-y" ikut diisi bikin browser
     otomatis menganggap overflow-y = auto (aturan spek CSS: begitu salah satu
     sumbu overflow bukan "visible", sumbu satunya yang masih "visible" ikut
     dipaksa jadi "auto"). Karena tinggi isi tiap baris menu kadang lebih
     1-2px dari kotaknya (cuma soal pembulatan render, bukan kepanjangan
     beneran), browser jadi mengira kotak ini "bisa di-scroll" dan
     menampilkan scrollbar bawaan (tombol panah atas-bawah kecil) di SETIAP
     baris menu grup -- itu sumber "banyak garis/panah" yang muncul di
     sidebar, bukan bug dari desain kita. Ditulis eksplisit overflow-y:hidden
     supaya tidak pernah ke-auto-in browser. */
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
}
.sidebar-group-body {
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
}
.sidebar-group-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px 20px 10px 16px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-2);
  opacity: 0.85;
  transition: background 0.15s, opacity 0.15s;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.sidebar-group-title span {
  display: flex;
  align-items: center;
  gap: 9px;
}
.sidebar-group-title i.bi:not(.sidebar-group-caret) { font-size: 0.95rem; }

/* Icon grup (level atas) juga dikasih warna beda-beda per grup biar tidak
   satu warna abu-abu/accent semua -- tetap dipisah dari warna icon menu di
   dalamnya (di atas) supaya keduanya kelihatan sebagai 2 tingkatan visual. */
.sidebar-nav > .sidebar-group:nth-of-type(8n+1) .sidebar-group-title i.bi:not(.sidebar-group-caret) { color: #4ade80; }
.sidebar-nav > .sidebar-group:nth-of-type(8n+2) .sidebar-group-title i.bi:not(.sidebar-group-caret) { color: #38bdf8; }
.sidebar-nav > .sidebar-group:nth-of-type(8n+3) .sidebar-group-title i.bi:not(.sidebar-group-caret) { color: #fb923c; }
.sidebar-nav > .sidebar-group:nth-of-type(8n+4) .sidebar-group-title i.bi:not(.sidebar-group-caret) { color: #c084fc; }
.sidebar-nav > .sidebar-group:nth-of-type(8n+5) .sidebar-group-title i.bi:not(.sidebar-group-caret) { color: #fb7185; }
.sidebar-nav > .sidebar-group:nth-of-type(8n+6) .sidebar-group-title i.bi:not(.sidebar-group-caret) { color: #facc15; }
.sidebar-nav > .sidebar-group:nth-of-type(8n+7) .sidebar-group-title i.bi:not(.sidebar-group-caret) { color: #2dd4bf; }
.sidebar-nav > .sidebar-group:nth-of-type(8n+0) .sidebar-group-title i.bi:not(.sidebar-group-caret) { color: #f472b6; }

.sidebar-group-title:hover {
  opacity: 1;
  background: rgba(255,255,255,0.04);
}
.sidebar-group-title:active,
.sidebar-group-title:focus,
.sidebar-group-title:focus-visible {
  opacity: 1;
  background: rgba(47,151,255,0.18);
  outline: none;
  box-shadow: none;
}
.sidebar-group-caret {
  /* Sekarang berupa <svg> inline (bukan lagi ikon dari font Bootstrap
     Icons) -- sebelumnya di beberapa kondisi jaringan/environment, glyph
     font ikon panah ini gagal dimuat & digantikan browser dengan simbol
     font sistem lain yang tampilannya malah mirip kontrol spinner
     (▲ garis ▼), bikin sidebar kelihatan berantakan. SVG inline ini selalu
     digambar langsung dari kode, jadi tidak akan pernah gagal dimuat atau
     ketuker glyph apa pun kondisinya. */
  color: currentColor;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  opacity: 0.7;
}
.sidebar-group.open .sidebar-group-caret {
  transform: rotate(180deg);
}
/* Chevron submenu bertingkat (mis. "Network", "Billing" di dalam grup Modul
   Inti) dulu masih pakai <i class="bi bi-chevron-down small"> dari font
   Bootstrap Icons -- satu-satunya sisa caret yang belum ikut dipindah ke
   SVG inline di atas. Ini yang menyebabkan glyph "spinner" (▲ garis ▼)
   masih bisa muncul di posisi ini pada kondisi jaringan/environment
   tertentu walau caret level grup sudah aman. Disamakan jadi SVG inline
   juga (.sidebar-subcaret) supaya SATU-SATUNYA jenis caret di seluruh
   sidebar adalah SVG, tidak ada lagi jalur yang bisa balik ke glyph font. */
.sidebar-subcaret {
  opacity: 0.6;
}
.nav-link[aria-expanded="true"] .sidebar-subcaret {
  transform: rotate(180deg);
}
.sidebar-group-body {
  max-height: 0;
  overflow: hidden;
  /* Dulu ada "transition: max-height 0.25s ease" di sini supaya buka/tutup
     grup terasa halus. Masalahnya: selama 0.25 detik animasi itu berjalan,
     tinggi kotak ini ada di nilai TENGAH-TENGAH (misalnya baru 40% dari
     tinggi penuh) sehingga overflow:hidden memotong SEMUA baris menu di
     dalamnya rata di ketinggian yang sama -- kelihatan seperti teks tiap
     baris "terbelah"/cuma separuh atas yang muncul (bukan menu-nya hilang,
     cuma nangkep momen animasi lagi jalan). Paling kerasa kalau pengguna
     sempat screenshot/lihat tepat di tengah animasi. Transisi dimatikan
     supaya buka/tutup grup langsung penuh seketika -- semua menu di
     dalamnya PASTI langsung utuh kelihatan, tidak ada fase "terbelah". */
  transition: none;
}
.sidebar-group.open .sidebar-group-body {
  /* Fallback kalau JS belum sempat jalan; nilai asli dihitung dinamis lewat
     JS (lihat sinkronTinggiGrup di base.html) supaya submenu bertingkat
     seperti ACS tidak ke-clip walau grup "Modul Inti" isinya panjang. */
  max-height: 2000px;
}
/* Submenu bertingkat (Network/Billing/Payments dkk di dalam Modul Inti)
   pakai komponen collapse bawaan Bootstrap, yang oleh Bootstrap sendiri
   dikasih transisi "height" ~0.35 detik lewat class ".collapsing". Sama
   seperti di atas, itu bikin teks tiap baris kelihatan "terbelah" selagi
   animasinya jalan. Dimatikan juga supaya konsisten -- buka/tutup submenu
   bertingkat langsung penuh, tidak ada fase setengah-jadi. */
.sidebar-group .collapsing {
  transition: none !important;
}
.sidebar-group .nav-link,
.sidebar-group-body .nav-link,
.sidebar-group-body[data-group-body] .nav-link {
  padding-left: 42px !important;
  font-size: 0.88rem !important;
  font-weight: 400;
}
/* Submenu bertingkat (mis. Network/Billing/Payments di dalam grup Modul Inti)
   dimundurkan lagi supaya kelihatan jelas ini level ke-3, bukan sejajar
   dengan menu grup level ke-2 di atasnya. */
.sidebar-group .collapse .nav-link {
  padding-left: 52px !important;
}
.sidebar-group .nav-link.active {
  font-weight: 600;
}

/* ============ RESPONSIVE / MODE HP ============ */
.topbar-hamburger {
  font-size: 1.25rem;
  padding: 4px 8px;
  margin-right: 2px;
}
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1040;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.sidebar-overlay.show {
  display: block;
  opacity: 1;
}

@media (max-width: 991.98px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1050;
    width: 268px;
    max-width: 82vw;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    /* PENTING: khusus mode HP, sidebar jadi panel "position: fixed" (laci
       dari samping) -- BUKAN lagi bagian dari alur halaman seperti versi
       desktop di atas, jadi scroll utama halaman TIDAK BISA menjangkau
       menu yang letaknya di bawah kalau kepanjangan. Di mode ini sidebar
       WAJIB punya scroll sendiri, makanya overflow-y:auto dikembalikan
       khusus di sini (desktop tetap tidak pakai ini, ikut komentar di
       ".sidebar" atas). */
    overflow-y: auto;
  }
  .sidebar.mobile-open {
    transform: translateX(0);
  }
  .content {
    width: 100%;
    min-width: 0;
  }
  body.sidebar-lock-scroll {
    overflow: hidden;
  }
}
@media (min-width: 992px) {
  .sidebar-overlay { display: none !important; }
}

@media (max-width: 767.98px) {
  .content > .p-4 {
    padding: 1rem 1rem !important;
  }
  .topbar {
    padding: 10px 12px;
  }
  .topbar-right {
    gap: 4px !important;
  }
  .sidebar-brand {
    padding: 18px 18px;
  }
  h4.mb-4, h4.mb-0 {
    font-size: 1.1rem;
  }
  .stat-card, .stat-card-v2 {
    padding: 14px 16px;
  }
  .modal-dialog {
    margin: 0.75rem;
  }
  /* Menu sidebar di HP: sedikit lebih rapat & area sentuh tetap nyaman,
     supaya grup menu yang isinya banyak (mis. Modul Inti) tidak kepanjangan */
  .sidebar .nav-link {
    padding: 10px 14px;
    font-size: 0.9rem;
  }
  .sidebar-group .nav-link {
    padding-left: 34px;
    padding-top: 9px;
    padding-bottom: 9px;
  }
  .sidebar-group .collapse .nav-link {
    padding-left: 44px;
  }
  .sidebar-group-title {
    padding: 9px 14px;
  }

  /* Kolom Bootstrap yang cuma diset untuk md/lg ke atas, dipaksa tumpuk 1 kolom di HP */
  .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (max-width: 991.98px) {
  .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (max-width: 400px) {
  .topbar-clock { font-size: 0.72rem; }
  .sidebar-brand span { font-size: 1.05rem; }
}

.content {
  min-height: 100vh;
  /* min-width:0 penting di layout flex: tanpa ini, elemen lebar di dalam
     konten (tabel dengan banyak kolom, mis. tabel OLT/ONU) akan memaksa
     .content minta ruang selebar isinya, dan karena sidebar di sebelahnya
     ikut jadi korban "diperas" oleh flexbox. Dengan min-width:0, kalau
     tabelnya kepanjangan, yang di-scroll horizontal cukup tabelnya saja
     (lihat .table-responsive di bawah), sidebar tidak lagi terpengaruh. */
  min-width: 0;
  overflow-x: hidden;
  /* Sama seperti .sidebar-group di atas: overflow-x sendirian tanpa
     overflow-y bikin browser diam-diam menganggap overflow-y = auto, yang
     bisa memicu scrollbar bawaan kedua muncul di tepi area konten. Dikunci
     "visible" supaya yang men-scroll tetap halaman secara wajar, bukan
     kotak .content ini sendiri. */
  overflow-y: visible;
}
.content > .p-4 {
  padding: 2rem 2.2rem !important;
}
/* Jaring pengaman: kalau ada tabel lebar yang belum dibungkus
   .table-responsive, biar scroll horizontalnya lokal di tabel itu saja,
   bukan mendorong lebar keseluruhan halaman/sidebar. */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table {
  max-width: 100%;
}

/* Topbar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
}
.topbar-left i { color: var(--clr-primary); }
.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar-btn {
  border: 1px solid var(--border-soft);
  color: var(--text-main);
  background: var(--surface-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
}
.topbar-btn:hover { background: var(--hover-tint); color: var(--text-main); }
.topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-soft);
  background: var(--surface-2);
  border-radius: 30px;
  padding: 5px 12px 5px 6px;
  color: var(--text-main);
}
.topbar-user:hover, .topbar-user:focus { background: var(--hover-tint); color: var(--text-main); }
.topbar-user::after { display: none; }
.topbar-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--clr-success);
  box-shadow: 0 0 0 2px var(--surface-2);
  margin-right: -2px;
}
.topbar-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  overflow: hidden;
}
.topbar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.topbar-notif-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 0.6rem;
  padding: 2px 5px;
  line-height: 1;
}
.topbar-notif-menu {
  width: 320px;
  max-width: 90vw;
  padding: 0;
  max-height: 420px;
  overflow-y: auto;
}
.topbar-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  white-space: normal;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.topbar-notif-item:last-child { border-bottom: none; }
.topbar-notif-avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--subtle-danger);
  color: var(--clr-danger);
  display: flex;
  align-items: center;
  justify-content: center;
}
.topbar-notif-text { min-width: 0; }
.topbar-user-info {
  flex-direction: column;
  line-height: 1.15;
  align-items: flex-start;
}
.topbar-user-name { font-size: 0.85rem; font-weight: 700; color: var(--text-main); }
.topbar-user-status {
  font-size: 0.7rem;
  color: var(--clr-success);
  font-weight: 600;
}
.topbar-caret { font-size: 0.7rem; color: var(--text-muted); }
@media (max-width: 576px) {
  .topbar { padding: 10px 14px; }
  .topbar-left { font-size: 0.75rem; }
}

h4.mb-4, h4.mb-0 {
  font-weight: 700;
  color: var(--text-main);
}

/* Stat cards */
.stat-card {
  background: var(--surface);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  border: 1px solid var(--border-soft);
  height: 100%;
  transition: transform 0.15s, box-shadow 0.15s;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}
.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.stat-value { font-size: 1.5rem; font-weight: 800; color: var(--text-main); line-height: 1.2; }
.stat-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }

/* Stat cards - gaya "kartu warna penuh" dengan grafik samar di background,
   mengikuti referensi desain: tiap varian punya gradient solid + ikon
   bulat translucent + grafik dekoratif tipis (garis tren / cincin / bar)
   supaya kartu terasa hidup tapi angka tetap jadi fokus utama. */
.stat-card-v2 {
  border-radius: 14px;
  overflow: hidden;
  height: 100%;
  background: var(--surface);
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
  border: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.stat-card-v2:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.32);
}
.stat-card-v2 .stat-v2-top {
  /* PENTING: jangan set --stat-grad-1/2/--stat-graphic di sini dengan nilai
     tetap (bukan lewat fallback var()) -- selektor ini (2 class) punya
     spesifisitas lebih tinggi dari .bg-solid-* (1 class), jadi kalau nilainya
     didefinisikan langsung di sini, dia akan SELALU menang dan variant warna
     (success/warning/danger/dst) tidak akan pernah kelihatan. Fallback lewat
     var(--x, default) aman karena tidak dianggap "declaration" yang bersaing. */
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--stat-grad-1, var(--accent)), var(--stat-grad-2, var(--accent)));
  border-top: none;
  margin-top: 0;
}
.stat-card-v2 .stat-v2-top::after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 68%;
  height: 78%;
  background-image: var(--stat-graphic, none);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}
.stat-card-v2 .stat-v2-icon {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: rgba(255,255,255,0.22);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  backdrop-filter: blur(2px);
}
.stat-card-v2 .stat-v2-label {
  position: relative;
  z-index: 1;
  font-size: 0.72rem;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-weight: 700;
}
.stat-card-v2 .stat-v2-value {
  position: relative;
  z-index: 1;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}
.stat-card-v2 .stat-v2-footer {
  padding: 8px 18px;
  background: rgba(0,0,0,0.16);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.82);
  border-top: 1px solid rgba(255,255,255,0.14);
  text-decoration: none;
  display: block;
  transition: background 0.15s, color 0.15s;
}
.stat-card-v2 .stat-v2-footer:hover {
  background: rgba(0,0,0,0.28);
  color: #fff;
}

/* Varian warna -- tiap varian = gradient solid + grafik dekoratif samar
   berbeda bentuk, supaya sekilas pandang jenis kartu mudah dibedakan. */
.bg-solid-primary {
  --stat-grad-1: #f59e0b; --stat-grad-2: #d97706;
  --stat-graphic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 70'%3E%3Crect x='4' y='40' width='14' height='30' rx='2' fill='white' fill-opacity='0.18'/%3E%3Crect x='26' y='25' width='14' height='45' rx='2' fill='white' fill-opacity='0.24'/%3E%3Crect x='48' y='10' width='14' height='60' rx='2' fill='white' fill-opacity='0.32'/%3E%3Crect x='70' y='30' width='14' height='40' rx='2' fill='white' fill-opacity='0.24'/%3E%3Crect x='92' y='18' width='14' height='52' rx='2' fill='white' fill-opacity='0.28'/%3E%3C/svg%3E");
}
.bg-solid-success {
  --stat-grad-1: #0d9488; --stat-grad-2: #0f766e;
  --stat-graphic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 70'%3E%3Cpath d='M0 66 L140 66 L140 8 L118 22 L98 16 L80 34 L60 28 L40 46 L20 40 L0 54 Z' fill='white' fill-opacity='0.14'/%3E%3Cpath d='M0 54 L20 40 L40 46 L60 28 L80 34 L98 16 L118 22 L140 8' fill='none' stroke='white' stroke-opacity='0.55' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.bg-solid-danger {
  --stat-grad-1: #db2777; --stat-grad-2: #9d174d;
  --stat-graphic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 60'%3E%3Cpath d='M0 32 L18 32 L26 10 L36 54 L46 22 L56 32 L140 32' fill='none' stroke='white' stroke-opacity='0.4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.bg-solid-warning {
  --stat-grad-1: #16a34a; --stat-grad-2: #15803d;
  --stat-graphic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Ccircle cx='45' cy='45' r='34' fill='none' stroke='white' stroke-opacity='0.18' stroke-width='10'/%3E%3Ccircle cx='45' cy='45' r='34' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='10' stroke-linecap='round' stroke-dasharray='213.6' stroke-dashoffset='128' transform='rotate(-90 45 45)'/%3E%3C/svg%3E");
}
.bg-solid-info {
  --stat-grad-1: #16a34a; --stat-grad-2: #15803d;
  --stat-graphic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 60'%3E%3Ccircle cx='118' cy='30' r='6' fill='white' fill-opacity='0.4'/%3E%3Ccircle cx='118' cy='30' r='16' fill='none' stroke='white' stroke-opacity='0.28' stroke-width='3'/%3E%3Ccircle cx='118' cy='30' r='26' fill='none' stroke='white' stroke-opacity='0.16' stroke-width='3'/%3E%3C/svg%3E");
}
.bg-solid-secondary {
  --stat-grad-1: #64748b; --stat-grad-2: #475569;
  --stat-graphic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 70'%3E%3Cg fill='white' fill-opacity='0.28'%3E%3Ccircle cx='10' cy='10' r='3'/%3E%3Ccircle cx='30' cy='10' r='3'/%3E%3Ccircle cx='50' cy='10' r='3'/%3E%3Ccircle cx='70' cy='10' r='3'/%3E%3Ccircle cx='90' cy='10' r='3'/%3E%3Ccircle cx='10' cy='30' r='3'/%3E%3Ccircle cx='30' cy='30' r='3'/%3E%3Ccircle cx='50' cy='30' r='3'/%3E%3Ccircle cx='70' cy='30' r='3'/%3E%3Ccircle cx='90' cy='30' r='3'/%3E%3Ccircle cx='10' cy='50' r='3'/%3E%3Ccircle cx='30' cy='50' r='3'/%3E%3Ccircle cx='50' cy='50' r='3'/%3E%3Ccircle cx='70' cy='50' r='3'/%3E%3Ccircle cx='90' cy='50' r='3'/%3E%3C/g%3E%3C/svg%3E");
}
.bg-solid-dark {
  --stat-grad-1: #1f2937; --stat-grad-2: #0f172a;
  --stat-graphic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 70'%3E%3Cg fill='white' fill-opacity='0.22'%3E%3Ccircle cx='10' cy='10' r='3'/%3E%3Ccircle cx='30' cy='10' r='3'/%3E%3Ccircle cx='50' cy='10' r='3'/%3E%3Ccircle cx='70' cy='10' r='3'/%3E%3Ccircle cx='90' cy='10' r='3'/%3E%3Ccircle cx='10' cy='30' r='3'/%3E%3Ccircle cx='30' cy='30' r='3'/%3E%3Ccircle cx='50' cy='30' r='3'/%3E%3Ccircle cx='70' cy='30' r='3'/%3E%3Ccircle cx='90' cy='30' r='3'/%3E%3Ccircle cx='10' cy='50' r='3'/%3E%3Ccircle cx='30' cy='50' r='3'/%3E%3Ccircle cx='50' cy='50' r='3'/%3E%3Ccircle cx='70' cy='50' r='3'/%3E%3Ccircle cx='90' cy='50' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

/* Router info bar (uptime / RAM / HDD) */
.router-info-bar {
  display: flex;
  flex-wrap: wrap;
}
.router-info-item {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-right: 1px solid var(--border-soft);
}
.router-info-item:last-child { border-right: none; }
.router-info-item i { font-size: 1.3rem; color: var(--accent-2); }
.router-info-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); }
.router-info-value { font-weight: 700; color: var(--text-main); }

/* Ringkasan lainnya -- kartu gradasi warna + grafik samar (gaya sama dengan
   mini-stat Voucher/Billing), menggantikan gaya ikon bulat netral sebelumnya.
   Warna diberikan lewat class .ring-* pada elemen .ringkasan-item; jangan set
   --r1/--r2/--r-graphic langsung di .ringkasan-item (fallback lewat var()
   saja) supaya class warna varian tidak ketiban masalah spesifisitas. */
.ringkasan-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  color: #fff;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  padding: 12px 14px;
  min-height: 92px;
  background: linear-gradient(135deg, var(--r1, var(--accent)), var(--r2, var(--accent)));
  box-shadow: 0 4px 12px rgba(0,0,0,0.22);
  transition: transform 0.15s, box-shadow 0.15s;
}
.ringkasan-item:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,0.34); color: #fff; }
.ringkasan-item::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 58%;
  height: 62%;
  background-image: var(--r-graphic, none);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: contain;
  pointer-events: none;
}
.ringkasan-icon {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  color: #fff;
  margin-bottom: 8px;
}
.ringkasan-label {
  position: relative;
  z-index: 1;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: rgba(255,255,255,0.88);
  font-weight: 600;
  text-align: left;
}
.ringkasan-value {
  position: relative;
  z-index: 1;
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
  text-align: left;
  margin-top: 4px;
}

/* Varian warna ringkasan -- 4 warna bergantian, tiap warna grafik beda bentuk */
.ring-amber {
  --r1: #f59e0b; --r2: #d97706;
  --r-graphic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Ccircle cx='45' cy='45' r='34' fill='none' stroke='white' stroke-opacity='0.2' stroke-width='10'/%3E%3Ccircle cx='45' cy='45' r='34' fill='none' stroke='white' stroke-opacity='0.5' stroke-width='10' stroke-linecap='round' stroke-dasharray='213.6' stroke-dashoffset='128' transform='rotate(-90 45 45)'/%3E%3C/svg%3E");
}
.ring-pink {
  --r1: #db2777; --r2: #9d174d;
  --r-graphic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 60'%3E%3Cpath d='M0 32 L18 32 L26 10 L36 54 L46 22 L56 32 L140 32' fill='none' stroke='white' stroke-opacity='0.42' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ring-teal {
  --r1: #0d9488; --r2: #0f766e;
  --r-graphic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 70'%3E%3Cpath d='M0 66 L140 66 L140 8 L118 22 L98 16 L80 34 L60 28 L40 46 L20 40 L0 54 Z' fill='white' fill-opacity='0.14'/%3E%3Cpath d='M0 54 L20 40 L40 46 L60 28 L80 34 L98 16 L118 22 L140 8' fill='none' stroke='white' stroke-opacity='0.55' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ring-green {
  --r1: #16a34a; --r2: #15803d;
  --r-graphic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 70'%3E%3Crect x='4' y='40' width='14' height='30' rx='2' fill='white' fill-opacity='0.18'/%3E%3Crect x='26' y='25' width='14' height='45' rx='2' fill='white' fill-opacity='0.25'/%3E%3Crect x='48' y='10' width='14' height='60' rx='2' fill='white' fill-opacity='0.34'/%3E%3Crect x='70' y='30' width='14' height='40' rx='2' fill='white' fill-opacity='0.25'/%3E%3Crect x='92' y='18' width='14' height='52' rx='2' fill='white' fill-opacity='0.3'/%3E%3C/svg%3E");
}

/* Panel Informasi Sistem (blok warna solid) */
.sysinfo-list { display: flex; flex-direction: column; }
.sysinfo-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  color: #fff;
}
.sysinfo-row:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,0.12); }
.sysinfo-row:last-child { border-radius: 0 0 14px 14px; }
.sysinfo-icon {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: rgba(255,255,255,0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.sysinfo-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.4px; opacity: 0.9; }
.sysinfo-value { font-weight: 700; }

.card {
  background: var(--surface);
  border: none;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  color: var(--text-main);
}
.card-header {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-soft);
  font-weight: 600;
  color: var(--text-main);
  border-radius: 14px 14px 0 0 !important;
  padding: 14px 20px;
}
.card-footer {
  background: var(--surface-2);
  color: var(--text-muted);
  border-top: 1px solid var(--border-soft);
  border-radius: 0 0 14px 14px !important;
}
.table {
  color: var(--text-main);
  --bs-table-color: var(--text-main);
  --bs-table-bg: transparent;
  --bs-table-striped-color: var(--text-main);
  --bs-table-active-color: var(--text-main);
  --bs-table-hover-color: var(--text-main);
}
.table thead th {
  color: var(--text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom-width: 1px;
  border-color: var(--border-soft);
  background: var(--surface-2);
}
.table td, .table th { padding: 0.6rem 0.85rem; border-color: var(--border-soft); }
.table-responsive { border-radius: 0 0 14px 14px; overflow: hidden; }

/* -------------------------------------------------------------------- */
/* Halaman Reseller di layar HP: tabel diubah jadi daftar kartu supaya   */
/* tidak perlu geser-geser ke samping (data-label diisi otomatis lewat  */
/* script kecil di reseller_base.html).                                 */
/* -------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .reseller-body .table-responsive { overflow: visible; border-radius: 0; }
  .reseller-body .table-responsive table.table thead { display: none; }
  .reseller-body .table-responsive table.table,
  .reseller-body .table-responsive table.table tbody,
  .reseller-body .table-responsive table.table tr,
  .reseller-body .table-responsive table.table td {
    display: block;
    width: 100%;
  }
  .reseller-body .table-responsive table.table tr {
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--surface-2);
  }
  .reseller-body .table-responsive table.table tr:last-child { margin-bottom: 0; }
  .reseller-body .table-responsive table.table td {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px 10px;
    padding: 7px 0;
    border: none !important;
    text-align: right;
    white-space: normal;
    word-break: break-word;
  }
  .reseller-body .table-responsive table.table td + td { border-top: 1px dashed var(--border-soft) !important; }
  .reseller-body .table-responsive table.table td[data-label]::before {
    content: attr(data-label);
    margin-right: auto;
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    text-align: left;
  }
  /* baris pesan kosong (mis. "Belum ada pelanggan") tidak dijadikan kartu berlabel */
  .reseller-body .table-responsive table.table td[colspan] {
    display: block;
    text-align: center;
    border: none !important;
  }
  .reseller-body .table-responsive table.table tr:has(td[colspan]) {
    background: transparent;
    border: none;
    padding: 12px 0;
  }
  .reseller-body .table-responsive table.table td.text-end { text-align: right; }

  /* Tab Voucher/Server/User/dll di halaman Hotspot: biar bisa digeser
     ke samping kalau tidak muat, daripada tabnya numpuk/terpotong. */
  .reseller-body .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .reseller-body .nav-tabs .nav-item { flex: 0 0 auto; }
}
.table > :not(caption) > * > * {
  background-color: transparent;
  box-shadow: none;
  color: var(--text-main);
}
.table thead > tr > th { color: var(--text-muted); }
.table-hover > tbody > tr:hover > * { background-color: var(--hover-tint); color: var(--text-main); }
.table code { background: rgba(127,157,193,0.18); color: var(--accent-2); }
.table .text-muted, .table small { color: var(--text-muted) !important; }

/* Badges dengan varian "subtle" */
.bg-primary-subtle { background-color: var(--subtle-primary) !important; }
.bg-success-subtle { background-color: var(--subtle-success) !important; }
.bg-danger-subtle  { background-color: var(--subtle-danger) !important; }
.bg-warning-subtle { background-color: var(--subtle-warning) !important; }
.text-primary { color: var(--clr-primary) !important; }
.text-success { color: var(--clr-success) !important; }
.text-danger  { color: var(--clr-danger) !important; }
.text-warning { color: var(--clr-warning) !important; }
.text-muted   { color: var(--text-muted) !important; }

.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, #123566 100%);
  border: none;
  box-shadow: 0 3px 10px rgba(47,151,255,0.28);
}
.btn-primary:hover { background: linear-gradient(135deg, #123566 0%, #0c2140 100%); }

/* Toolbar tombol pill solid berwarna (dipakai di halaman Pelanggan, dsb) */
.btn-pill {
  border: none;
  border-radius: 50px;
  padding: 0.5rem 1.05rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  line-height: 1.2;
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.btn-pill i { font-size: 1rem; }
.btn-pill:hover   { filter: brightness(1.12); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.24); }
.btn-pill:active  { transform: scale(0.97); }
.btn-pill:focus   { color: #fff; box-shadow: 0 0 0 0.2rem rgba(255,255,255,0.15); }
.btn-pill.dropdown-toggle::after { margin-left: 0.35rem; }

/* Warna toolbar disamakan dengan palet referensi: hijau=menu, merah=hapus,
   teal=import, oranye=billing, biru=simulator, ungu=secret, amber=laporan,
   cyan=pelanggan, kuning tua=kode unik, biru tua=tambah. */
.btn-pill-hapus    { background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%); }
.btn-pill-kosongkan{ background: linear-gradient(135deg, #ec4899 0%, #be185d 100%); }
.btn-pill-import   { background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%); }
.btn-pill-export   { background: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%); }
.btn-pill-laporan  { background: linear-gradient(135deg, #d97706 0%, #b45309 100%); }
.btn-pill-billing  { background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%); }
.btn-pill-simulator{ background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); }
.btn-pill-secret   { background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); }
.btn-pill-kodeunik { background: linear-gradient(135deg, #ca8a04 0%, #a16207 100%); }
.btn-pill-menu     { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); }
.btn-pill-kick     { background: linear-gradient(135deg, #f97316 0%, #c2410c 100%); }
.btn-pill-sync     { background: linear-gradient(135deg, #10b981 0%, #047857 100%); }
.btn-pill-tambah   { background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%); }
.btn-pill-pelanggan{ background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%); }
.btn-pill-edit     { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); }
.btn-pill-setting  { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.btn-pill-domain   { background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%); }
.btn-pill-laporan-tiket { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); }
.btn-pill-buat-tiket    { background: linear-gradient(135deg, #22c55e 0%, #15803d 100%); }

/* Toolbar menu Billing > Invoice Unpaid (BAYAR/PRINT/RAPEL/UTANG/REKENING/DISKON/
   DISPENSASI/TAGIH WA/EXPORT/INV BARU) */
.btn-pill-bayar      { background: linear-gradient(135deg, #22c55e 0%, #15803d 100%); }
.btn-pill-print      { background: linear-gradient(135deg, #64748b 0%, #334155 100%); }
.btn-pill-rapel       { background: linear-gradient(135deg, #06b6d4 0%, #0e7490 100%); }
.btn-pill-utang       { background: linear-gradient(135deg, #f97316 0%, #c2410c 100%); }
.btn-pill-rekening    { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); }
.btn-pill-diskon      { background: linear-gradient(135deg, #ec4899 0%, #be185d 100%); }
.btn-pill-dispensasi  { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); }
.btn-pill-tagihwa     { background: linear-gradient(135deg, #16a34a 0%, #14532d 100%); }
.btn-pill-invbaru     { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.btn-pill-notifwa      { background: linear-gradient(135deg, #16a34a 0%, #14532d 100%); }
.btn-pill-rekapharian  { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); }
.btn-pill-rekapbulanan { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); }
.btn-pill-bhpuso       { background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%); }
.btn-pill-mode-aktif   { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%) !important; box-shadow: 0 0 0 2px rgba(245,158,11,0.55) inset; }

.nav-tabs { border-bottom-color: var(--border-soft); }
.nav-tabs .nav-link { color: var(--text-muted); font-weight: 500; }
.nav-tabs .nav-link.active {
  color: var(--accent-2);
  font-weight: 700;
  background: transparent;
  border-color: transparent transparent var(--accent-2);
  border-bottom: 3px solid var(--accent-2);
}

.badge { font-weight: 600; letter-spacing: 0.2px; }

/* Form & modal - dark mode */
.form-control, .form-select {
  background-color: var(--surface-2);
  border: 1px solid var(--border-soft);
  color: var(--text-main);
}
.form-control:focus, .form-select:focus {
  background-color: var(--surface-2);
  border-color: var(--accent);
  color: var(--text-main);
  box-shadow: 0 0 0 0.2rem rgba(47,151,255,0.25);
}
.form-control::placeholder { color: var(--text-muted); }
.form-control:disabled, .form-select:disabled { background-color: var(--surface); color: var(--text-muted); }
.form-label { color: var(--text-main); }
.form-check-label { color: var(--text-main); }
.input-group-text { background-color: var(--surface-2); border-color: var(--border-soft); color: var(--text-muted); }

.modal-content {
  background-color: var(--surface);
  color: var(--text-main);
  border: 1px solid var(--border-soft);
}
.modal-header, .modal-footer { border-color: var(--border-soft); }
.btn-close { filter: invert(1) grayscale(100%) brightness(1.6); }

/* Accordion (mis. "Pengaturan Lanjutan" di form OLT/ODP/dll) -- tanpa ini,
   Bootstrap pakai bg putih bawaan untuk accordion-item/body, sementara label
   & teks di dalamnya sudah dipaksa warna terang oleh .form-label / body,
   jadi tulisannya jadi tidak kelihatan (putih di atas putih). */
.accordion-item {
  background-color: var(--surface-2);
  border: 1px solid var(--border-soft);
  color: var(--text-main);
}
.accordion-button {
  background-color: var(--surface-2);
  color: var(--text-main);
}
.accordion-button:not(.collapsed) {
  background-color: var(--surface-2);
  color: var(--accent);
  box-shadow: inset 0 -1px 0 var(--border-soft);
}
.accordion-button:focus { box-shadow: 0 0 0 0.2rem rgba(47,151,255,0.25); }
.accordion-button::after { filter: invert(1) grayscale(100%) brightness(1.6); }
.accordion-body { background-color: var(--surface-2); color: var(--text-main); }
.accordion-body .small.text-muted,
.accordion-body .form-text { color: var(--text-muted) !important; }

.dropdown-menu { background-color: var(--surface-2); border-color: var(--border-soft); }
.dropdown-item { color: var(--text-main); }
.dropdown-item:hover, .dropdown-item:focus { background-color: rgba(255,255,255,0.06); color: var(--text-main); }

.alert-success { background-color: var(--alert-success-bg); color: var(--alert-success-text); border-color: var(--alert-success-border); }
.alert-danger  { background-color: var(--alert-danger-bg); color: var(--alert-danger-text); border-color: var(--alert-danger-border); }
.alert-warning { background-color: var(--alert-warning-bg); color: var(--alert-warning-text); border-color: var(--alert-warning-border); border-left: 4px solid #f5a623; }
.alert-warning .bi-exclamation-triangle-fill { color: #f5a623; }
.alert-info    { background-color: var(--alert-info-bg); color: var(--alert-info-text); border-color: var(--alert-info-border); }

body, .card, .card-header, .card-footer, .table, .form-control, .form-select,
.modal-content, .sidebar, .stat-card, .stat-card-v2 .stat-v2-footer, .login-card {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Login page */
.login-wrap {
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 20%, rgba(111,212,255,0.35) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(47,151,255,0.35) 0%, transparent 40%),
    linear-gradient(135deg, var(--navy) 0%, #0a1f33 100%);
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 40px 34px;
  width: 100%;
  max-width: 390px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  color: var(--text-main);
}
.login-icon { font-size: 2.6rem; color: var(--accent-2); }
.login-logo-img {
  display: block;
  max-height: 88px;
  max-width: 240px;
  object-fit: contain;
  background: #fff;
  padding: 10px 16px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.login-logo-img-lg {
  max-height: 110px;
  max-width: 260px;
  background: #fff;
  padding: 10px 16px;
  border-radius: 12px;
}
.logo-preview-box {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.logo-preview-box img { width: 100%; height: 100%; object-fit: contain; }
.logo-preview-box i { font-size: 1.8rem; color: var(--accent-2); }
.avatar-preview-box img { object-fit: cover !important; }

/* Voucher print & general polish */
code {
  background: rgba(255,255,255,0.08);
  padding: 2px 6px;
  border-radius: 5px;
  color: var(--accent-2);
  font-size: 0.85em;
}

/* ---------------------------------------------------------------------- */
/* Login page (split-screen: ilustrasi + form)                            */
/* ---------------------------------------------------------------------- */
.login-split-wrap {
  min-height: 100vh;
  display: flex;
  background: linear-gradient(135deg, var(--navy) 0%, #0a1f33 100%);
}
.login-illustration-panel {
  flex: 1.5;
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: linear-gradient(160deg, #f2effb 0%, #e4defa 100%);
  overflow: hidden;
}
.login-illustration-panel .blob-a,
.login-illustration-panel .blob-b {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.55;
}
.login-illustration-panel .blob-a {
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(124,92,224,0.28), transparent 70%);
  top: -70px; left: -70px;
}
.login-illustration-panel .blob-b {
  width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(90,63,190,0.22), transparent 70%);
  bottom: -90px; right: -90px;
}
.login-illust-inner { position: relative; z-index: 1; width: 68%; max-width: 380px; margin: 0 auto; }
.login-illustration-panel svg { display: block; width: 100%; height: auto; }

/* Varian "foto penuh" (bukan kartu kecil mengambang): dipakai saat panel
   ilustrasi berisi foto asli (mis. login admin), supaya foto mengisi
   seluruh sisi panel dari tepi ke tepi seperti desain referensi, bukan
   tampil kecil di tengah seperti thumbnail. Hanya aktif di layar desktop;
   di HP tetap memakai ukuran ringkas bawaan .login-illust-inner. */
@media (min-width: 992px) {
  .login-illustration-panel-photo { padding: 0; }
  .login-illust-inner-full {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 26px;
    box-sizing: border-box;
    z-index: 1;
  }
  .login-illust-inner-full img.login-illust-photo,
  .login-illustration-panel-photo .login-illust-inner-full img.login-illust-photo {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: contain;
    object-position: center;
    display: block;
  }
}

/* Overlay garis putus-putus bercahaya yang bergerak di atas foto ilustrasi */
.login-illust-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
@keyframes jdpDashFlow { to { stroke-dashoffset: -260; } }
.jdp-dash-flow { animation: jdpDashFlow 1.7s linear infinite; }

/* Logo brand, ditaruh di pojok kiri atas panel ilustrasi, tanpa latar
   putih supaya menyatu dengan background, dan diperbesar supaya jadi
   fokus utama & terlihat profesional. Hanya tampil di layout desktop;
   di HP logo memakai .login-hero-brand. */
.login-illust-logo { display: none; }
@media (min-width: 992px) {
  .login-illust-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    top: 26px;
    left: 30px;
    z-index: 3;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
  }
  .login-illust-logo img {
    display: block;
    height: 108px;
    width: auto;
    max-width: 320px;
    object-fit: contain;
  }
  .login-illust-logo i { font-size: 2.6rem; color: var(--accent-2); }
  .login-illust-logo span { font-weight: 800; font-size: 1.3rem; color: #1c2434; letter-spacing: -0.01em; }
}
@media (min-width: 1200px) {
  .login-illust-logo img { height: 128px; }
}

@keyframes lgDashFlow { to { stroke-dashoffset: -180; } }
.lg-dash-flow { animation: lgDashFlow 1.6s linear infinite; }
@keyframes lgWavePulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.lg-wave-1 { animation: lgWavePulse 1.8s ease-in-out infinite; }
.lg-wave-2 { animation: lgWavePulse 1.8s ease-in-out infinite 0.35s; }

/* Ilustrasi khusus halaman Login Reseller: palet teal/amber (kios/POP) yang
   sengaja dibedakan dari ilustrasi Login Admin (ungu) & Login Pelanggan (hijau). */
.login-illustration-panel-reseller {
  background: linear-gradient(160deg, #e9fbfb 0%, #dcf3f4 100%);
}
.login-illustration-panel-reseller .blob-a {
  background: radial-gradient(circle, rgba(47,196,207,0.28), transparent 70%);
}
.login-illustration-panel-reseller .blob-b {
  background: radial-gradient(circle, rgba(245,166,35,0.22), transparent 70%);
}
.rl-dash-flow { animation: lgDashFlow 1.6s linear infinite; }
.rl-wave-1 { animation: lgWavePulse 1.8s ease-in-out infinite; }
.rl-wave-2 { animation: lgWavePulse 1.8s ease-in-out infinite 0.35s; }

.login-hero-brand { display: none; }
.login-heading-mobile { display: none; }

.login-form-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}
.login-card-col {
  width: 100%;
  max-width: 420px;
  position: relative;
  z-index: 1;
}
.login-form-card {
  width: 100%;
  max-width: 420px;
  color: var(--text-main);
  position: relative;
}
.login-form-card h4 { font-weight: 700; letter-spacing: -0.01em; }
.login-form-card .subjudul { color: var(--text-muted); font-size: 0.92rem; }

/* Brand (logo + nama aplikasi) di LUAR kartu login, di atasnya, senada
   dengan tampilan halaman Login Pelanggan. */
.login-brand-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  text-align: center;
}
.login-brand-outer-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.login-brand-outer-logo {
  display: block;
  height: 150px;
  width: auto;
  max-width: 320px;
  object-fit: contain;
}
.login-brand-outer i { font-size: 2.4rem; color: var(--accent-2); }
.login-brand-outer span {
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
  letter-spacing: -0.01em;
}
@media (max-width: 480px) {
  .login-brand-outer { margin-bottom: 16px; }
  .login-brand-outer-logo { height: 110px; }
  .login-brand-outer i { font-size: 2rem; }
  .login-brand-outer span { font-size: 1.02rem; }
}

.login-form-card .form-label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.login-field-row { display: flex; gap: 8px; align-items: stretch; }
.login-field-row > .form-control { flex: 1; min-width: 0; }
.login-field-row > .password-field-wrap { flex: 1; min-width: 0; }
.btn-paste-admin {
  background: linear-gradient(135deg, var(--accent) 0%, #0c2c57 100%);
  border: none;
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: 8px;
  padding: 0 16px;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-paste-admin:hover { filter: brightness(1.08); color: #fff; }
.btn-paste-admin:active { transform: scale(0.97); }

.login-lang-switcher { position: absolute; top: 18px; right: 18px; z-index: 5; }
.login-lang-btn {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.28);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
}
.login-lang-btn:hover { background: rgba(255,255,255,0.2); color: #fff; }
.login-lang-btn::after { margin-left: 6px; }
.login-lang-switcher .dropdown-menu {
  background: #16283e;
  border: 1px solid rgba(255,255,255,0.15);
  min-width: 160px;
}
.login-lang-switcher .dropdown-item { color: #dfe8f4; font-size: 0.85rem; padding: 8px 14px; }
.login-lang-switcher .dropdown-item:hover, .login-lang-switcher .dropdown-item:focus { background: rgba(255,255,255,0.08); color: #fff; }
.login-lang-switcher .dropdown-item.active { background: var(--accent, #2a72c4); color: #fff; }

.password-field-wrap { position: relative; }
.password-field-wrap input { padding-right: 46px; }
.password-toggle-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--text-muted);
  width: 38px;
  height: 38px;
  border-radius: 8px;
}
.password-toggle-btn:hover { background: var(--hover-tint); color: var(--text-main); }

.btn-login-dashboard {
  background: linear-gradient(135deg, var(--accent) 0%, #0c2c57 100%);
  border: none;
  color: #fff;
  font-weight: 600;
  padding: 11px;
}
.btn-login-dashboard:hover { filter: brightness(1.08); color: #fff; }
.btn-login-customer {
  background: linear-gradient(135deg, #2fbf7e 0%, #1f9c66 100%);
  border: none;
  color: #fff;
  font-weight: 600;
  padding: 11px;
}
.btn-login-customer:hover { filter: brightness(1.08); color: #fff; }

.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 0.78rem;
  margin: 18px 0 14px;
}
.login-divider::before, .login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}

.login-footer-note {
  text-align: center;
  margin-top: 22px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.login-cta-box {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 10px;
}
.login-cta-box i.login-cta-icon {
  font-size: 1.3rem;
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.login-cta-box .login-cta-text { flex: 1; min-width: 0; }
.login-cta-box .login-cta-title { font-weight: 700; font-size: 0.86rem; margin-bottom: 1px; }
.login-cta-box .login-cta-sub { font-size: 0.76rem; color: var(--text-muted); }
.login-cta-box .login-cta-btn {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 7px;
  color: #fff !important;
  white-space: nowrap;
  text-decoration: none !important;
}
.login-cta-box.cta-green {
  background: rgba(47,191,126,0.10);
  border: 1px solid rgba(47,191,126,0.30);
}
.login-cta-box.cta-green .login-cta-icon { background: linear-gradient(135deg, #2fbf7e 0%, #1f9c66 100%); }
.login-cta-box.cta-green .login-cta-btn { background: linear-gradient(135deg, #2fbf7e 0%, #1f9c66 100%); }
.login-cta-box.cta-blue {
  background: rgba(47,151,255,0.10);
  border: 1px solid rgba(47,151,255,0.30);
}
.login-cta-box.cta-blue .login-cta-icon { background: linear-gradient(135deg, var(--accent) 0%, #0c2c57 100%); }
.login-cta-box.cta-blue .login-cta-btn { background: linear-gradient(135deg, var(--accent) 0%, #0c2c57 100%); }

@media (max-width: 420px) {
  .login-cta-box { flex-wrap: wrap; }
  .login-cta-box .login-cta-btn { width: 100%; text-align: center; margin-top: 6px; }
}

@media (min-width: 992px) {
  .login-illustration-panel { display: flex; flex-direction: column; }
}

/* Halaman login di HP: ilustrasi ditaruh di samping (bukan berdiri sendiri
   di atas), berdampingan dengan nama aplikasi, supaya gambarnya tetap
   terlihat besar tapi ruang vertikal tetap hemat untuk form login.
   Semua ukuran dipaskan supaya muat 1 layar penuh tanpa perlu scroll. */
@media (max-width: 991.98px) {
  .login-split-wrap {
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  .login-illustration-panel {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    flex: 0 0 auto;
    width: 100%;
    max-height: 32vh;
    max-height: 32dvh;
    min-height: 0;
    padding: 14px 18px;
  }
  .login-illustration-panel .blob-a { width: 150px; height: 150px; top: -45px; left: -45px; }
  .login-illustration-panel .blob-b { width: 170px; height: 170px; bottom: -50px; right: -50px; }
  .login-illust-inner { width: auto; max-width: 48%; flex: 0 0 48%; margin: 0; }
  .login-hero-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    z-index: 1;
  }
  .login-hero-brand-logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 0;
    box-shadow: none;
  }
  .login-hero-brand i { font-size: 1.9rem; color: #5a3fbe; }
  .login-hero-brand-logo { height: 52px; width: auto; max-width: 170px; object-fit: contain; display: block; }
  .login-hero-brand span {
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.2;
    color: #2b2140;
    letter-spacing: -0.01em;
  }
  .login-brand-desktop { display: none; }
  .login-heading-mobile { display: block; margin-bottom: 8px; }
  .login-form-panel {
    flex: 1 1 auto;
    min-height: 0;
    align-items: flex-start;
    padding: 10px 20px 12px;
    overflow-y: auto;
  }
  .login-form-card { width: 100%; }
  .login-form-card h4 { font-size: 1.05rem; margin-bottom: 2px !important; }
  .login-form-card .subjudul { font-size: 0.8rem; }
  .login-form-card .mb-3 { margin-bottom: 8px !important; }
  .login-form-card .mt-4 { margin-top: 10px !important; }
  .btn-login-dashboard, .btn-login-customer { padding: 9px; font-size: 0.9rem; }
  .login-divider { margin: 10px 0 8px; }
  .login-form-card .mt-3 { margin-top: 8px !important; }
  .login-footer-note { margin-top: 8px; font-size: 0.75rem; }
}
@media (max-width: 480px) {
  .login-illustration-panel { max-height: 28vh; max-height: 28dvh; padding: 12px 16px; }
  .login-hero-brand span { font-size: 0.95rem; }
  .login-hero-brand i { font-size: 1.6rem; }
  .login-hero-brand-logo { height: 42px; max-width: 130px; }
  .login-form-panel { padding: 8px 16px 10px; }
}
@media (max-width: 991.98px) and (max-height: 700px) {
  .login-illustration-panel { max-height: 24vh; max-height: 24dvh; }
}
@media (max-width: 991.98px) and (max-height: 560px) {
  .login-illustration-panel { display: none; }
}

/* ---------------------------------------------------------------------- */
/* Login page — kartu transparan (glassmorphism) di atas latar jaringan   */
/* teknologi, terinspirasi tampilan referensi (kartu login melayang       */
/* setengah transparan di atas background gelap bertekstur network dot). */
/* ---------------------------------------------------------------------- */
.login-form-panel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 88%, rgba(47,151,255,0.38), transparent 55%),
    radial-gradient(circle at 90% 10%, rgba(245,166,35,0.22), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(111,212,255,0.10), transparent 60%),
    linear-gradient(160deg, #081422 0%, #0c1e34 45%, #091829 100%);
}
.login-form-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.55;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(143,190,240,0.35) 1.3px, transparent 1.3px),
    radial-gradient(rgba(143,190,240,0.16) 1px, transparent 1px);
  background-size: 46px 46px, 23px 23px;
  background-position: 0 0, 11px 11px;
}
.login-form-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(115deg, transparent 40%, rgba(111,212,255,0.09) 50%, transparent 60%),
    linear-gradient(25deg, transparent 40%, rgba(255,255,255,0.03) 50%, transparent 60%);
  background-size: 340px 340px, 220px 220px;
}
.login-lang-switcher { z-index: 3; }

/* Kartu login: transparan / kaca buram (glass) supaya latar network di
   belakangnya tetap terlihat, senada dengan gambar referensi. */
.login-form-card {
  position: relative;
  z-index: 1;
  background: rgba(16,32,52,0.52);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  padding: 34px 32px;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.07);
}
.login-form-card .form-label { color: rgba(223,232,244,0.75); }
.login-form-card .form-control {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  color: #eaf1fb;
}
.login-form-card .form-control:focus {
  background: rgba(255,255,255,0.11);
  border-color: rgba(143,190,240,0.6);
  color: #eaf1fb;
  box-shadow: 0 0 0 0.15rem rgba(111,212,255,0.25);
}
.login-form-card .form-control::placeholder { color: rgba(223,232,244,0.5); }
.login-form-card .form-check-input { background-color: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); }
.login-form-card .login-divider { color: rgba(223,232,244,0.55); }
.login-form-card .login-divider::before, .login-form-card .login-divider::after { background: rgba(255,255,255,0.12); }
.login-form-card .text-muted { color: rgba(223,232,244,0.6) !important; }
.login-form-card a { color: var(--accent-2); }

/* Sentuhan gaya terminal NOC di layar login: input username/password
   pakai monospace (kesan console login), ada garis status kecil di
   footer mirip system status bar. */
.login-form-card input[type="text"],
.login-form-card input[type="password"],
.login-form-card input[type="email"] {
  font-family: "JetBrains Mono", "Roboto Mono", ui-monospace, Consolas, monospace;
  letter-spacing: 0.01em;
}
.login-status-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  margin-top: 10px;
  font-family: "JetBrains Mono", "Roboto Mono", ui-monospace, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: rgba(223,232,244,0.55);
  text-transform: uppercase;
}
.login-status-bar .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2ecf82;
  box-shadow: 0 0 6px rgba(46,207,130,0.8);
  flex-shrink: 0;
}

/* Input dengan ikon di sisi kiri (username / password) */
.login-input-group { position: relative; flex: 1; min-width: 0; }
.login-input-group .login-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(223,232,244,0.5);
  font-size: 1rem;
  z-index: 2;
  pointer-events: none;
}
.login-input-group .form-control,
.login-input-group.password-field-wrap input { padding-left: 40px; }
.login-field-row > .login-input-group { flex: 1; min-width: 0; }

@media (max-width: 991.98px) {
  .login-form-card { padding: 22px 20px; border-radius: 16px; }
}

/* Portal pelanggan (halaman self-service pelanggan) */
.portal-topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
  padding: 14px 24px;
}
.portal-wrap { min-height: 100vh; background: var(--bg); }
.portal-body { max-width: 760px; margin: 0 auto; padding: 28px 20px 60px; }

/* ---------------------------------------------------------------------- */
/* Halaman Daftar publik (landing page + pilih paket harga)               */
/* ---------------------------------------------------------------------- */
.daftar-landing { min-height: 100vh; background: var(--bg); color: var(--text-main); }

.daftar-navbar {
  background: linear-gradient(135deg, var(--navy) 0%, #0a1f33 100%);
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--border-soft);
}
.daftar-navbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}
.daftar-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; color: #fff; }
.daftar-brand img { height: 36px; max-width: 140px; object-fit: contain; }
.daftar-brand i { font-size: 1.6rem; color: var(--accent-2); }

.daftar-hero {
  background: linear-gradient(135deg, var(--navy) 0%, #0a1f33 100%);
  padding: 60px 24px 56px;
  text-align: center;
}
.daftar-hero h1 { color: #fff; font-weight: 800; font-size: 2.1rem; max-width: 760px; margin: 0 auto 14px; }
.daftar-hero h1 .text-accent { color: var(--accent-2); }
.daftar-hero p { color: rgba(255,255,255,0.75); max-width: 600px; margin: 0 auto; font-size: 1rem; }

.daftar-pricing { max-width: 1100px; margin: 0 auto; padding: 54px 24px 20px; }
.daftar-pricing h2 { text-align: center; font-weight: 700; margin-bottom: 6px; }
.daftar-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 34px;
}
.paket-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 30px 22px 24px;
  text-align: center;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.paket-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.paket-card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,151,255,0.25); }
.paket-card.populer { border-color: var(--accent-2); }
.paket-card-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-2);
  color: #062033;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  white-space: nowrap;
}
.paket-card-nama { font-weight: 700; font-size: 1.1rem; margin-bottom: 4px; }
.paket-card-kecepatan { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 16px; }
.paket-card-harga { font-size: 1.55rem; font-weight: 800; color: var(--accent-2); margin-bottom: 18px; }
.paket-card-harga span { font-size: 0.78rem; font-weight: 500; color: var(--text-muted); }
.paket-card-fitur {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  text-align: left;
  font-size: 0.87rem;
}
.paket-card-fitur li { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; color: var(--text-main); }
.paket-card-fitur li i { margin-top: 3px; flex-shrink: 0; }
.paket-card-fitur li.fitur-ada i { color: #2fbf71; }
.paket-card-fitur li.fitur-tidak-ada i { color: var(--text-muted); }
.paket-card-fitur li.fitur-tidak-ada { color: var(--text-muted); }
.paket-card-btn {
  width: 100%;
  border: 1px solid var(--accent);
  color: var(--accent-2);
  background: transparent;
  font-weight: 600;
  border-radius: 8px;
  padding: 9px;
}
.paket-card-btn:hover, .paket-card.selected .paket-card-btn { background: var(--accent); color: #fff; }

.daftar-form-section { max-width: 640px; margin: 0 auto; padding: 20px 24px 70px; }
.daftar-sukses-wrap { max-width: 560px; margin: 0 auto; padding: 90px 24px; }
.daftar-form-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 34px;
}
.daftar-form-card h3 { font-weight: 700; }
.daftar-form-card .form-label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.paket-terpilih-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--subtle-primary);
  border: 1px solid var(--accent);
  color: var(--text-main);
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 18px;
  font-size: 0.88rem;
}

.daftar-footer {
  text-align: center;
  padding: 26px 24px;
  color: var(--text-muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--border-soft);
}

@media (max-width: 576px) {
  .daftar-hero h1 { font-size: 1.55rem; }
}

/* ---------------------------------------------------------------------- */
/* Kartu Router / POP (menu Router/POP admin & POP reseller)              */
/* ---------------------------------------------------------------------- */
.min-w-0 { min-width: 0; }
.pop-card { transition: box-shadow .15s ease, transform .15s ease; }
.pop-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,0.32); }
.pop-card-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--subtle-primary);
  color: var(--accent);
  font-size: 1.1rem;
}
.pop-badge-pelanggan { font-weight: 600; font-size: 0.78rem; }
.pop-card .btn { white-space: nowrap; }

@media (max-width: 575.98px) {
  .pop-card .card-body { padding: 14px; }
  .pop-card .btn { flex: 1 1 auto; }
}

/* Login reseller: panel ilustrasi pakai foto, bukan SVG */
.login-illustration-panel img.login-illust-photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  object-fit: cover;
}