/*
 * RK-PROJECT Theme Overlay
 * -------------------------------------------------------------
 * Reskin di atas mikhmon-ui.<theme>.min.css (tidak menggantikan
 * file aslinya) supaya tampilan konsisten dengan preview
 * "RK-PROJECT — Monitoring System" (dark, Inter + JetBrains Mono).
 * Cukup dimuat SETELAH stylesheet tema bawaan di include/headhtml.php.
 * -------------------------------------------------------------
 */

:root,
[data-theme="dark"]{
  --rk-bg:#0A0C10;
  --rk-bg-elevated:#111318;
  --rk-surface:#15181D;
  --rk-surface-hover:#1B1F26;
  --rk-border:#22262E;
  --rk-border-strong:#2C313B;
  --rk-text-primary:#EDEFF2;
  --rk-text-secondary:#8B93A0;
  --rk-text-muted:#5B6470;
  --rk-accent:#4C7EFF;
  --rk-accent-dim:rgba(76,126,255,.14);
  --rk-teal:#22D3B8;
  --rk-teal-dim:rgba(34,211,184,.14);
  --rk-success:#34D399;
  --rk-warning:#FBBF24;
  --rk-danger:#F87171;
  --rk-danger-dim:rgba(248,113,113,.12);
}

/* ---------- Light theme override ----------
 * --rk-accent & --rk-accent-dim tetap diisi lewat inline <style>
 * di headhtml.php (dari $themecolor), jadi tidak diulang di sini.
 */
[data-theme="light"]{
  --rk-bg:#F5F6F8;
  --rk-bg-elevated:#FFFFFF;
  --rk-surface:#FFFFFF;
  --rk-surface-hover:#EEF0F3;
  --rk-border:#E3E5EA;
  --rk-border-strong:#D0D3DA;
  --rk-text-primary:#171A1F;
  --rk-text-secondary:#5B6470;
  --rk-text-muted:#8B93A0;
  --rk-teal:#0F9A85;
  --rk-teal-dim:rgba(15,154,133,.12);
  --rk-success:#0E9F6E;
  --rk-warning:#B45309;
  --rk-danger:#DC2626;
  --rk-danger-dim:rgba(220,38,38,.10);
}

/* ---------- Base / typography ---------- */
body{
  background-color:var(--rk-bg) !important;
  color:var(--rk-text-primary) !important;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'segoe ui',Roboto,Arial,sans-serif !important;
}
h1,h2,h3,h4,h5,h6,#brand,.text-bold{font-weight:600 !important;}
a{color:var(--rk-accent);}
code,.mono,.table td.mono,input,select,.form-control,.group-item{
  font-family:'JetBrains Mono',monospace;
}

::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--rk-bg-elevated);}
::-webkit-scrollbar-thumb{background:var(--rk-border-strong);border-radius:10px;}
::-webkit-scrollbar-corner{background:var(--rk-bg-elevated);}

/* ---------- Top navbar ---------- */
.navbar{
  background-color:var(--rk-bg-elevated) !important;
  border-bottom:1px solid var(--rk-border) !important;
}
.navbar-left a,.navbar-right a{color:var(--rk-text-secondary) !important;}
.navbar a:hover{color:var(--rk-text-primary) !important;}
.navbar-hover:hover{background-color:var(--rk-surface-hover) !important;}
.ses{background-color:var(--rk-surface) !important;color:var(--rk-text-primary) !important;border:1px solid var(--rk-border) !important;border-radius:8px !important;}
.dropd{background-color:var(--rk-surface) !important;color:var(--rk-text-primary) !important;border:1px solid var(--rk-border) !important;border-radius:8px !important;}
#brand span{color:var(--rk-text-primary) !important;}

/* ---------- Sidebar ---------- */
.sidenav{
  background-color:var(--rk-bg-elevated) !important;
  border-right:1px solid var(--rk-border) !important;
  /* Maksa sidebar SELALU paling depan, gak peduli elemen lain (termasuk
     Leaflet map) pakai z-index berapa pun -- lebih pasti daripada
     ngatur/ngurung z-index si elemen lain satu-satu. */
  z-index:2147483647 !important;
}
#navbar,.navbar{
  z-index:2147483647 !important;
}
.sidenav a,.dropdown-btn{
  color:var(--rk-text-secondary) !important;
  border-radius:8px !important;
  font-size:13.5px !important;
  transition:.15s !important;
}
.sidenav a:hover,.dropdown-btn:hover{
  background-color:var(--rk-surface-hover) !important;
  color:var(--rk-text-primary) !important;
}
.active{
  background:var(--rk-accent-dim) !important;
  color:var(--rk-accent) !important;
  font-weight:600 !important;
  border-radius:8px !important;
}
.sidenav i{color:inherit !important;}
.dropdown-container{background:transparent !important;}

