/*
 * mikhmon-extra.css
 * Sentuhan modern lintas-tema untuk Mikhmon.
 * File ini ditambahkan SETELAH tema aktif, sehingga semua tema
 * (dark, light, blue, green, pink) mendapat peningkatan yang sama
 * tanpa mengubah identitas/warna tema masing-masing.
 */

/* ---------- smoothing ikon font-awesome ---------- */
.fa { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ---------- kartu & box lebih halus ---------- */
.card {
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  overflow: hidden;
}
.card-header { border-radius: 10px 10px 0 0 !important; }
.card-header h3 {
  display: flex; align-items: center; gap: 8px;
}
.box {
  border-radius: 10px !important;
  transition: transform .15s ease, box-shadow .15s ease;
  position: relative;
  overflow: hidden;
}
.box:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.box-bordered { border-radius: 10px !important; }

/* ---------- layout ikon + teks selalu berdampingan (rapi, tidak lowong) ---------- */
.box-group { display: flex !important; align-items: center; gap: 13px; }
.box-group-area { flex: 1 1 auto; min-width: 0; }

/* ---------- ikon badge (logo) di kartu dashboard ---------- */
.box-group-icon {
  border-radius: 13px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 50px !important; min-width: 50px;
  height: 50px;
  font-size: 22px !important;
  color: #fff;
  background: linear-gradient(135deg, #4b6cb7, #182848);
}
/* ikon SVG modern RK.ID (jam/router/health/finance) — currentColor mengikuti badge */
.mkmn-svgico { display: block; width: 24px; height: 24px; }
/* varian warna badge — semi transparan agar menyatu dengan kartu (light & dark) */
.mkmn-ic-blue   { background: rgba(91,134,229,.16) !important; color:#3f72d6 !important; box-shadow:none !important; }
.mkmn-ic-green  { background: rgba(17,153,142,.16) !important; color:#16a085 !important; box-shadow:none !important; }
.mkmn-ic-purple { background: rgba(127,83,172,.18) !important; color:#8160c8 !important; box-shadow:none !important; }
.mkmn-ic-amber  { background: rgba(247,151,30,.18) !important; color:#d98a17 !important; box-shadow:none !important; }
.mkmn-ic-red    { background: rgba(238,9,121,.16) !important; color:#e0457e !important; box-shadow:none !important; }
.mkmn-ic-teal   { background: rgba(12,235,235,.16) !important; color:#10a3a3 !important; box-shadow:none !important; }
.mkmn-badge-icon { background: rgba(255,255,255,.22) !important; box-shadow: none; }

/* ---------- watermark ikon besar di kartu stat berwarna ---------- */
.mkmn-watermark {
  position: absolute;
  right: -6px;
  bottom: -14px;
  font-size: 78px;
  opacity: .14;
  pointer-events: none;
  line-height: 1;
}

/* angka besar pada stat box */
.box h1 { letter-spacing: -1px; }

/* ---------- checkbox seleksi custom ---------- */
.mkmn-cbx { position: relative; display: inline-block; cursor: pointer; vertical-align: middle; line-height: 0; margin-right: 6px; }
.mkmn-cbx input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.mkmn-cbx span {
  display: inline-block; width: 18px; height: 18px;
  border: 2px solid #9aa3ab; border-radius: 5px;
  background: rgba(127,127,127,.08);
  transition: all .15s ease; vertical-align: middle;
}
.mkmn-cbx input:checked + span {
  background: #20a8d8; border-color: #20a8d8;
}
.mkmn-cbx input:checked + span::after {
  content: ""; display: block;
  width: 5px; height: 9px; margin: 1px auto 0;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.mkmn-cbx input:hover + span { border-color: #20a8d8; }

/* ---------- badge status online/offline ---------- */
.mkmn-badge {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.mkmn-badge i { font-size: 9px; vertical-align: middle; margin-right: 3px; }
.mkmn-badge-on  { background: rgba(77,189,116,.18); color: #2e9e57; }
.mkmn-badge-off { background: rgba(120,129,143,.18); color: #8b95a1; }
.mkmn-on-dot { color: #4dbd74; font-size: 9px; vertical-align: middle; margin-right: 4px; }

/* ---------- toggle switch (NTP enable) ---------- */
.mkmn-switch { position: relative; display: inline-block; width: 50px; height: 26px; }
.mkmn-switch input { opacity: 0; width: 0; height: 0; }
.mkmn-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: #b5bdc6; border-radius: 26px; transition: .2s;
}
.mkmn-slider::before {
  content: ""; position: absolute; height: 20px; width: 20px;
  left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.mkmn-switch input:checked + .mkmn-slider { background: linear-gradient(135deg,#11998e,#38ef7d); }
.mkmn-switch input:checked + .mkmn-slider::before { transform: translateX(24px); }

/* ---------- ikon sidebar lebih rapi & modern ---------- */
.sidenav a.menu i,
.sidenav .dropdown-btn i:first-child,
.sidenav .dropdown-container a i:first-child {
  width: 20px; text-align: center; margin-right: 2px;
}

/* tombol sedikit lebih modern */
.btn { border-radius: 8px !important; transition: filter .15s ease, transform .05s ease; }
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }

/* bar tombol hapus terseleksi */
.mkmn-bulkbar { animation: mkmnPop .15s ease; }
@keyframes mkmnPop { from { transform: scale(.92); opacity:.4; } to { transform: scale(1); opacity:1; } }

/* =========================================================
   RKID UI REFRESH V6 NON-LOCK
   calm colorful cards + clearer bulk selection + router card refresh
========================================================= */

:root {
  --mkmn-soft-blue-1:#4d8ef7;
  --mkmn-soft-blue-2:#2d6cdf;
  --mkmn-soft-green-1:#4fbf90;
  --mkmn-soft-green-2:#2d9b71;
  --mkmn-soft-yellow-1:#f0b429;
  --mkmn-soft-yellow-2:#db9b11;
  --mkmn-soft-red-1:#ef7c83;
  --mkmn-soft-red-2:#d96068;
  --mkmn-soft-purple-1:#8b6fe8;
  --mkmn-soft-purple-2:#7153d1;
  --mkmn-soft-slate-1:#93a3b5;
  --mkmn-soft-slate-2:#74869b;
  --mkmn-soft-teal-1:#2fa8c6;
  --mkmn-soft-teal-2:#2389ab;
  --mkmn-table-head: rgba(127,127,127,.06);
}

.card-header,
.menu.card-header {
  backdrop-filter: blur(8px);
}

.table thead th {
  background: var(--mkmn-table-head);
  font-weight: 700;
}

/* more fresh app-like chips */
.mkmn-pill,
.mkmn-select-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(32,168,216,.12);
  color: inherit;
}
.mkmn-select-sub {
  display: block;
  font-size: 11px;
  opacity: .8;
  font-weight: 600;
  margin-top: 2px;
}

/* dashboard stat cards */
.box[class*="bg-"] {
  position: relative;
  overflow: hidden;
}
.box[class*="bg-"]::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='160' viewBox='0 0 220 160'%3E%3Cg fill='none' stroke='rgba(255,255,255,.14)' stroke-width='2'%3E%3Cpath d='M22 118L74 82l34 17 37-54 48 31'/%3E%3Cpath d='M20 52h35l22 22h41l27-19h42'/%3E%3C/g%3E%3Cg fill='rgba(255,255,255,.16)'%3E%3Ccircle cx='22' cy='118' r='6'/%3E%3Ccircle cx='74' cy='82' r='6'/%3E%3Ccircle cx='108' cy='99' r='6'/%3E%3Ccircle cx='145' cy='45' r='6'/%3E%3Ccircle cx='193' cy='76' r='6'/%3E%3Ccircle cx='20' cy='52' r='5'/%3E%3Ccircle cx='77' cy='74' r='5'/%3E%3Ccircle cx='118' cy='74' r='5'/%3E%3Ccircle cx='145' cy='55' r='5'/%3E%3Ccircle cx='187' cy='55' r='5'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right -8px bottom -10px;
  background-size:160px auto;
  pointer-events:none;
  opacity:.75;
}
.box[class*="bg-"] a,
.box[class*="bg-"] a:hover { color:#fff !important; }
.box[class*="bg-"] .mkmn-watermark { opacity:.12; }

.bg-blue    { background: linear-gradient(135deg,var(--mkmn-soft-blue-1),var(--mkmn-soft-teal-2)) !important; }
.bg-green   { background: linear-gradient(135deg,var(--mkmn-soft-green-1),var(--mkmn-soft-green-2)) !important; }
.bg-yellow  { background: linear-gradient(135deg,var(--mkmn-soft-yellow-1),var(--mkmn-soft-yellow-2)) !important; }
.bg-red     { background: linear-gradient(135deg,var(--mkmn-soft-red-1),var(--mkmn-soft-red-2)) !important; }
.bg-purple  { background: linear-gradient(135deg,var(--mkmn-soft-purple-1),var(--mkmn-soft-purple-2)) !important; }
.bg-grey    { background: linear-gradient(135deg,var(--mkmn-soft-slate-1),var(--mkmn-soft-slate-2)) !important; }
.bg-primary { background: linear-gradient(135deg,#3d81eb,#2e68c7) !important; }
.bg-indigo  { background: linear-gradient(135deg,#6574cd,#4e5ebe) !important; }
.bg-pink    { background: linear-gradient(135deg,#d970aa,#c85c96) !important; }
.bg-cyan    { background: linear-gradient(135deg,#48bcd4,#2c9fb8) !important; }
.bg-teal    { background: linear-gradient(135deg,#34b7a7,#258f84) !important; }
.bg-light-blue { background: linear-gradient(135deg,#59a9f4,#3f8ce4) !important; }

/* subtle top summary boxes */
#r_1 .box,
#r_4 .box {
  background: rgba(255,255,255,.03);
}

/* bulk toolbar */
.mkmn-bulk-wrap { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.mkmn-bulkbar { box-shadow: 0 6px 14px rgba(0,0,0,.12); }
.mkmn-bulk-tools { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

/* router/session cards */
.mkmn-router-tile {
  position: relative;
  border-radius: 14px;
  overflow:hidden;
  min-height: 80px;
  padding: 11px 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
}
.mkmn-router-tile::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='120' viewBox='0 0 260 120'%3E%3Cg fill='none' stroke='rgba(255,255,255,.17)' stroke-width='2'%3E%3Cpath d='M16 86h46l18-20h34l20-25h40l18 14h52'/%3E%3Cpath d='M34 22l18 15h48l16 10h54l18 18'/%3E%3C/g%3E%3Cg fill='rgba(255,255,255,.18)'%3E%3Ccircle cx='16' cy='86' r='5'/%3E%3Ccircle cx='80' cy='66' r='5'/%3E%3Ccircle cx='134' cy='41' r='5'/%3E%3Ccircle cx='192' cy='55' r='5'/%3E%3Ccircle cx='244' cy='55' r='5'/%3E%3Ccircle cx='34' cy='22' r='5'/%3E%3Ccircle cx='100' cy='37' r='5'/%3E%3Ccircle cx='170' cy='47' r='5'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right bottom;
  background-size:140px auto;
  opacity:.7;
  pointer-events:none;
}
.mkmn-router-tile .box-group { gap: 12px !important; }
.mkmn-router-tile .box-group-icon {
  width:50px !important;
  min-width:50px;
  height:50px;
  border-radius:14px !important;
  background: rgba(14,24,44,.16) !important;
  border:1px solid rgba(255,255,255,.22);
  color:#fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.mkmn-router-tile .box-group-icon svg { width:26px; height:26px; }
.mkmn-router-actions a,
.mkmn-router-actions .connect {
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-right:10px;
  font-weight:700;
  font-size:12.5px;
  color:#fff !important;
  text-decoration:none;
}
.mkmn-router-actions a:last-child { margin-right:0; }
.mkmn-router-title { font-size:14.5px; font-weight:800; margin-bottom:2px; line-height:1.25; }
.mkmn-router-sub { opacity:.95; line-height:1.35; font-size:12.5px; }
.mkmn-router-actions { margin-top:6px !important; }

/* table action icons fresher */
.table .fa-edit { color:#65a6ff; }
.table .fa-print,.table .fa-qrcode { color:#35a87a; }
.table .fa-minus-square,.table .fa-trash { color:#e76d74; }
.table .fa-lock { color:#f0b429; }
.table .fa-unlock { color:#61c18d; }
.table .fa-search { color:#76aaf6; }

/* small utility */
.mkmn-right-tools { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.mkmn-print-note { font-size:12px; opacity:.82; margin-top:8px; }

@media (max-width: 768px) {
  .mkmn-right-tools { justify-content:flex-start; margin-top:10px; }
  .mkmn-bulk-tools { justify-content:flex-start; }
  .mkmn-router-tile .box-group { align-items:flex-start !important; }
}


/* =========================================================
   RKID UI FIX ROUND 2 - tighter toolbars + cleaner forms
========================================================= */
.mkmn-toolbar-row {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:10px;
}
.mkmn-toolbar-row > [class*="col-"] { float:none !important; }
.mkmn-toolbar-actions { display:flex; justify-content:flex-end; align-items:flex-start; gap:8px; flex-wrap:wrap; }
.mkmn-toolbar-actions .btn,
.mkmn-right-tools .btn,
.mkmn-bulk-wrap .btn {
  min-height:32px;
  padding:7px 12px !important;
  line-height:1.2;
  font-weight:700;
  border-radius:9px !important;
  white-space:nowrap;
}
.mkmn-right-tools { margin-top:0 !important; }
.mkmn-print-note {
  width:100%;
  text-align:right;
  margin:6px 0 0 !important;
  font-size:11.5px !important;
  opacity:.72;
}
.mkmn-search-wide { width:100%; max-width:360px; }
.mkmn-toolbar-row .input-group { width:100%; }
.mkmn-toolbar-row .group-item,
.mkmn-toolbar-row .form-control,
.mkmn-search-wide {
  height:34px !important;
  padding:6px 10px !important;
}
.mkmn-bulk-wrap {
  padding:0 !important;
  margin:8px 0 10px !important;
  min-height:34px;
}
.mkmn-select-text { padding:4px 9px; }
.mkmn-select-sub { margin-top:4px; line-height:1.1; }
.table th:first-child,
.table td:first-child { vertical-align:middle !important; }

/* Make selected action buttons calmer and more readable */
.mkmn-bulkbar.bg-red { background:linear-gradient(135deg,#e46f78,#d95862)!important; }
.mkmn-bulkbar.bg-blue { background:linear-gradient(135deg,#4388e8,#2e73d0)!important; }
.mkmn-bulkbar.bg-teal { background:linear-gradient(135deg,#33b5ad,#24948d)!important; }
.mkmn-bulkbar.bg-purple { background:linear-gradient(135deg,#8f72e8,#765bd2)!important; }

/* NTP page inputs */
#routerClock,#browserClock { letter-spacing:.2px; }
.card .mkmn-switch { vertical-align:middle; }

@media (max-width: 980px) {
  .mkmn-toolbar-row { display:block; }
  .mkmn-toolbar-actions { justify-content:flex-start; margin-top:8px; }
  .mkmn-print-note { text-align:left; }
  .mkmn-search-wide { max-width:100%; }
}


/* =========================================================
   RKID UI FIX ROUND 3 - toolbar alignment + visible connect notify
========================================================= */
/* Toolbar pengguna: tombol standar didekatkan ke kolom komentar, bukan mentok kanan */
.mkmn-toolbar-row {
  align-items:center !important;
  gap:14px !important;
  margin-bottom:4px !important;
}
.mkmn-toolbar-row .col-7 {
  width:63% !important;
  max-width:880px !important;
}
.mkmn-toolbar-row .col-5 {
  width:auto !important;
  flex:0 0 auto !important;
}
.mkmn-toolbar-actions {
  justify-content:flex-start !important;
  align-items:center !important;
  margin-top:0 !important;
}
.mkmn-toolbar-actions .mkmn-right-tools {
  justify-content:flex-start !important;
  margin-top:0 !important;
}
.mkmn-toolbar-actions .btn,
.mkmn-right-tools .btn {
  margin:0 4px 0 0 !important;
}
.mkmn-print-note { display:none !important; }
.mkmn-bulk-wrap {
  margin:0 0 8px !important;
  min-height:30px !important;
  align-items:center !important;
}
.mkmn-bulk-wrap .btn {
  margin:0 6px 0 0 !important;
}
.card-body > .mkmn-scope { margin-top:0 !important; }

/* Notifikasi Menghubungkan dipaksa tampil di atas semua card/navbar */
#notify {
  position: fixed !important;
  top: 68px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin-left: 0 !important;
  z-index: 999999 !important;
  min-width: 260px !important;
  width: auto !important;
  max-width: 92vw !important;
  padding: 11px 18px !important;
  text-align: center !important;
  border-radius: 14px !important;
  border: 1px solid rgba(56,189,248,.35) !important;
  background: rgba(15,31,48,.96) !important;
  color: #f8fbff !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.32) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#notify .message {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  min-height:22px !important;
  font-weight:800 !important;
  letter-spacing:.2px !important;
}
#notify .message::before {
  content:"\f110";
  font-family: FontAwesome;
  display:inline-block;
  animation: mkmnSpin .9s linear infinite;
  color:#38bdf8;
}
@keyframes mkmnSpin { to { transform: rotate(360deg); } }

@media (max-width: 1200px) {
  .mkmn-toolbar-row .col-7 { width:100% !important; max-width:none !important; }
  .mkmn-toolbar-row .col-5 { width:100% !important; }
  .mkmn-toolbar-actions { margin-top:6px !important; }
}


/* =========================================================
   RKID UI FIX ROUND 4 — ikon sidebar berwarna (tetap menyatu)
   Setiap ikon mendapat satu warna identitas (semua tema, semua
   state) memakai palet yang sama dengan badge dashboard, jadi
   sidebar terasa lebih hidup tanpa mengubah warna latar/tema asli.
========================================================= */
:root {
  --mkmn-sb-blue:#2f7dde;
  --mkmn-sb-green:#1fa971;
  --mkmn-sb-purple:#7c5cdb;
  --mkmn-sb-amber:#d98a17;
  --mkmn-sb-red:#e2566a;
  --mkmn-sb-teal:#1f93ab;
  --mkmn-sb-indigo:#5a67c9;
  --mkmn-sb-pink:#c85c96;
  --mkmn-sb-slate:#8b97a6;
  --mkmn-sb-cyan:#2c9fb8;
}

.sidenav a.menu i:first-child,
.sidenav .dropdown-btn i:first-child,
.sidenav .dropdown-container a i:first-child {
  transition: color .15s ease, transform .15s ease;
}
.sidenav a.menu:hover i:first-child,
.sidenav .dropdown-btn:hover i:first-child,
.sidenav .dropdown-container a:hover i:first-child {
  transform: scale(1.12);
}

/* dashboard */
.sidenav i.fa-dashboard,
.sidenav i.fa-tachometer { color: var(--mkmn-sb-blue) !important; }
/* hotspot */
.sidenav i.fa-wifi { color: var(--mkmn-sb-green) !important; }
.sidenav i.fa-laptop { color: var(--mkmn-sb-blue) !important; }
.sidenav i.fa-address-book { color: var(--mkmn-sb-indigo) !important; }
.sidenav i.fa-hourglass { color: var(--mkmn-sb-amber) !important; }
.sidenav i.fa-print { color: var(--mkmn-sb-slate) !important; }
.sidenav i.fa-ticket { color: var(--mkmn-sb-pink) !important; }
/* pengguna / profil */
.sidenav i.fa-users { color: var(--mkmn-sb-teal) !important; }
.sidenav i.fa-pie-chart { color: var(--mkmn-sb-purple) !important; }
.sidenav i.fa-user-plus { color: var(--mkmn-sb-green) !important; }
.sidenav i.fa-list { color: var(--mkmn-sb-slate) !important; }
.sidenav i.fa-user-circle { color: var(--mkmn-sb-blue) !important; }
/* ppp */
.sidenav i.fa-share-alt { color: var(--mkmn-sb-purple) !important; }
.sidenav i.fa-plug { color: var(--mkmn-sb-purple) !important; }
.sidenav i.fa-cubes { color: var(--mkmn-sb-purple) !important; }
/* log & sistem */
.sidenav i.fa-align-justify { color: var(--mkmn-sb-slate) !important; }
.sidenav i.fa-clock-o { color: var(--mkmn-sb-amber) !important; }
.sidenav i.fa-power-off { color: var(--mkmn-sb-red) !important; }
.sidenav i.fa-sitemap { color: var(--mkmn-sb-teal) !important; }
.sidenav i.fa-area-chart { color: var(--mkmn-sb-blue) !important; }
.sidenav i.fa-money { color: var(--mkmn-sb-green) !important; }
/* pengaturan & lainnya */
.sidenav i.fa-gear { color: var(--mkmn-sb-slate) !important; }
.sidenav i.fa-plus,
.sidenav i.fa-plus-square { color: var(--mkmn-sb-green) !important; }
.sidenav i.fa-upload { color: var(--mkmn-sb-blue) !important; }
.sidenav i.fa-edit { color: var(--mkmn-sb-amber) !important; }
.sidenav i.fa-info-circle { color: var(--mkmn-sb-cyan) !important; }
/* keluar — diberi warna agar langsung dikenali sebagai aksi keluar */
.sidenav i.fa-sign-out { color: var(--mkmn-sb-red) !important; }

/* chevron dropdown & tombol hamburger dibiarkan netral (bukan ikon konten) */
.sidenav i.fa-caret-down,
.sidenav i.fa-bars { opacity: .85; }