/* ═══════════════════════════════════════════════════════════════════════════
   KULIT CITYBOOK UNTUK PANEL ADMIN & MITRA (dataumkm)
   Berkas: assets/css/citybook-panel.css          Dibuat 2026-10-13

   Tujuan   : panel admin/mitra (AdminLTE 3 / Bootstrap 4) tampil sebahasa dengan
              situs publik dataumkm.com yang memakai template CityBook.
   Cara kerja: HANYA lapisan tampilan. Grid, JS, dan komponen AdminLTE tidak
              diubah — warna, radius, jarak, tipografi, dan gaya komponen saja.
              Dimuat TERAKHIR di head.php DAN partials/head.php (dua berkas kepala;
              melewatkan salah satunya membuat kulit mati di separuh halaman).

   Warna mengikuti palet merek dataumkm (peran-peran, jangan ditukar tanpa hitung
   kontras):  #0084FB aksen/ikon/garis (3,69:1) · #0072E5 tombol berteks putih
   (4,63:1 lulus AA) · #0068C9 tautan/teks biru kecil (5,49:1 lulus AA) ·
   #E8F3FF latar lencana/hover · #2F3B59 gelap khas CityBook · garis #E6EDF3.

   Membatalkan seluruhnya: hapus <link> berkas ini di kedua berkas head.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --cb-biru: #0084FB;         /* aksen, ikon, garis aktif */
  --cb-biru-tombol: #0072E5;  /* latar tombol berteks putih (AA) */
  --cb-biru-teks: #0068C9;    /* tautan / teks biru kecil (AA) */
  --cb-biru-lembut: #E8F3FF;  /* latar lencana & hover */
  --cb-gelap: #2F3B59;        /* header/kepala gelap khas CityBook */
  --cb-judul: #566985;        /* judul bagian */
  --cb-teks: #2b3b4a;
  --cb-sekunder: #878C9F;     /* teks sekunder template */
  --cb-garis: #E6EDF3;
  --cb-garis-lembut: #f1f4f8;
  --cb-latar: #f6f8fb;
  --cb-kuning: #FACC39;       /* penanda jumlah menunggu (warna bintang CityBook) */
  --cb-radius: 14px;
  --cb-radius-kecil: 9px;
  --cb-font-judul: 'Montserrat', 'Source Sans Pro', sans-serif;
  --cb-font-isi: 'Rubik', 'Source Sans Pro', sans-serif;
}

/* ── 1. Kerangka halaman ─────────────────────────────────────────────────── */
.content-wrapper { background: var(--cb-latar); }
.content-wrapper > .container-fluid { padding: 18px 22px 26px; }
.wrapper { background: var(--cb-latar); }

/* ── 2. Bilah atas (navbar) ─────────────────────────────────────────────── */
.main-header.navbar {
  background: var(--cb-gelap) !important;
  border-bottom: 0 !important;
  min-height: 60px;
  padding: 0 16px;
  box-shadow: 0 2px 10px rgba(16, 42, 67, .12);
}
.main-header.navbar .nav-link,
.main-header.navbar .navbar-nav > li > a { color: rgba(255, 255, 255, .92); }
.main-header.navbar .nav-link:hover,
.main-header.navbar .navbar-nav > li > a:hover { color: #fff; }
.main-header.navbar .navbar-badge { font-size: 10px; font-weight: 500; }
.main-header.navbar .form-control { border-radius: var(--cb-radius-kecil); border-color: rgba(255, 255, 255, .25); }

/* ── 3. Menu samping ────────────────────────────────────────────────────── */
.main-sidebar { background-color: var(--cb-gelap) !important; }
.main-sidebar .brand-link {
  border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
  height: 60px;
  display: flex; align-items: center; justify-content: center;
}
.main-sidebar .sidebar { padding-bottom: 24px; }
.main-sidebar .nav-sidebar > .nav-item { margin: 2px 8px; }
.main-sidebar .nav-sidebar > .nav-item > .nav-link {
  border-radius: var(--cb-radius-kecil);
  padding: 10px 12px;
  font-family: var(--cb-font-judul);
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, .84);
  border-left: 3px solid transparent;
}
.main-sidebar .nav-sidebar > .nav-item > .nav-link:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}
.main-sidebar .nav-sidebar > .nav-item > .nav-link.active {
  background: rgba(0, 132, 251, .18) !important;
  border-left-color: var(--cb-biru);
  color: #fff !important;
}
.main-sidebar .nav-sidebar .nav-icon { font-size: 14px; width: 22px; text-align: center; }
/* Anak menu (nav-treeview). Kedua berkas header.php memuat <style> di BADAN halaman
   dengan `ul.nav li.nav-item ul.nav-treeview .nav-link.active` (spesifisitas 0,5,3)
   yang akan mengalahkan aturan anak menu biasa. Selektor di bawah diberi awalan
   `.main-sidebar` (0,6,3) supaya menang tanpa perlu `!important`. */
