/* Gaya tampilan NOC - 374 token warna terbaca dari template.
   Mesin geser warna MATI (GESER_WARNA=False): tidak ada token
   yang ditimpa, seluruh halaman memakai warna asli templat.
   Yang disusun di bawah hanya lapisan interaksi & bentuk. */


html[data-tema="onyx"]{color-scheme:dark}
/* Latar body TIDAK dipaksa apa-apa lagi: sejak warna kembali ke asli,
   halaman yang memang punya gradien bawaan (pusat, absen) berhak
   menampilkannya, dan yang polos tetap polos. */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(128,140,160,0.35);border-radius:99px;
  border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(128,140,160,0.60);
  border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}


/* ---- lapisan interaksi modern ---- */
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:root{accent-color:var(--accent,#00ffcc)}
/* ::selection sengaja TIDAK diatur: warna seleksi bawaan browser adalah
   bagian dari "warna seperti semula" yang diminta operator. */
/* color-scheme:dark membuat browser mewarnai tautan yang TIDAK diberi warna
   dengan periwinkle bawaannya - rgb(158,158,255). Warna itu bukan bagian
   dari palet mana pun di aplikasi ini, dan dia muncul di tempat yang tidak
   diduga (pembungkus <a> di sekeliling tombol, tautan di dalam pesan
   bantuan). Diwariskan dari induknya, lalu ke toska khas aplikasi saat
   disentuh - jadi tetap terbaca bisa diklik. Spesifisitas NOL: halaman
   mana pun yang memang mewarnai tautannya sendiri tetap menang. */
:where(a){color:inherit;text-decoration-color:rgba(150,160,180,0.45)}
:where(a):hover{color:var(--accent,#00ffcc)}
:where(.stat,.kpi,.pil,.lencana,.badge,td){font-variant-numeric:tabular-nums}
:where(button,.tb,a,select,textarea,
       input:not([type=checkbox]):not([type=radio])):focus-visible{
  outline:2px solid var(--accent,#00ffcc);outline-offset:2px}
:where(.topbar,.header,.atas,.top){
  backdrop-filter:blur(12px) saturate(1.35);
  -webkit-backdrop-filter:blur(12px) saturate(1.35)}
@media (prefers-reduced-motion:no-preference){
  :where(button,.tb,.pil,.lencana,.badge,.chip,a,select,summary,
         input:not([type=checkbox]):not([type=radio]),textarea,
         .noc-palet-item,.noc-dok-item){
    transition:background-color .16s ease,border-color .16s ease,
               color .16s ease,box-shadow .18s ease,transform .12s ease,
               opacity .16s ease}
  :where(button,.tb):not(:disabled):hover{transform:translateY(-1px)}
  :where(button,.tb):not(:disabled):active{transform:translateY(0) scale(.98)}
  /* Kartu router SENGAJA tidak diberi transisi: kartu itu dirender ulang
     oleh denyut 5 detik, dan transisi yang terus di-restart oleh render
     ulang tampak sebagai bayangan yang macet di nilai awalnya. */
  @keyframes noc-muncul{from{opacity:0;transform:translateY(7px) scale(.985)}
                        to{opacity:1;transform:none}}
  :where(.modal-isi,.pop-isi,#noc-palet-kotak){animation:noc-muncul .18s ease}
}


/* ---- bentuk & tata letak per tema ---- */
html[data-tema="onyx"] :is(.kartu,.panel,.ringkas,.akun,.hero,.kartu-halaman,.nas-kartu,.router-card,.tiket,.hasil-kotak,.masalah,.kotak,.sambut,.tag-form,.modal-isi,.pop-isi,.stat,.kpi,.temuan,.login-box,.tag-baris,.hint,.peringatan,.galat,.sukses,.jd-besok,.gen-item,.wan-baris,.lipat,.cari-hasil,.params,.izin-ringkas,.skrip,.diff,.perintah,.kotak-kode,.s){border-radius:20px !important}
html[data-tema="onyx"] :is(select,textarea,input:not([type=checkbox]):not([type=radio])){border-radius:13px !important}
html[data-tema="onyx"] :is(.pil,.lencana,.badge,.tanda,.chip,.jd-sel,.sasaran .tukar){border-radius:999px !important}
html[data-tema="onyx"] :is(button,.tb,.tbl:not(table),.b-ghost,.b-kecil,.big,.kam-tb,.btn-small,.hdr-btn,.kmenu-btn){border-radius:999px !important}
html[data-tema="onyx"] :is(.kartu,.panel,.ringkas,.akun,.hero,.kartu-halaman,.nas-kartu,.router-card,.tiket,.hasil-kotak,.masalah,.kotak,.sambut,.tag-form){padding:calc(14px + 4px);border-width:0px;border-style:none;box-shadow:0 2px 10px -4px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06)}
html[data-tema="onyx"] body{font-size:1.01em;line-height:1.6}

/* ---- sentuhan akhir ----
   Sejak warna kembali ke asli (GESER_WARNA=False), lapisan ini TIDAK BOLEH
   membawa warna identitas apa pun - tidak emas, tidak palet baru. Yang
   tersisa hanya urusan BENTUK, plus garis pemisah yang memakai toska
   #00ffcc - aksen bawaan aplikasi sendiri - dengan kadar rendah supaya
   belasan garis tipis tidak berdengung di satu layar. */
/* 1. Garis pemisah kepala halaman: toska asli, memudar di kedua ujungnya.
      Digambar sebagai background 1px di tepi bawah, BUKAN border - border
      tidak bisa memudar. Daftarnya hanya benda yang MEMANG sudah bergaris. */
html[data-tema="onyx"] :is(.topbar,.header,.atas,.top,.deck-ringkas,
  .section-title,.router-name){
  border-bottom-color:transparent !important;
  background-image:linear-gradient(90deg,rgba(0,255,204,0) 0%,
    rgba(0,255,204,0.28) 10%,rgba(0,255,204,0.28) 90%,
    rgba(0,255,204,0) 100%);
  background-repeat:no-repeat;background-size:100% 1px;
  background-position:0 100%}
/* 2. Baris di DALAM kartu ikut sudut yang sama murah hatinya. Latar sorot
      bersudut 6px di dalam kartu bersudut 20px terbaca sebagai dua bahasa
      bentuk yang bertengkar. */
html[data-tema="onyx"] :is(.ping-row,.traf-row,.gen-item,.wan-baris,
  .cari-hasil){border-radius:10px}
/* 3. Rel status di tepi kiri kartu dibulatkan penuh: sejak kartunya bersudut
      20px, ujung persegi rel menonjol keluar sebagai dua sudut tajam. */
html[data-tema="onyx"] .kartu-rel{border-radius:99px;left:1px}
/* 4. Ubin peluncur: sudutnya saja yang diselaraskan; warna hover-nya milik
      halaman (gaya asli .launch-tile:hover di index.html). */
html[data-tema="onyx"] .launch-tile{border-radius:15px}
/* 5. Pemisah tegak antar keterangan: netral samar - memang begitu tugasnya.
      Bilah gulir dan cap monogram TIDAK ditimpa lagi: gaya asli halaman
      (lewat token yang kini berwarna asli) yang berlaku. */
html[data-tema="onyx"] :is(.rs,.metrik){
  border-left-color:rgba(255,255,255,0.12)}

/* =========================================================================
   TAMPILAN RINGKAS (27 Sep 2026) - ikut /tema.css ke semua halaman.

   1. Tombol aksi yang diubah jadi ikon oleh ikon_aksi.js (.noc-ik):
      kotak kecil NETRAL, warna ikonnya yang menyampaikan arti
      (toska = tambah, hijau = simpan/aktifkan/bayar, kuning = nonaktifkan/
      reboot, merah = hapus). Latar berwarna-warni bawaan tiap tombol sengaja
      ditimpa (!important mengalahkan style inline) - satu bahasa bentuk di
      semua menu, bukan enam warna berebut perhatian di satu bilah.
   2. Tooltip nama (#noc-tip).
   3. Penyederhanaan umum berspesifisitas NOL (:where) - aturan halaman mana
      pun tetap menang.
   Warna asli templat TIDAK diubah (GESER_WARNA=False tetap berlaku).
   ========================================================================= */

/* ---- 1. tombol ikon ---- */
.noc-ik {
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important;
  width: 34px !important; height: 34px !important; min-width: 34px !important;
  min-height: 34px !important; max-width: 34px !important;
  padding: 0 !important; gap: 0 !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  color: #cfd6df !important;
  box-shadow: none !important;
  vertical-align: middle; position: relative; cursor: pointer;
  line-height: 1 !important; font-size: 0 !important;
  flex: 0 0 auto !important; overflow: visible;
  /* Tanpa transisi: tombol yang baru dirender (daftar PPPoE, bilah terpilih)
     tidak boleh terlihat memudar dari warna aslinya ke warna netral. */
  transition: none !important;
}
summary.noc-ik { list-style: none; }
summary.noc-ik::-webkit-details-marker { display: none; }
summary.noc-ik::marker { content: ''; }
.noc-ik .noc-ik-svg { width: 18px; height: 18px; flex: 0 0 18px; pointer-events: none; }
.noc-ik > .noc-ik-teks {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  white-space: nowrap !important; border: 0 !important;
}
.noc-ik:hover:not(:disabled), .noc-ik:focus-visible {
  background: rgba(0, 255, 204, 0.12) !important;
  border-color: rgba(0, 255, 204, 0.55) !important; color: #00ffcc !important;
}
.noc-ik:disabled, .noc-ik[aria-disabled="true"] { opacity: .38 !important; cursor: not-allowed !important; }
details[open] > summary.noc-ik {
  background: rgba(0, 255, 204, 0.16) !important; border-color: rgba(0, 255, 204, 0.6) !important;
  color: #00ffcc !important;
}

.noc-ik.noc-ik-utama { color: #00ffcc !important; border-color: rgba(0, 255, 204, 0.35) !important; }
.noc-ik.noc-ik-hijau { color: #4cd964 !important; }
.noc-ik.noc-ik-hijau:hover:not(:disabled) {
  background: rgba(76, 217, 100, 0.14) !important; border-color: rgba(76, 217, 100, 0.6) !important; }
.noc-ik.noc-ik-kuning { color: #ffc107 !important; }
.noc-ik.noc-ik-kuning:hover:not(:disabled) {
  background: rgba(255, 193, 7, 0.14) !important; border-color: rgba(255, 193, 7, 0.6) !important; }
.noc-ik.noc-ik-bahaya { color: #ff8a94 !important; }
.noc-ik.noc-ik-bahaya:hover:not(:disabled) {
  background: rgba(220, 53, 69, 0.16) !important; border-color: rgba(255, 138, 148, 0.7) !important;
  color: #ffb3ba !important; }

/* Di dalam tabel: lebih kecil supaya baris tetap rapat. */
td .noc-ik, th .noc-ik {
  width: 30px !important; height: 30px !important; min-width: 30px !important;
  min-height: 30px !important; max-width: 30px !important; border-radius: 8px !important;
}
td .noc-ik .noc-ik-svg { width: 16px; height: 16px; }
/* Ikon yang berderet cukup berjarak tipis, bukan margin bawaan yang lebar. */
.noc-ik + .noc-ik { margin-left: 6px !important; }
td .noc-ik + .noc-ik { margin-left: 4px !important; }

/* Layar sentuh: sasaran jari minimal 38px. */
@media (pointer: coarse) {
  .noc-ik { width: 38px !important; height: 38px !important; min-width: 38px !important;
            min-height: 38px !important; max-width: 38px !important; }
  td .noc-ik { width: 34px !important; height: 34px !important; min-width: 34px !important;
               min-height: 34px !important; max-width: 34px !important; }
}

/* ---- 2. tooltip ---- */
#noc-tip {
  position: fixed; z-index: 2147483000; pointer-events: none;
  left: -9999px; top: -9999px; max-width: 280px;
  padding: 6px 10px; border-radius: 8px;
  background: #0d1117; color: #e8edf3;
  border: 1px solid rgba(0, 255, 204, 0.35);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  font: 600 12.5px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  opacity: 0; transform: translateY(3px);
  transition: opacity .1s ease, transform .1s ease;
  white-space: normal; text-align: center;
}
#noc-tip.tampil { opacity: 1; transform: none; }
#noc-tip.tampil.bawah { transform: none; }
#noc-tip b { display: block; font-weight: 700; }
#noc-tip small { display: block; margin-top: 2px; font-weight: 400; font-size: 11.5px;
                 color: #9aa6b2; }
@media (prefers-reduced-motion: reduce) { #noc-tip { transition: none; } }

/* ---- 3. penyederhanaan umum (spesifisitas nol) ---- */
/* Baris tabel: sorot halus saat disentuh, angka rata. */
:where(table) :where(tbody tr):hover { background-color: rgba(255, 255, 255, 0.025); }
/* ---- 4. PPPoE: aksi per baris jadi ikon langsung di baris ---- */
.ppp-ikon-baris { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ppp-tabel .k-aksi .btn-aksi { display: none; }
.ppp-tabel .k-aksi { width: 118px !important; text-align: right; }
@media (max-width: 768px) {
  /* HP: tiga ikon membuat kolom nama pelanggan terlalu sempit - kembali ke
     satu tombol menu ⋮ yang membuka daftar yang sama. */
  .ppp-ikon-baris { display: none; }
  .ppp-tabel .k-aksi .btn-aksi { display: inline-block; }
  .ppp-tabel .k-aksi { width: 38px !important; text-align: center; }
}