/* ---------- Cards / boxes ---------- */
.box,.card{
  background-color:var(--rk-surface) !important;
  border:1px solid var(--rk-border) !important;
  border-radius:12px !important;
  color:var(--rk-text-primary) !important;
}
.box a,.box h1,.card h3{color:var(--rk-text-primary) !important;}
.card-header{
  border-bottom:1px solid var(--rk-border) !important;
  background:transparent !important;
  font-weight:600 !important;
}
.card-footer a{color:var(--rk-accent) !important;}
.box-group-icon{
  background:var(--rk-accent-dim) !important;
  color:var(--rk-accent) !important;
  border-radius:8px !important;
}
/* Icon di dalam card yang sudah punya background warna solid (status/accent)
   — pakai overlay putih transparan + ikon putih, supaya kontras & kelihatan
   beda dari card, bukan ikut jadi satu warna sama seperti card-nya. */
.bg-blue .box-group-icon,.bg-primary .box-group-icon,.bg-info .box-group-icon,.bg-light-blue .box-group-icon,
.bg-green .box-group-icon,.bg-success .box-group-icon,.bg-teal .box-group-icon,
.bg-yellow .box-group-icon,.bg-warning .box-group-icon,.bg-orange .box-group-icon,
.bg-red .box-group-icon,.bg-danger .box-group-icon,
.bg-dark .box-group-icon,.bg-secondary .box-group-icon,.bg-grey .box-group-icon,.bg-grey-dark .box-group-icon{
  background:rgba(255,255,255,.20) !important;
  color:#fff !important;
}
.box-bordered{border:1px solid var(--rk-border) !important;}