.main-sidebar ul.nav li.nav-item ul.nav-treeview .nav-link,
.main-sidebar ul.nav li.nav-item ul.nav-treeview ul.nav-treeview .nav-link {
  color: rgba(255, 255, 255, .72) !important;
  font-size: 13px; padding: 8px 12px; border-radius: 8px;
}
.main-sidebar ul.nav li.nav-item ul.nav-treeview .nav-link:hover,
.main-sidebar ul.nav li.nav-item ul.nav-treeview ul.nav-treeview .nav-link:hover {
  color: #fff !important; background: rgba(255, 255, 255, .08) !important;
}
.main-sidebar ul.nav li.nav-item ul.nav-treeview .nav-link.active,
.main-sidebar ul.nav li.nav-item ul.nav-treeview ul.nav-treeview .nav-link.active {
  color: #fff !important; background: rgba(0, 132, 251, .22) !important;
}
.main-sidebar .nav-header {
  font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255, 255, 255, .45) !important; font-weight: 400;
  padding: 16px 20px 6px;
}
.main-sidebar .nav-sidebar .badge { border-radius: 6px; font-size: 10.5px; padding: 3px 7px; }

/* ── 4. Kepala halaman + remah ──────────────────────────────────────────── */
.content-wrapper .content-header { padding: 16px 22px 6px; }
.content-wrapper .content-header h1,
.content-wrapper .content-header h2 {
  font-family: var(--cb-font-judul);
  font-size: 22px; font-weight: 500; color: var(--cb-gelap);
  opacity: 1; letter-spacing: -.2px;
}
.content-wrapper .breadcrumb {
  background: transparent; padding: 0; margin: 4px 0 0;
  font-size: 12.5px; color: var(--cb-sekunder);
}
.content-wrapper .breadcrumb a { color: var(--cb-biru-teks); }
.content-wrapper .breadcrumb-item + .breadcrumb-item::before { color: #c8d2de; }
/* Remah halaman gaya CityBook (.profile-edit-page-header .breadcrumbs) — dipakai
   di bawah <h1> lewat helper remah_halaman() supaya kepala halaman seragam. */
.remah-halaman { margin-top: 4px; font-size: 12.5px; color: var(--cb-sekunder); line-height: 1.5; }
.remah-halaman a { color: var(--cb-biru-teks); }
.remah-halaman a:hover { text-decoration: underline; }
.remah-halaman i { margin: 0 7px; font-size: 10px; color: #c8d2de; }
.remah-halaman .aktif { color: #8b95a5; }
.content-header .row.mb-2 { align-items: center; }
.content-header hr { border-top: 1px solid var(--cb-garis); margin: 12px 0 0; }

/* ── 5. Kartu ───────────────────────────────────────────────────────────── */
.card {
  border: 1px solid rgba(16, 42, 67, .08);
  border-radius: var(--cb-radius);
  box-shadow: 0 2px 10px rgba(16, 42, 67, .05);
  margin-bottom: 20px;
}
.card-header {
  background: #fff;
  border-bottom: 1px solid #eef2f7;
  padding: 14px 20px;
  border-radius: var(--cb-radius) var(--cb-radius) 0 0;
}
.card-title {
  font-family: var(--cb-font-judul);
  font-size: 15px; font-weight: 500; color: var(--cb-gelap);
}
.card-title i { color: var(--cb-biru); margin-right: 6px; }
.card-body { padding: 20px; }
.card-footer { background: #fbfcfe; border-top: 1px solid #eef2f7; padding: 12px 20px; }
.card-outline.card-primary { border-top: 3px solid var(--cb-biru); }

/* ── 6. Tabel (rapat, gaya CityBook) ────────────────────────────────────── */
.table { margin-bottom: 0; }
.table > thead > tr > th {
  font-size: 11.5px; font-weight: 400; letter-spacing: .4px; text-transform: uppercase;
  color: #5a6b7c; background: #f7fafd;
  border-bottom: 1px solid var(--cb-garis);
  border-top: 0; padding: 12px; vertical-align: middle;
}
.table > tbody > tr > td {
  padding: 12px; font-size: 13.5px; color: var(--cb-teks);
  border-top: 1px solid var(--cb-garis-lembut); vertical-align: middle;
}
.table > tbody > tr:hover { background: #f8fbff; }
.table-striped tbody tr:nth-of-type(odd) { background: #fcfdff; }
/* Tema memberi padding-kanan 1.5rem pada sel terakhir (spesifisitas 0,4,3) sehingga
   ruang isi menyusut 12px dan tombol terakhir terpotong. Samakan jadi 12px. */
.card-body.p-0 .table > thead > tr > th:last-of-type,
.card-body.p-0 .table > tbody > tr > td:last-of-type,
.card-body.p-0 .table > tbody > tr > td:last-child { padding-right: 12px; }
/* Sel PERTAMA juga mewarisi `padding-left:1.5rem` (24px) dari adminlte.css
   (`.card-body.p-0 .table tbody > tr > td:first-of-type`) sehingga ruang isi sel
   menyusut 12px — pada kolom centang 40px, kotak centangnya keluar batas
   (terukur: clientWidth 40 vs scrollWidth 63). Samakan jadi 12px. */
.card-body.p-0 .table > thead > tr > th:first-of-type,
.card-body.p-0 .table > tbody > tr > td:first-of-type,
.card-body.p-0 .table > thead > tr > th:first-child,
.card-body.p-0 .table > tbody > tr > td:first-child { padding-left: 12px; }
.card-body.p-0 { overflow-x: auto; }
.table-responsive { -webkit-overflow-scrolling: touch; }

/* ── 6b. Tabel DAFTAR: jangan potong isi, biarkan menggulir mendatar ───────
   Arahan pemilik 13 Okt 2026: "nama usaha harus terlihat semua… lebih baik
   tambahkan slider bar sehingga user bisa geser ke kanan… daripada memaksakan
   semua kolom tampil dalam satu halaman".
   Sebelumnya tabel memakai `table-layout:fixed` + lebar kolom dipatok sehingga
   teks panjang terpotong (terukur di halaman Verifikasi 7 sel dan Pengguna 27
   sel terpotong; mis. nama usaha butuh 397px di kolom 274px).
   Sekarang: kolom selebar isinya (`table-layout:auto` + `white-space:nowrap`),
   wadah bergulir DUA arah dengan tinggi terbatas sehingga batang gulir mendatar
   selalu terlihat di dasar area tabel, dan judul kolom ditempel di atas. */
/* Cakupan diperluas ke SEMUA wadah daftar panel (`.card-body.p-0`), bukan hanya
   yang berkelas `table-responsive` — halaman Berita Utama memakai
   `<div class="card-body p-0">` tanpa kelas itu sehingga tabelnya tetap
   terpotong (terukur 19 sel terpotong). */
.content-wrapper .card-body.p-0 {
  overflow: auto;
  /* Tinggi area tabel dijaga supaya batang gulir MENDATAR tetap berada di dalam
     layar tanpa perlu menggulir halaman dulu: di atas tabel ada kepala halaman +
     kartu filter (± 520px), jadi sisa ruang layar yang dipakai.
     `max()` menjaga area tetap berguna di layar pendek. */
  max-height: max(260px, calc(100vh - 540px));
  scrollbar-width: thin;
  scrollbar-color: #9db6d0 #eef2f7;
}
.content-wrapper .card-body.p-0::-webkit-scrollbar { width: 12px; height: 12px; }
.content-wrapper .card-body.p-0::-webkit-scrollbar-track { background: #eef2f7; border-radius: 8px; }
.content-wrapper .card-body.p-0::-webkit-scrollbar-thumb { background: #9db6d0; border-radius: 8px; border: 2px solid #eef2f7; }
.content-wrapper .card-body.p-0::-webkit-scrollbar-thumb:hover { background: var(--cb-biru); }
.content-wrapper .card-body.p-0 .table { table-layout: auto; width: 100%; }
/* Sel tabel daftar: isi tampil utuh (dulu `overflow:hidden` + `text-overflow:
   ellipsis` memotong nama usaha). Aturan selektor lama di adminlte.css memakai
   `.table td` (spesifisitas 0,1,1) — di sini dipakai 0,3,1 agar menang. */
.content-wrapper .card-body.p-0 table td,
.content-wrapper .card-body.p-0 table th {
  white-space: nowrap; overflow: visible; text-overflow: clip;
}
.content-wrapper .card-body.p-0 .table > thead > tr > th { position: sticky; top: 0; z-index: 2; }


/* ── 6c. Batang geser + petunjuk geser tabel daftar ────────────────────────
   Elemen ini dipasang OTOMATIS oleh assets/js/panel-tabel-geser.js hanya pada
   wadah tabel yang benar-benar lebih lebar dari ruangnya. Ada dua hal: kalimat
   petunjuk di atas tabel, dan batang geser kedua di atas tabel — sebab batang
   gulir asli di dasar area tabel bisa jatuh di bawah lipatan pada layar pendek. */
.content-wrapper .ui-petunjuk-geser { display: none; margin: 0 0 8px; font-size: 12.5px; color: #5a6b7c; }
.content-wrapper .ui-petunjuk-geser.tampil { display: block; }
.content-wrapper .ui-batang-geser {
  display: none; height: 14px; margin: 0 0 6px; border-radius: 8px;
  background: #eef2f7; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; scrollbar-color: #9db6d0 #eef2f7;
}
.content-wrapper .ui-batang-geser.tampil { display: block; }
.content-wrapper .ui-batang-geser-isi { height: 1px; }
.content-wrapper .ui-batang-geser::-webkit-scrollbar { height: 12px; }
.content-wrapper .ui-batang-geser::-webkit-scrollbar-track { background: #eef2f7; border-radius: 8px; }
.content-wrapper .ui-batang-geser::-webkit-scrollbar-thumb { background: #9db6d0; border-radius: 8px; border: 2px solid #eef2f7; }
.content-wrapper .ui-batang-geser::-webkit-scrollbar-thumb:hover { background: var(--cb-biru); }

/* ── 7. Tombol ──────────────────────────────────────────────────────────── */
.btn { border-radius: var(--cb-radius-kecil); font-family: var(--cb-font-judul); font-weight: 500; }
.btn-sm { padding: .32rem .7rem; font-size: 12.5px; }
.btn-xs { padding: .22rem .55rem; font-size: 12px; }
.btn-primary { background-color: var(--cb-biru-tombol); border-color: var(--cb-biru-tombol); }
.btn-primary:hover, .btn-primary:focus { background-color: #0060c4; border-color: #0060c4; }
.btn-outline-primary { color: var(--cb-biru-teks); border-color: #b9d9fb; }
.btn-outline-primary:hover { background: var(--cb-biru-lembut); color: var(--cb-biru-teks); border-color: #b9d9fb; }
.btn-default, .btn-light { border-color: var(--cb-garis); color: var(--cb-teks); }
.btn-group > .btn { border-radius: var(--cb-radius-kecil) !important; }
.btn-group > .btn + .btn { margin-left: 4px; }

/* ── 8. Lencana ─────────────────────────────────────────────────────────── */
.badge { border-radius: 6px; font-size: 11px; font-weight: 500; padding: 3px 7px; letter-spacing: .2px; }
.badge-primary { background-color: var(--cb-biru); color: #fff; }
.badge-warning { background-color: var(--cb-kuning); color: #5a4a09; }
.badge-secondary { background-color: #6b7b8c; }

/* ── 9. Isian formulir ──────────────────────────────────────────────────── */
/* Label isian: huruf besar kecil dengan jarak huruf sudah cukup sebagai penanda;
   bobot 700 membuat seluruh formulir tampak kaku (arahan pemilik 13 Okt 2026).
   Catatan spesifisitas: adminlte.css menulis
   `label:not(.form-check-label):not(.custom-file-label){font-weight:700}`
   dengan spesifisitas 0,2,1 — karena itu selektornya di sini diberi `.content-wrapper`
   supaya seri dan menang karena dimuat lebih akhir. */
.content-wrapper .form-group > label,
.content-wrapper .form-group label,
.content-wrapper .col-form-label {
  font-size: 12px; font-weight: 400; color: #5a6b7c;
  letter-spacing: .3px; text-transform: uppercase; margin-bottom: 6px;
}
/* Label di dalam formulir sebaris (mis. penyaring di Beranda) hanya bobotnya
   yang diturunkan — ukuran/warna/lainnya tidak disentuh supaya tampilan pil
   dan tata letaknya tidak berubah. */
.content-wrapper form label,
.content-wrapper .form-inline label { font-weight: 400; }
.form-control, .custom-select {
  border-radius: var(--cb-radius-kecil);
  border-color: #dfe6ee; font-size: 14px; min-height: 40px;
}
.form-control:focus, .custom-select:focus {
  border-color: var(--cb-biru); box-shadow: 0 0 0 .15rem rgba(0, 132, 251, .12);
}
.select2-container--default .select2-selection--single { height: 40px; border-radius: var(--cb-radius-kecil); border-color: #dfe6ee; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px; color: var(--cb-teks); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; }
.custom-control-label::before { border-color: #c8d2de; }

/* ── 10. Paginasi ───────────────────────────────────────────────────────── */
.pagination .page-link {
  border: 1px solid var(--cb-garis); color: var(--cb-biru-teks);
  border-radius: var(--cb-radius-kecil) !important; margin: 0 3px; font-size: 13px;
}
.pagination .page-item.active .page-link {
  background: var(--cb-biru-tombol); border-color: var(--cb-biru-tombol); color: #fff;
}
.pagination .page-item.disabled .page-link { color: #b7c0cc; }

/* ── 11. Petak statistik (gaya .statistic-item CityBook) ─────────────────── */
/* Warna petak TIDAK diseragamkan: hijau = terverifikasi, kuning = belum,
   teal = baru bulan ini. Itu makna, bukan hiasan. Nada dipilih yang LULUS AA
   untuk teks putih kecil (≥4,5:1) — warna bawaan AdminLTE (#28a745 = 3,17:1,
   #17a2b8) gagal. Kuning mustahil untuk teks putih → teks gelap. */
.small-box, .info-box {
  border-radius: var(--cb-radius);
  box-shadow: 0 2px 10px rgba(16, 42, 67, .06);
  border: 0;
  overflow: hidden;
}
.small-box { color: #fff; }
.small-box.bg-primary { background: linear-gradient(160deg, #0a7ce6, #0072E5) !important; }
.small-box.bg-success { background: linear-gradient(160deg, #1c8f4a, #15803D) !important; }
.small-box.bg-info    { background: linear-gradient(160deg, #14859f, #0E7490) !important; }
.small-box.bg-danger  { background: linear-gradient(160deg, #c62222, #B91C1C) !important; }
.small-box.bg-warning { background: linear-gradient(160deg, #fbcf49, #FACC39) !important; color: #5a4a09; }
.small-box .inner h3 { font-family: var(--cb-font-judul); font-weight: 600; font-size: 30px; margin: 0 0 2px; }
.small-box .inner p { font-size: 13px; opacity: .95; margin: 0; }
.small-box .icon { color: rgba(255, 255, 255, .26); }
.small-box.bg-warning .icon { color: rgba(90, 74, 9, .18); }
.info-box { background: #fff; }
.info-box .info-box-icon { border-radius: var(--cb-radius) 0 0 var(--cb-radius); background: var(--cb-biru-lembut) !important; color: var(--cb-biru) !important; }
.info-box .info-box-text { font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: #5a6b7c; }
.info-box .info-box-number { font-family: var(--cb-font-judul); font-size: 22px; color: var(--cb-gelap); }

/* Filter gaya lama: <table> tanpa kelas di dalam kartu (mis. views/user/userManagemen.php,
   views/master/karyawan/v_index_data.php). Labelnya dirapikan agar sebahasa dengan isian
   baru; garis antar baris dibuang supaya tidak tampak seperti daftar data. */
.card-body table:not(.table) { margin-bottom: 0; }
.card-body table:not(.table) > tbody > tr > td { border: 0; padding: 5px 8px; vertical-align: middle; }
.card-body table:not(.table) > tbody > tr > td:first-child {
  font-size: 12px; font-weight: 500; letter-spacing: .3px; text-transform: uppercase;
  color: #5a6b7c; white-space: nowrap;
}
.card-body table:not(.table) > tbody > tr > td:nth-child(2) { color: #c3cede; width: 12px; }

/* ── 12. Pita pemberitahuan (gaya .notification CityBook) ───────────────── */
.alert { border: 0; border-radius: var(--cb-radius-kecil); font-size: 13.5px; }
.alert-success { background: #e7f7ef; color: #14603c; }
.alert-info { background: var(--cb-biru-lembut); color: #0b4f8f; }
.alert-warning { background: #fdf4dd; color: #6b4e05; }
.alert-danger { background: #fdeaea; color: #8a1f1f; }

/* ── 13. Modal, tab, dan lain-lain ──────────────────────────────────────── */
.modal-content { border: 0; border-radius: var(--cb-radius); overflow: hidden; }
.modal-header { background: var(--cb-gelap); color: #fff; border-bottom: 0; }
.modal-header .close { color: #fff; opacity: .8; text-shadow: none; }
.nav-tabs .nav-link { font-family: var(--cb-font-judul); font-weight: 500; font-size: 13.5px; color: var(--cb-judul); border-radius: var(--cb-radius-kecil) var(--cb-radius-kecil) 0 0; }
.nav-tabs .nav-link.active { color: var(--cb-biru-teks); border-color: var(--cb-garis) var(--cb-garis) #fff; }
.dropdown-menu { border: 1px solid var(--cb-garis); border-radius: var(--cb-radius-kecil); box-shadow: 0 8px 24px rgba(16, 42, 67, .12); }
.dropdown-item { font-size: 13.5px; }
.dropdown-item:active { background: var(--cb-biru-lembut); color: var(--cb-biru-teks); }
.main-footer { background: #fff !important; border-top: 1px solid var(--cb-garis); color: var(--cb-sekunder); font-size: 12.5px; }

/* ── 14. Penyesuaian kecil layar sempit ─────────────────────────────────── */
@media (max-width: 767px) {
  .content-wrapper > .container-fluid { padding: 12px 12px 20px; }
  .content-wrapper .content-header { padding: 12px 12px 4px; }
  .content-wrapper .content-header h1 { font-size: 19px; }
  .card-body { padding: 14px; }
}

/* ── 15. Halaman login (views/login.php: adminlte dist + gaya sendiri di badan) ──
   Gaya `.login-page{background:rgba(214,214,214,1)}` ditulis di BADAN halaman
   sesudah berkas ini, jadi wajib `!important` untuk menimpanya. */
.login-page { background: linear-gradient(150deg, #2F3B59 0%, #14486f 55%, #0072E5 100%) !important; }
.login-box, .login-box .card, .login-card-body { border-radius: var(--cb-radius) !important; }
.login-box .card { border: 0; box-shadow: 0 20px 50px rgba(9, 26, 48, .35); }
.login-box .card-header { border-bottom: 0; background: transparent; }
.login-logo a { color: #fff; font-family: var(--cb-font-judul); font-weight: 600; }
.login-box .form-control { min-height: 42px; }
.login-box .btn { border-radius: var(--cb-radius-kecil); font-family: var(--cb-font-judul); }
.login-box .btn-primary { background: var(--cb-biru-tombol); border-color: var(--cb-biru-tombol); }
.login-box a { color: var(--cb-biru-teks); }
.login-box .invalid-feedback, .login-box .text-danger { color: #8a1f1f !important; }

/* ══ 16. TABEL DAFTAR (kebijakan BARU pemilik, 13 Okt 2026) ════════════════
   Aturan gelombang W2 sebelumnya (table-layout:fixed + lebar kolom persen +
   `text-overflow:ellipsis`) DIBATALKAN atas permintaan pemilik:
     "nama usahanya terpotong. Tidak boleh gitu, nama usaha harus terlihat
      semua. Lebih baik tambahkan slider bar sehingga user bisa geser ke kanan
      untuk melihat kolom yang lain, daripada memaksakan semua kolom tampil
      dalam satu halaman."
   Kebijakan sekarang:
     · kolom selebar isinya (table-layout:auto) — tidak ada patokan persen;
     · tidak ada pemotongan / ellipsis pada sel;
     · wadah `.card-body.p-0` menggulir mendatar dengan batang gulir terlihat
       + judul kolom ditempel (aturannya di bagian 6b di atas), sehingga kolom
       yang tidak muat tetap terjangkau;
     · hanya kolom centang/nomor yang dipatok sempit karena isinya pasti pendek.
   Catatan: aturan di sini sengaja memakai selektor lebih kuat (id/kelas halaman)
   daripada aturan `.table` biasa, karena adminlte.css memakai `.table td`
   (0,1,1) dan `.card-body.p-0 .table tbody > tr > td:last-of-type` (0,4,3). */
#tabel_verifikasi, .hal-pengguna .table, .hal-iklan .table,
.hal-pengelola .table, .hal-umkm-pilihan .table, #data_tabel,
.hal-mitra .table { table-layout: auto; width: 100%; }

#tabel_verifikasi .btn, .hal-pengguna .table .btn, .hal-iklan .table .btn,
.hal-pengelola .table .btn, .hal-umkm-pilihan .table .btn, #data_tabel .btn,
.hal-mitra .table .btn { padding: 3px 8px; border-radius: 7px; font-size: 12px; }

/* Kolom centang & nomor: selalu sempit (isi pasti pendek). */
#tabel_verifikasi > tbody > tr > td:nth-child(1),
.hal-pengguna .table > tbody > tr > td:nth-child(1),
.hal-pengguna .table > tbody > tr > td:nth-child(2),
.hal-iklan .table > tbody > tr > td:nth-child(1),
.hal-pengelola .table > tbody > tr > td:nth-child(1),
.hal-umkm-pilihan .table > tbody > tr > td:nth-child(1),
.hal-mitra .table > tbody > tr > td:nth-child(1),
#data_tabel > tbody > tr > td:nth-child(1) { width: 48px; }

/* ── 3b. Logo & foto profil: tidak boleh terpotong atau gepeng ─────────────
   Permintaan pemilik 15 Okt 2026. Di sidebar yang menyempit (jendela kecil /
   ponsel) terukur: logo kata "DataUMKM" (124,7px) keluar dari kotak 74px
   sehingga terpotong, dan foto profil 2,7rem tergencet karena flex
   menyusutkannya (rasio berubah). Aturan ini menjaga keduanya:
   - logo: dibatasi lebar kotaknya + object-fit:contain, jadi rasionya (3,7)
     tetap dan tidak pernah keluar batas -> mengecil utuh, bukan terpotong;
   - foto: ukuran dipatok 2,7rem, tidak boleh menyusut, object-fit:cover
     sehingga tetap bulat penuh tanpa gepeng dan tetap di tengah saat sempit. */
.main-sidebar .brand-link { padding: 0 12px; }
.main-sidebar .brand-link img.brand-image {
  float: none; margin: 0;
  max-width: 100%; max-height: 34px; width: auto; height: auto;
  object-fit: contain;
}
.main-sidebar .user-panel .image { flex: 0 0 auto; padding-left: 14px; }
.main-sidebar .user-panel .image img {
  width: 2.7rem !important;
  height: 2.7rem !important;
  flex: 0 0 auto;
  object-fit: cover;
}
body.sidebar-collapse .main-sidebar .brand-link { padding: 0 6px; }
body.sidebar-collapse .main-sidebar .brand-link img.brand-image { max-height: 22px; }
body.sidebar-collapse .main-sidebar .user-panel { justify-content: center; }
body.sidebar-collapse .main-sidebar .user-panel .image { padding-left: 0; }
/* Jangan sampai muncul batang gulir mendatar di menu samping. */
.main-sidebar .sidebar { overflow-x: hidden; }
/* Saat menyempit, batang gulir menu (terukur 15px) membuat foto profil tampak
   7,5px lebih ke kiri dari titik tengah. Di keadaan ini saja ruang gulir
   dicadangkan di KEDUA sisi supaya isi simetris; keadaan normal dibiarkan
   seperti semula agar kolom menu tidak bergeser. */
body.sidebar-collapse .main-sidebar .sidebar { scrollbar-gutter: stable both-edges; }

/* ── 3c. Hamburger diklik (sidebar menyempit 4,6rem) ───────────────────────
   Permintaan pemilik 15 Okt 2026:
   (1) AdminLTE menyusutkan kotak logo jadi 4,6rem = 73,6px, sedangkan logo
       kata 124,7px -> terpotong ("kejepit"). Karena itu logo TIDAK dipaksa
       masuk ke kotak sempit: logo disembunyikan di panel kiri dan
       ditampilkan di TENGAH bilah atas (navbar) panel kanan.
   (2) Foto profil harus utuh, bulat sempurna, di tengah, dan diberi jarak -
       AdminLTE memberi padding-left .8rem pada foto sehingga tampak terjepit
       ke tepi; padding dinolkan dan foto dipusatkan (object-fit:cover supaya
       tetap bulat walau berkas fotonya bukan persegi). */
body.sidebar-collapse .main-sidebar .brand-link img.brand-image { display: none !important; }
body.sidebar-collapse .main-sidebar .brand-link {
  background-color: transparent !important;
  border-bottom: 0 !important;
}
.ui-logo-atas { display: none; }
body.sidebar-collapse .ui-logo-atas {
  display: block;
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; z-index: 5;
  /* logo menempel polos di bilah: tanpa latar/bingkai/bayangan */
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 !important; border-radius: 0 !important; line-height: 0;
}
body.sidebar-collapse .ui-logo-atas img { display: block; height: 44px; width: auto; max-height: none;
  background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }

body.sidebar-collapse .main-sidebar .user-panel {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 12px 0 !important;
}
body.sidebar-collapse .main-sidebar .user-panel .info { display: none !important; }
body.sidebar-collapse .main-sidebar .user-panel .image { flex: 0 0 auto !important; padding: 0 !important; margin: 0 !important; }
body.sidebar-collapse .main-sidebar .user-panel .image img {
  width: 2.2rem !important; height: 2.2rem !important;
  min-width: 2.2rem; padding: 0 !important; margin: 0 !important;
  border-radius: 50% !important; object-fit: cover !important; display: block;
}

:root {
  /* Lebar kolom ikon saat hamburger diklik + jaraknya dari tepi kiri layar.
     Dipakai bersama oleh .main-sidebar dan offset .main-header/.content-wrapper
     supaya isi tidak pernah menimpa kolom ikon. */
  --cb-kolom-sempit: 4.6rem;
  --cb-jarak-tepi: 10px;
}

/* ── 3d. Hamburger diklik: kolom ikon tidak boleh tertimpa/terpotong ───────
   Permintaan pemilik 15 Okt 2026: ikon menu JANGAN hilang, kolom ikon diberi
   jarak dari tepi kiri layar, ikonnya diposisikan di tengah kolom.
   Sebelumnya lebar kolom bergantung aturan mini AdminLTE (4,6rem) sementara
   isi/bilah atas tidak ikut bergeser, sehingga ikon tertutup panel kanan.
   Di sini lebar kolom, jaraknya dari tepi, dan offset isi ditetapkan satu
   paket supaya tidak bisa saling tertinggal. */
body.sidebar-collapse .main-sidebar {
  width: 4.6rem !important;
  margin-left: 10px !important;
  overflow: visible;
}
body.sidebar-collapse .main-sidebar .sidebar { padding-left: 0 !important; padding-right: 0 !important; }
/* Nilai harfiah (bukan var()+calc) supaya pasti dihitung semua peramban:
   lebar kolom 4,6rem + jarak tepi 10px.
   Kekhususan sengaja dinaikkan (body + 3 kelas = 0,4,1) karena AdminLTE punya
   aturan `.sidebar-mini.sidebar-collapse .content-wrapper{margin-left:4.6rem}`
   (0,3,0) yang lebih kuat daripada selektor 2 kelas, sehingga isi kanan tetap
   menimpa kolom ikon walaupun sudah diberi !important. */
body.sidebar-mini.layout-fixed.sidebar-collapse .main-header,
body.sidebar-mini.layout-fixed.sidebar-collapse .content-wrapper,
body.sidebar-mini.layout-fixed.sidebar-collapse .main-footer {
  margin-left: calc(4.6rem + 10px) !important;
}
/* ikon di tengah kolom, teks disembunyikan - tidak bergantung aturan mini AdminLTE */
body.sidebar-collapse .main-sidebar .nav-sidebar > .nav-item { margin: 3px 6px !important; }
body.sidebar-collapse .main-sidebar .nav-sidebar > .nav-item > .nav-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 11px 0 !important;
  border-left: 0 !important;
}
body.sidebar-collapse .main-sidebar .nav-sidebar .nav-link p,
body.sidebar-collapse .main-sidebar .nav-header,
body.sidebar-collapse .main-sidebar .nav-sidebar .badge { display: none !important; }
body.sidebar-collapse .main-sidebar .nav-sidebar .nav-icon {
  width: auto !important; min-width: 0 !important; font-size: 15px !important; margin: 0 !important;
}

/* ── Halaman "Profil Saya" (2026-10-15) ────────────────────────────────────
   Foto profil bulat, seragam dengan foto di bilah samping (2,7rem / img-circle),
   tetapi lebih besar karena di sini objek utamanya. */
.hal-profil .ui-profil-foto {
  width: 140px; height: 140px; border-radius: 50%; object-fit: cover;
  border: 3px solid #E6EDF3; background: #fff; display: block; margin: 0 auto 12px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .12);
}
.hal-profil .ui-profil-status { margin: 0 0 16px; }
.hal-profil .ui-profil-unggah { text-align: left; }
.hal-profil .ui-profil-hapus { margin-top: 10px; }
.hal-profil .ui-profil-label { display: block; font-weight: 600; margin-bottom: 4px; }
.hal-profil .card-body .form-control[readonly] { background: #f7f9fc; color: #5A6B80; }

/* Keterangan kecil di dalam label tidak perlu huruf besar semua (kulit panel
   menaikkan label ke uppercase; <small> di dalamnya cukup normal). */
.hal-profil label small { text-transform: none; letter-spacing: normal; }

/* ── Kartu "Wilayah aktif & perlu perhatian" (15 Okt 2026) ────────────────
   Daftar peringkat wilayah: nama, angka terverifikasi/total, dan batang
   persentase. Warna mengikuti makna (hijau = terverifikasi, kuning = belum). */
.ui-pk-judul { font-size: .95rem; font-weight: 600; letter-spacing: .02em; margin: 0 0 8px; }
.ui-pk-baris { margin-bottom: 10px; }
.ui-pk-nama { font-size: .88rem; color: #0F172A; line-height: 1.3; }
.ui-pk-angka { font-size: .8rem; color: #5A6B80; display: flex; align-items: center; gap: 6px; margin: 2px 0 4px; }
.ui-pk-angka .badge { font-size: .72rem; }
.ui-pk-bar { height: 8px; border-radius: 999px; background: #E6EDF3; overflow: hidden; }
.ui-pk-bar > span { display: block; height: 100%; border-radius: 999px; min-width: 2px; }

/* ══════════════════════════════════════════════════════════════════════════════
   Gaya "WordPress Classic" — 15 Okt 2026, permintaan pemilik.
   1) Menu samping: latar gelap-hitam khas WP, teks menu kecil & rapat.
   2) Halaman penyunting: kolom tengah (area menulis) paling dominan,
      kolom kanan 292 px (informasi pelengkap saja).
   3) Bilah alat TinyMCE: dua baris terisi penuh kiri->kanan, ikon kompak.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. MENU SAMPING (gelap-hitam, rapat) ─────────────────────────────────── */
.main-sidebar { background-color: #1e1e1e !important; }
.main-sidebar .brand-link { border-bottom: 1px solid #2c3338 !important; }
.main-sidebar .nav-sidebar > .nav-item { margin: 0 !important; }
.main-sidebar .nav-sidebar > .nav-item > .nav-link {
  border-radius: 0 !important;
  padding: 6px 12px !important;            /* rapat: dulu 10px 12px */
  font-size: 12.5px !important;            /* kecil: dulu 13.5px */
  line-height: 1.35 !important;
  color: #c3c4c7 !important;
  border-left: 4px solid transparent !important;
}
.main-sidebar .nav-sidebar > .nav-item > .nav-link:hover,
.main-sidebar .nav-sidebar > .nav-item > .nav-link:focus {
  background: #2c3338 !important;
  color: #72aee6 !important;
}
.main-sidebar .nav-sidebar > .nav-item > .nav-link.active {
  background: #2271b1 !important;          /* biru WP untuk menu terpilih */
  color: #fff !important;
  border-left-color: #72aee6 !important;
}
.main-sidebar .nav-sidebar .nav-icon { font-size: 14px !important; width: 20px !important; }
.main-sidebar .nav-header {
  font-size: 10.5px !important; margin: 8px 12px 2px !important; letter-spacing: .04em;
}
/* anak menu (nav-treeview) */
.main-sidebar ul.nav li.nav-item ul.nav-treeview .nav-link,
.main-sidebar ul.nav li.nav-item ul.nav-treeview ul.nav-treeview .nav-link {
  color: #c3c4c7 !important;
  background: #2c3338 !important;
  font-size: 12px !important;
  padding: 5px 12px !important;
  border-radius: 0 !important;
}
.main-sidebar ul.nav li.nav-item ul.nav-treeview .nav-link:hover,
.main-sidebar ul.nav li.nav-item ul.nav-treeview ul.nav-treeview .nav-link:hover {
  color: #72aee6 !important; background: #2c3338 !important;
}
.main-sidebar ul.nav li.nav-item ul.nav-treeview .nav-link.active,
.main-sidebar ul.nav li.nav-item ul.nav-treeview ul.nav-treeview .nav-link.active {
  color: #fff !important; background: #2271b1 !important; font-weight: 600 !important;
}

/* Kepala halaman dirapatkan (tanpa remah roti) -> ruang menulis lebih lega */
.content-header-rapat { padding: 4px 0 0 !important; }
.content-header-rapat h1 { font-size: 20px !important; margin: 0 !important; }
.content-header-rapat .breadcrumb { display: none !important; }
.content-header-rapat hr { margin: 6px 0 0 !important; }