/* status color boxes -> map to teal / danger / warning */
.bg-blue,.bg-primary,.bg-info,.bg-light-blue{background-color:var(--rk-accent) !important;color:#fff !important;}
.bg-green,.bg-success,.bg-teal{background-color:var(--rk-teal) !important;color:#062621 !important;}
.bg-yellow,.bg-warning,.bg-orange{background-color:var(--rk-warning) !important;color:#3a2900 !important;}
.bg-red,.bg-danger{background-color:var(--rk-danger) !important;color:#3a0d0d !important;}
.bg-dark,.bg-secondary,.bg-grey,.bg-grey-dark{background-color:var(--rk-surface-hover) !important;color:var(--rk-text-primary) !important;}
.text-blue,.text-primary,.text-info,.text-light-blue{color:var(--rk-accent) !important;}
.text-green,.text-success,.text-teal{color:var(--rk-teal) !important;}
.text-yellow,.text-warning,.text-orange{color:var(--rk-warning) !important;}
.text-red,.text-danger{color:var(--rk-danger) !important;}

/* ---------- Tables ---------- */
.table td,.table th,th{color:var(--rk-text-secondary) !important;}
.table th{
  text-transform:uppercase;
  font-size:10.5px !important;
  letter-spacing:.4px;
  color:var(--rk-text-muted) !important;
  font-weight:500 !important;
  border-bottom:1px solid var(--rk-border) !important;
}
.table td{border-bottom:1px solid var(--rk-border) !important;}
.table-bordered td,.table-bordered th{border:1px solid var(--rk-border) !important;}
.table-hover:hover tbody tr:hover{background-color:var(--rk-surface-hover) !important;}
/* Row-level status highlight (dipakai dashboard "Traffic Gawajar", ppp/ppplog.php, dll --
   sebelumnya class Bootstrap ini gak ada padanannya sama sekali di sini, jadi baris
   OFFLINE/gawajar renderable tanpa highlight apapun. .badge juga belum ada padanan
   sebelumnya -- lihat .rk-badge di page yang makai. */
.table-danger,.table-danger>td,.table-danger>th{background-color:var(--rk-danger-dim) !important;}
.table-warning,.table-warning>td,.table-warning>th{background-color:rgba(251,191,36,.12) !important;}
.table-success,.table-success>td,.table-success>th{background-color:var(--rk-teal-dim) !important;}
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;background:var(--rk-surface-hover);color:var(--rk-text-primary);}
.badge-danger{background:var(--rk-danger-dim) !important;color:var(--rk-danger) !important;}
.badge-warning{background:rgba(251,191,36,.16) !important;color:var(--rk-warning) !important;}
.badge-success{background:var(--rk-teal-dim) !important;color:var(--rk-teal) !important;}

/* ---------- Buttons / forms ---------- */
.btn{
  border-radius:7px !important;
  border:1px solid var(--rk-border-strong) !important;
  background:var(--rk-surface) !important;
  color:var(--rk-text-secondary) !important;
}
.btn:hover{color:var(--rk-text-primary) !important;border-color:var(--rk-accent) !important;box-shadow:none !important;}
.btn-login{
  background-color:var(--rk-accent) !important;
  color:#fff !important;
  border-radius:8px !important;
  font-weight:600 !important;
}
.btn-login:hover{opacity:.9 !important;}
.form-control,.group-item{
  background-color:var(--rk-bg) !important;
  border:1px solid var(--rk-border) !important;
  border-radius:7px !important;
  color:var(--rk-text-primary) !important;
}
.form-control:focus{border-color:var(--rk-accent) !important;}
.form-control::placeholder,.group-item::placeholder{color:var(--rk-text-muted) !important;}

/* ---------- Login / register box ---------- */
.login-box .card,.register-box .card{
  border-radius:14px !important;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}

/* ---------- Modals ---------- */
.modal-window{background-color:rgba(0,0,0,.6) !important;}
.modal-window>div{
  background-color:var(--rk-surface) !important;
  border:1px solid var(--rk-border) !important;
  border-radius:12px !important;
  color:var(--rk-text-primary) !important;
}
.modal-window header{border-bottom:1px solid var(--rk-border) !important;}
.modal-close{color:var(--rk-text-secondary) !important;}
.modal-close:hover{color:var(--rk-text-primary) !important;}

/* ---------- Misc ---------- */
#notify{
  background-color:var(--rk-surface) !important;
  border:1px solid var(--rk-border) !important;
  color:var(--rk-text-primary) !important;
  border-radius:8px !important;
}
.progress{background-color:var(--rk-bg) !important;border-radius:20px !important;}
.progress-bar-blue{background-color:var(--rk-accent) !important;}
.progress-bar-red{background-color:var(--rk-danger) !important;}
.alert{border-radius:8px !important;border:1px solid var(--rk-border) !important;}

/* ---------- Leaflet map (fix numpuk di atas sidebar, terutama di HP) ----------
 * Percobaan pertama (position:relative + cap z-index anak leaflet) TERNYATA
 * TIDAK CUKUP -- karena leaflet.css sendiri sudah otomatis kasih
 * position:relative ke container-nya (class "leaflet-container" yang
 * ditempel Leaflet saat L.map() dipanggil), jadi itu bukan solusinya.
 * Solusi yang beneran pasti: bungkus peta dalam WRAPPER div terpisah
 * (lihat mapping/hub.php, class "leaflet-map-wrap"), dan kasih wrapper itu
 * "isolation:isolate" -- properti CSS modern yang MEMAKSA elemen jadi
 * stacking-context baru yang benar-benar tertutup, apa pun z-index internal
 * Leaflet-nya (200-1000+). Semua yang di dalam wrapper dijamin gak akan
 * pernah muncul di atas elemen luar (seperti sidebar, z-index:9),
 * ditambah overflow:hidden sebagai jaring pengaman visual.
 */
.leaflet-map-wrap{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:8px;
  z-index:0;
}

/* ---------- Mobile tuning: dashboard traffic chart & mapping ----------
 * Di layar sempit, kolom dashboard (col-8/col-6/col-4/col-3 dst) sudah
 * otomatis jadi full-width (aturan bawaan mikhmon-ui di @media max-width:750px),
 * tapi tinggi grafik & elemen di dalamnya masih dipatok angka desktop
 * (200-210px) yang kelihatan kekecilan/penyok begitu lebar kontainernya
 * berubah drastis jadi full-width HP. Rapikan di sini.
 */
@media screen and (max-width:750px){
  /* Traffic chart -- dashboard gabungan (id="chart-<dist>") & per-router
     (id="trafficMonitor") -- kasih tinggi lebih lega di HP */
  [id^="chart-"], #trafficMonitor{
    height:260px !important;
  }
  /* Pastikan svg Highcharts ikut selebar kontainernya, bukan nyisa lebar lama */
  .highcharts-container, .highcharts-container svg{
    width:100% !important;
  }
  /* Dropdown pilih interface di header card dashboard gabungan -- di
     desktop float kanan sejajar judul, di HP kesempitan/numpuk. Taruh
     di bawah judul, full-width. */
  .dashIfaceSelect{
    float:none !important;
    width:100% !important;
    margin-top:6px !important;
    display:block !important;
  }
  .card-header.clearfix .card-title{
    float:none !important;
    display:block !important;
  }
  /* Tombol aksi di header card (mis. "+ Tambah OLT") -- di desktop float
     kanan sejajar judul, di HP taruh di bawah judul, full-width */
  .card-header.clearfix button,
  .card-header.clearfix .btn{
    float:none !important;
    width:100% !important;
    margin:8px 0 0 !important;
    display:block !important;
  }
  /* Peta mapping -- 480px kepanjangan di layar HP yang pendek, kurangi
     supaya tabel data di bawahnya masih keliatan tanpa scroll kebanyakan */
  #areaMap{
    height:300px !important;
  }
}