/* ==========================================================================
   Mitrabangun ERP — fondasi UI
   --------------------------------------------------------------------------
   Satu berkas, tanpa build step, tanpa CDN, tanpa framework baru.
   Dipakai berdampingan dengan AdminLTE lama: halaman yang belum diredesain
   tetap memakai layouts/admin.php dan tidak tersentuh berkas ini.

   Warna merek diambil dari Info Umum (tabel `infoumum`), bukan ditebak:
     warna_1 #259FD9  biru cerah  -> aksi & aksen
     warna_2 #02335C  navy gelap  -> teks & sidebar
     warna_3 #ffffff  putih
   Cocok dengan logo `logomitrabangun-removebg-preview.png`.

   Untuk mengganti identitas warna, cukup ubah --mb-brand dan --mb-ink
   di blok :root — seluruh komponen ikut menyesuaikan.
   ========================================================================== */

:root {
  /* ── warna merek */
  --mb-brand:        #259FD9;
  --mb-brand-gelap:  #1b83b5;
  --mb-brand-muda:   #e8f5fc;
  --mb-ink:          #02335C;
  --mb-ink-muda:     #0a4a7f;

  /* ── netral */
  --mb-putih:   #ffffff;
  --mb-latar:   #f5f7fa;
  --mb-garis:   #e3e8ef;
  --mb-garis-2: #cbd5e1;
  --mb-teks:    #1f2937;
  --mb-teks-2:  #64748b;
  --mb-teks-3:  #94a3b8;

  /* ── status */
  --mb-sukses:      #16a34a;
  --mb-sukses-muda: #dcfce7;
  --mb-ingat:       #d97706;
  --mb-ingat-muda:  #fef3c7;
  --mb-bahaya:      #dc2626;
  --mb-bahaya-muda: #fee2e2;
  --mb-info:        var(--mb-brand);
  --mb-info-muda:   var(--mb-brand-muda);

  /* ── tipografi: font sistem, tanpa unduhan */
  --mb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mb-ts-xs: 11px;
  --mb-ts-sm: 12px;
  --mb-ts:    14px;
  --mb-ts-lg: 16px;
  --mb-ts-xl: 20px;

  /* ── jarak */
  --mb-j1: 4px;
  --mb-j2: 8px;
  --mb-j3: 12px;
  --mb-j4: 16px;
  --mb-j5: 24px;
  --mb-j6: 32px;

  /* ── sudut & bayangan */
  --mb-r:   8px;
  --mb-r-s: 6px;
  --mb-r-p: 999px;
  --mb-bayang:   0 1px 2px rgba(2, 51, 92, .06), 0 1px 3px rgba(2, 51, 92, .08);
  --mb-bayang-2: 0 4px 12px rgba(2, 51, 92, .10);

  --mb-sidebar: 230px;
  --mb-topbar:  56px;
}

/* ========================================================== dasar */
.mb * { box-sizing: border-box; }

.mb {
  font-family: var(--mb-font);
  font-size: var(--mb-ts);
  color: var(--mb-teks);
  background: var(--mb-latar);
  margin: 0;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

.mb a { color: var(--mb-brand-gelap); text-decoration: none; }
.mb a:hover { text-decoration: underline; }

/* ========================================================== kerangka */
.mb-wrap { min-height: 100vh; }

.mb-topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--mb-topbar);
  background: var(--mb-ink); color: #fff; display: flex; align-items: center;
  gap: var(--mb-j3); padding: 0 var(--mb-j4); z-index: 40;
}
.mb-topbar .mb-logo { display: flex; align-items: center; gap: var(--mb-j2); font-weight: 600; }
.mb-topbar .mb-logo img { height: 26px; display: block; }
.mb-topbar .mb-kanan { margin-left: auto; display: flex; align-items: center; gap: var(--mb-j3); }
.mb-topbar a { color: #fff; }

.mb-burger {
  display: none; background: none; border: 0; color: #fff;
  font-size: 20px; cursor: pointer; padding: 4px 8px;
}

.mb-sisi {
  position: fixed; top: var(--mb-topbar); bottom: 0; left: 0; width: var(--mb-sidebar);
  background: var(--mb-ink); overflow-y: auto; z-index: 30; padding-bottom: var(--mb-j6);
}
.mb-isi {
  margin-left: var(--mb-sidebar); padding: var(--mb-j5);
  padding-top: calc(var(--mb-topbar) + var(--mb-j5));
}

/* sidebar memakai markup MenuService (ul.sidebar-menu) — digayakan ulang */
.mb-sisi .sidebar-menu { list-style: none; margin: 0; padding: var(--mb-j2) 0; }
.mb-sisi .sidebar-menu li { list-style: none; }
.mb-sisi .sidebar-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px var(--mb-j4); color: #b9d4e6; font-size: 13px; text-decoration: none;
}
.mb-sisi .sidebar-menu a:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.mb-sisi .sidebar-menu li.active > a { background: var(--mb-brand); color: #fff; font-weight: 500; }
.mb-sisi .sidebar-menu li.header {
  padding: var(--mb-j4) var(--mb-j4) var(--mb-j1);
  color: #5f8fb0; font-size: var(--mb-ts-xs); text-transform: uppercase; letter-spacing: .08em;
}
.mb-sisi .sidebar-menu .treeview-menu { padding-left: var(--mb-j4); }
.mb-sisi .sidebar-menu .treeview-menu a { font-size: 12.5px; padding-top: 7px; padding-bottom: 7px; }
.mb-sisi .sidebar-menu li.mig-pending > a { opacity: .45; cursor: not-allowed; }
.mb-sisi .sidebar-menu .pull-right-container { margin-left: auto; display: inline-flex; align-items: center; }
.mb-sisi .sidebar-menu .label { font-size: 10px; padding: 1px 6px; border-radius: var(--mb-r-p); }

/* Ikon menu: lebar tetap supaya labelnya sejajar. */
.mb-sisi .sidebar-menu > li > a > i:first-child { width: 18px; text-align: center; flex: 0 0 18px; }
.mb-sisi .sidebar-menu .treeview-menu > li > a > i:first-child { width: 14px; flex: 0 0 14px; font-size: 7px; }

/* Panah buka/tutup. Bootstrap `pull-right` tidak ada di sini, jadi
   penempatannya diatur sendiri; arahnya ikut berputar saat submenu terbuka. */
.mb-sisi .sidebar-menu .fa-angle-left { transition: transform .15s ease; font-size: 13px; }
.mb-sisi .sidebar-menu li.mb-terbuka > a .fa-angle-left { transform: rotate(-90deg); }

/* Submenu tertutup secara bawaan; dibuka lewat kelas, bukan gaya sebaris. */
.mb-sisi .sidebar-menu .treeview-menu { display: none; }
.mb-sisi .sidebar-menu li.mb-terbuka > .treeview-menu { display: block; }
.mb-sisi .sidebar-menu .treeview-menu li.active > a { background: rgba(37, 159, 217, .22); color: #fff; }

/* ========================================================== judul halaman */
.mb-judul { margin: 0 0 var(--mb-j4); }
.mb-judul h1 { margin: 0; font-size: var(--mb-ts-xl); font-weight: 600; color: var(--mb-ink); }
.mb-judul p  { margin: 2px 0 0; color: var(--mb-teks-2); font-size: var(--mb-ts-sm); }

/* ========================================================== kartu */
.mb-kartu {
  background: var(--mb-putih); border: 1px solid var(--mb-garis);
  border-radius: var(--mb-r); box-shadow: var(--mb-bayang); margin-bottom: var(--mb-j4);
}
.mb-kartu-kepala {
  padding: var(--mb-j3) var(--mb-j4); border-bottom: 1px solid var(--mb-garis);
  display: flex; align-items: center; gap: var(--mb-j2); flex-wrap: wrap;
}
.mb-kartu-kepala h2 { margin: 0; font-size: var(--mb-ts-lg); font-weight: 600; color: var(--mb-ink); }
.mb-kartu-kepala .mb-kanan { margin-left: auto; display: flex; gap: var(--mb-j2); }
.mb-kartu-isi  { padding: var(--mb-j4); }
.mb-kartu-kaki { padding: var(--mb-j3) var(--mb-j4); border-top: 1px solid var(--mb-garis); background: #fbfcfe; }

/* ========================================================== tombol */
.mb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--mb-r-s); border: 1px solid var(--mb-garis-2);
  background: var(--mb-putih); color: var(--mb-teks); font-size: var(--mb-ts);
  font-family: inherit; font-weight: 500; cursor: pointer; text-decoration: none;
  line-height: 1.2; min-height: 38px;
}
.mb-btn:hover { background: #f8fafc; text-decoration: none; color: var(--mb-teks); }
.mb-btn:focus-visible { outline: 2px solid var(--mb-brand); outline-offset: 1px; }
.mb-btn[disabled] { opacity: .55; cursor: not-allowed; }

.mb-btn-utama { background: var(--mb-brand); border-color: var(--mb-brand); color: #fff; }
.mb-btn-utama:hover { background: var(--mb-brand-gelap); border-color: var(--mb-brand-gelap); color: #fff; }
.mb-btn-bahaya { background: var(--mb-bahaya); border-color: var(--mb-bahaya); color: #fff; }
.mb-btn-bahaya:hover { background: #b91c1c; color: #fff; }
.mb-btn-wa { background: #25d366; border-color: #25d366; color: #fff; }
.mb-btn-wa:hover { background: #1da851; color: #fff; }
.mb-btn-kecil { padding: 5px 10px; font-size: var(--mb-ts-sm); min-height: 30px; }

/* ========================================================== badge */
.mb-badge {
  display: inline-block; padding: 2px 9px; border-radius: var(--mb-r-p);
  font-size: var(--mb-ts-xs); font-weight: 600; line-height: 1.6; white-space: nowrap;
}
.mb-badge-netral { background: #eef2f7; color: var(--mb-teks-2); }
.mb-badge-info   { background: var(--mb-info-muda);   color: var(--mb-brand-gelap); }
.mb-badge-sukses { background: var(--mb-sukses-muda); color: #15803d; }
.mb-badge-ingat  { background: var(--mb-ingat-muda);  color: #b45309; }
.mb-badge-bahaya { background: var(--mb-bahaya-muda); color: #b91c1c; }

/* ========================================================== form */
.mb-baris { display: flex; flex-wrap: wrap; gap: 0 var(--mb-j4); }
.mb-kol   { flex: 1 1 100%; min-width: 0; }
@media (min-width: 700px) {
  .mb-kol-2 { flex: 1 1 calc(50% - var(--mb-j4)); }
  .mb-kol-3 { flex: 1 1 calc(33.333% - var(--mb-j4)); }
  .mb-kol-4 { flex: 1 1 calc(25% - var(--mb-j4)); }
}

.mb-grup { margin-bottom: var(--mb-j4); }
.mb-label {
  display: block; font-size: var(--mb-ts-sm); font-weight: 600;
  color: var(--mb-teks); margin-bottom: 5px;
}
.mb-label .mb-wajib { color: var(--mb-bahaya); }
.mb-bantu { display: block; font-size: var(--mb-ts-xs); color: var(--mb-teks-3); margin-top: 4px; }

.mb-input, .mb-select, .mb-textarea {
  width: 100%; padding: 9px 11px; font-size: var(--mb-ts); font-family: inherit;
  color: var(--mb-teks); background: var(--mb-putih);
  border: 1px solid var(--mb-garis-2); border-radius: var(--mb-r-s);
  min-height: 40px; /* target sentuh nyaman di HP */
}
.mb-textarea { min-height: 84px; resize: vertical; }
.mb-input:focus, .mb-select:focus, .mb-textarea:focus {
  outline: none; border-color: var(--mb-brand); box-shadow: 0 0 0 3px rgba(37, 159, 217, .15);
}
.mb-input[readonly], .mb-input[disabled] { background: #f1f5f9; color: var(--mb-teks-2); }
.mb-salah { border-color: var(--mb-bahaya) !important; }
.mb-pesan-salah { display: block; font-size: var(--mb-ts-xs); color: var(--mb-bahaya); margin-top: 4px; }

/* seksi terlipat untuk field yang jarang diisi */
.mb-lipat { border: 1px solid var(--mb-garis); border-radius: var(--mb-r); margin-bottom: var(--mb-j4); }
.mb-lipat > summary {
  padding: var(--mb-j3) var(--mb-j4); cursor: pointer; font-weight: 600;
  font-size: var(--mb-ts); color: var(--mb-ink); list-style: none; display: flex; align-items: center; gap: 8px;
}
.mb-lipat > summary::-webkit-details-marker { display: none; }
.mb-lipat > summary::before { content: "▸"; color: var(--mb-teks-3); }
.mb-lipat[open] > summary::before { content: "▾"; }
.mb-lipat > summary:hover { background: #fbfcfe; }
.mb-lipat-isi { padding: 0 var(--mb-j4) var(--mb-j3); border-top: 1px solid var(--mb-garis); padding-top: var(--mb-j4); }

/* ========================================================== bilah saring */
.mb-saring {
  display: flex; flex-wrap: wrap; gap: var(--mb-j2); align-items: flex-end;
  padding: var(--mb-j3) var(--mb-j4); background: var(--mb-putih);
  border: 1px solid var(--mb-garis); border-radius: var(--mb-r); margin-bottom: var(--mb-j4);
}
.mb-saring .mb-cari { flex: 1 1 260px; }
.mb-saring .mb-grup { margin-bottom: 0; flex: 0 1 170px; }
.mb-cari-kotak { position: relative; }
.mb-cari-kotak .mb-input { padding-left: 34px; }
.mb-cari-kotak i { position: absolute; left: 12px; top: 12px; color: var(--mb-teks-3); }

/* ========================================================== tabel */
.mb-tabel-bungkus {
  background: var(--mb-putih); border: 1px solid var(--mb-garis);
  border-radius: var(--mb-r); overflow: hidden; box-shadow: var(--mb-bayang);
}
.mb-tabel-gulir { overflow-x: auto; }
.mb-tabel { width: 100%; border-collapse: collapse; font-size: var(--mb-ts); }
.mb-tabel th {
  text-align: left; padding: 10px var(--mb-j3); background: #f8fafc;
  border-bottom: 1px solid var(--mb-garis); font-size: var(--mb-ts-sm);
  font-weight: 600; color: var(--mb-teks-2); white-space: nowrap;
}
.mb-tabel td { padding: 11px var(--mb-j3); border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.mb-tabel tbody tr:hover { background: #fbfdff; }
.mb-tabel tbody tr:last-child td { border-bottom: 0; }
.mb-tabel .mb-aksi { white-space: nowrap; text-align: right; }
.mb-utama-sel { font-weight: 600; color: var(--mb-ink); }
.mb-sub { display: block; font-size: var(--mb-ts-sm); color: var(--mb-teks-2); }

/* ========================================================== kosong */
.mb-kosong { text-align: center; padding: var(--mb-j6) var(--mb-j4); color: var(--mb-teks-2); }
.mb-kosong i { font-size: 34px; color: var(--mb-garis-2); display: block; margin-bottom: var(--mb-j3); }
.mb-kosong h3 { margin: 0 0 var(--mb-j1); font-size: var(--mb-ts-lg); color: var(--mb-teks); }
.mb-kosong p { margin: 0 0 var(--mb-j4); font-size: var(--mb-ts-sm); }

/* ========================================================== paginasi */
.mb-paging { display: flex; align-items: center; gap: var(--mb-j2); flex-wrap: wrap; }
.mb-paging .pagination { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.mb-paging .pagination li a, .mb-paging .pagination li span {
  display: block; padding: 6px 11px; border: 1px solid var(--mb-garis-2);
  border-radius: var(--mb-r-s); font-size: var(--mb-ts-sm); color: var(--mb-teks); text-decoration: none;
}
.mb-paging .pagination li.active a, .mb-paging .pagination li.active span {
  background: var(--mb-brand); border-color: var(--mb-brand); color: #fff;
}
.mb-paging .pagination li.disabled span { color: var(--mb-teks-3); background: #f8fafc; }

/* ========================================================== notifikasi */
.mb-notif {
  padding: var(--mb-j3) var(--mb-j4); border-radius: var(--mb-r);
  margin-bottom: var(--mb-j4); font-size: var(--mb-ts); border: 1px solid;
}
.mb-notif-sukses { background: var(--mb-sukses-muda); border-color: #bbf7d0; color: #166534; }
.mb-notif-bahaya { background: var(--mb-bahaya-muda); border-color: #fecaca; color: #991b1b; }
.mb-notif-info   { background: var(--mb-info-muda);   border-color: #bae6fd; color: #075985; }
.mb-notif ul { margin: 6px 0 0; padding-left: 18px; }

/* ========================================================== timeline */
.mb-lini { position: relative; padding-left: 26px; }
.mb-lini::before { content: ""; position: absolute; left: 7px; top: 4px; bottom: 4px; width: 2px; background: var(--mb-garis); }
.mb-lini-item { position: relative; padding-bottom: var(--mb-j4); }
.mb-lini-item::before {
  content: ""; position: absolute; left: -23px; top: 5px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--mb-brand); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--mb-brand-muda);
}
.mb-lini-waktu { font-size: var(--mb-ts-sm); color: var(--mb-teks-2); }
.mb-lini-isi { background: var(--mb-putih); border: 1px solid var(--mb-garis); border-radius: var(--mb-r-s); padding: var(--mb-j3); margin-top: 4px; }

/* ========================================================== utilitas */
.mb-diam   { color: var(--mb-teks-2); }
.mb-kecil  { font-size: var(--mb-ts-sm); }
.mb-kanan-t { text-align: right; }
.mb-nowrap { white-space: nowrap; }
.mb-hanya-hp { display: none; }
.mb-jarak-atas { margin-top: var(--mb-j4); }

/* ========================================================== HP */
@media (max-width: 900px) {
  .mb-burger { display: block; }
  .mb-sisi { transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--mb-bayang-2); }
  .mb-sisi.mb-buka { transform: translateX(0); }
  .mb-isi { margin-left: 0; padding: var(--mb-j3); padding-top: calc(var(--mb-topbar) + var(--mb-j3)); }
  .mb-tirai { position: fixed; inset: var(--mb-topbar) 0 0; background: rgba(2, 51, 92, .4); z-index: 25; }
  .mb-hanya-hp { display: block; }

  /* baris tabel berubah jadi kartu */
  .mb-tabel-kartu thead { display: none; }
  .mb-tabel-kartu, .mb-tabel-kartu tbody, .mb-tabel-kartu tr, .mb-tabel-kartu td { display: block; width: 100%; }
  .mb-tabel-kartu tr {
    border: 1px solid var(--mb-garis); border-radius: var(--mb-r);
    margin-bottom: var(--mb-j2); padding: var(--mb-j3); background: var(--mb-putih);
  }
  .mb-tabel-kartu td { border: 0; padding: 3px 0; }
  .mb-tabel-kartu td[data-label]::before {
    content: attr(data-label) " ";
    font-size: var(--mb-ts-xs); color: var(--mb-teks-3); display: inline-block; min-width: 74px;
  }
  .mb-tabel-kartu td.mb-aksi { text-align: left; padding-top: var(--mb-j2); }
  .mb-tabel-kartu td.mb-aksi::before { content: ""; min-width: 0; }
  .mb-saring .mb-grup { flex: 1 1 100%; }
}

/* ========================================================== kanban
   Dipakai halaman Pipeline. Ditaruh di sini, bukan sebagai <style> di
   dalam view, supaya seluruh nilainya ikut token yang sama. */
.mb-papan {
  display: flex; gap: var(--mb-j3); overflow-x: auto;
  padding-bottom: var(--mb-j3); -webkit-overflow-scrolling: touch;
}
.mb-papan::-webkit-scrollbar { height: 8px; }
.mb-papan::-webkit-scrollbar-thumb { background: var(--mb-garis-2); border-radius: var(--mb-r-p); }

.mb-lajur {
  flex: 0 0 262px; display: flex; flex-direction: column; max-height: 68vh;
  background: var(--mb-putih); border: 1px solid var(--mb-garis);
  border-radius: var(--mb-r); box-shadow: var(--mb-bayang);
}
.mb-lajur-kepala {
  position: sticky; top: 0; z-index: 1; background: var(--mb-putih);
  padding: var(--mb-j3) var(--mb-j3) var(--mb-j2);
  border-bottom: 1px solid var(--mb-garis); border-radius: var(--mb-r) var(--mb-r) 0 0;
  display: flex; align-items: center; gap: var(--mb-j2);
}
.mb-lajur-kepala h3 {
  margin: 0; font-size: var(--mb-ts); font-weight: 600; color: var(--mb-ink);
}
.mb-lajur-jml {
  margin-left: auto; background: var(--mb-brand-muda); color: var(--mb-brand-gelap);
  border-radius: var(--mb-r-p); padding: 1px 9px; font-size: var(--mb-ts-xs); font-weight: 600;
}
/* garis tipis penanda tahap di puncak lajur */
.mb-lajur-pita { height: 3px; border-radius: var(--mb-r) var(--mb-r) 0 0; }
.mb-lajur-isi { overflow-y: auto; padding: var(--mb-j2); flex: 1; }

.mb-kkartu {
  display: block; background: var(--mb-putih); border: 1px solid var(--mb-garis);
  border-left: 3px solid var(--mb-brand); border-radius: var(--mb-r-s);
  padding: var(--mb-j2) 10px; margin-bottom: var(--mb-j2);
  color: var(--mb-teks); text-decoration: none;
}
.mb-kkartu:hover {
  text-decoration: none; color: var(--mb-teks);
  border-color: var(--mb-brand); box-shadow: var(--mb-bayang);
}
.mb-kkartu.mb-kstop { border-left-color: var(--mb-bahaya); }
.mb-kkartu-nama { font-weight: 600; font-size: 13px; line-height: 1.35; margin-bottom: 4px; color: var(--mb-ink); }
.mb-kkartu-meta { font-size: var(--mb-ts-xs); color: var(--mb-teks-2); line-height: 1.7; }
.mb-kkartu-meta span { display: block; }
.mb-kkartu-meta i { width: 12px; text-align: center; color: var(--mb-teks-3); }
.mb-kkartu-kaki { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }

.mb-umur { display: inline-block; padding: 1px 7px; border-radius: var(--mb-r-p); font-size: var(--mb-ts-xs); font-weight: 600; }
.mb-umur-baik  { background: var(--mb-sukses-muda); color: #15803d; }
.mb-umur-lama  { background: var(--mb-ingat-muda);  color: #b45309; }
.mb-umur-macet { background: var(--mb-bahaya-muda); color: #b91c1c; }

.mb-lajur-kosong { text-align: center; padding: var(--mb-j5) var(--mb-j2); color: var(--mb-teks-3); font-size: var(--mb-ts-sm); }
.mb-lajur-lagi { width: 100%; margin-top: var(--mb-j1); }

@media (max-width: 900px) {
  .mb-lajur { flex-basis: 84vw; max-height: 72vh; }
}

/* ========================================================== leads picker
   Widget pemilih konsumen, menggantikan <select> ribuan option. */
.mb-picker { position: relative; }
.mb-picker-terpilih {
  display: flex; align-items: center; gap: var(--mb-j2); flex-wrap: wrap;
  padding: 10px var(--mb-j3); border: 1px solid var(--mb-brand);
  background: var(--mb-brand-muda); border-radius: var(--mb-r-s);
}
.mb-picker-nama { font-weight: 600; color: var(--mb-ink); font-size: var(--mb-ts); }
.mb-picker-info { font-size: var(--mb-ts-sm); color: var(--mb-teks-2); flex: 1 1 100%; }
.mb-picker-terpilih .mb-btn { margin-left: auto; }

.mb-picker-daftar {
  margin-top: var(--mb-j1); border: 1px solid var(--mb-garis); border-radius: var(--mb-r-s);
  max-height: 300px; overflow-y: auto; background: var(--mb-putih);
}
.mb-picker-daftar:empty { display: none; border: 0; }

.mb-picker-item {
  display: block; width: 100%; text-align: left; background: none;
  border: 0; border-bottom: 1px solid #f1f5f9; padding: 9px var(--mb-j3);
  cursor: pointer; font-family: inherit; min-height: 44px;
}
.mb-picker-item:last-child { border-bottom: 0; }
.mb-picker-item:hover, .mb-picker-item.mb-sorot { background: var(--mb-brand-muda); }
.mb-picker-item-nama {
  font-weight: 600; font-size: 13px; color: var(--mb-ink);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.mb-picker-item-sub { font-size: var(--mb-ts-xs); color: var(--mb-teks-2); margin-top: 2px; }
.mb-picker-kosong { padding: var(--mb-j3); font-size: var(--mb-ts-sm); color: var(--mb-teks-2); text-align: center; }
.mb-picker-kaki { margin-top: 6px; font-size: var(--mb-ts-xs); }
.mb-picker-kaki a { color: var(--mb-brand-gelap); }

/* Tombol aksi tahap berikutnya pada kartu pipeline & daftar customer. */
.mb-aksi-tahap { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.mb-aksi-tahap .mb-btn { padding: 3px 8px; font-size: var(--mb-ts-xs); min-height: 26px; }

/* Menu aksi tahap pada daftar konsumen — murni CSS, tanpa JS. */
.mb-menu-aksi { position: relative; display: inline-block; }
.mb-menu-aksi > summary { list-style: none; cursor: pointer; }
.mb-menu-aksi > summary::-webkit-details-marker { display: none; }
.mb-menu-isi {
  position: absolute; right: 0; z-index: 30; min-width: 170px; padding: 4px;
  background: var(--mb-putih); border: 1px solid var(--mb-garis);
  border-radius: var(--mb-r); box-shadow: var(--mb-bayang-2);
}
.mb-menu-isi a {
  display: block; padding: 7px 10px; border-radius: 6px;
  font-size: var(--mb-ts-xs); color: var(--mb-teks); text-decoration: none;
}
.mb-menu-isi a:hover { background: var(--mb-latar); }


/* -- Pencarian konsumen global (topbar) -------------------------------
   Namanya mb-omni, bukan mb-cari: mb-cari sudah dipakai kotak pencarian
   di bilah penyaring daftar, dan dua hal berbeda tidak boleh berbagi nama. */
.mb-omni { position:relative; flex:0 1 520px; margin-left:18px }
.mb-omni-kaca { position:absolute; left:11px; top:50%; transform:translateY(-50%);
                color:#94a3b8; font-size:13px; pointer-events:none }
.mb-omni-input { width:100%; height:36px; padding:0 12px 0 32px; font-size:13px;
                 border:1px solid rgba(255,255,255,.25); border-radius:8px;
                 background:rgba(255,255,255,.12); color:#fff }
.mb-omni-input::placeholder { color:rgba(255,255,255,.6) }
.mb-omni-input:focus { outline:0; background:#fff; color:#1f2937; border-color:#259FD9 }
.mb-omni-hasil { position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:1200;
                 background:#fff; border:1px solid #e3e8ef; border-radius:10px;
                 box-shadow:0 8px 24px rgba(2,51,92,.15); overflow:hidden; max-height:60vh;
                 overflow-y:auto }
.mb-omni-baris { display:block; width:100%; text-align:left; border:0; background:none;
                 padding:9px 12px; cursor:pointer; border-bottom:1px solid #f1f5f9 }
.mb-omni-baris.sorot { background:#f0f9ff }
.mb-omni-nama { display:block; font-size:13px; font-weight:600; color:#02335C }
.mb-omni-info { display:block; font-size:11px; color:#64748b; margin-top:1px }
.mb-omni-kosong { padding:12px; font-size:13px; color:#64748b }
.mb-omni-kaki { display:flex; justify-content:space-between; gap:10px; padding:7px 12px;
                font-size:11px; color:#64748b; background:#f8fafc }
.mb-omni-ikon { display:none; background:none; border:0; color:#fff; font-size:16px;
                padding:6px 10px; margin-left:auto; cursor:pointer }

@media (max-width: 780px) {
  /* Topbar sempit: kotaknya disembunyikan sampai ikonnya ditekan, lalu
     menutupi lebar topbar supaya nyaman di 390px. */
  .mb-omni-ikon { display:block }
  .mb-omni { display:none; position:absolute; left:8px; right:8px; top:8px;
             margin:0; flex:none; z-index:1300 }
  .mb-omni.terbuka { display:block }
  .mb-omni-input { background:#fff; color:#1f2937; border-color:#cbd5e1 }
}


/* -- Tautan ke halaman konsumen dari LeadsPicker ----------------------- */
.mb-picker-baris { display:flex; align-items:stretch; gap:4px }
.mb-picker-baris > .mb-picker-item { flex:1 1 auto; min-width:0 }
.mb-picker-360 { display:flex; align-items:center; justify-content:center; flex:0 0 34px;
                 color:#64748b; border:1px solid #e3e8ef; border-radius:6px;
                 background:#fff; text-decoration:none }
.mb-picker-360:hover { color:#02335C; border-color:#259FD9; background:#f0f9ff }
.mb-picker-360-slot { margin-left:auto }


/* -- Perjalanan konsumen: fase bertingkat ------------------------------
   Label fase di kiri, kartu langkah mengalir di kanan. Di layar sempit
   label naik ke atas dan kartunya menumpuk. */
.k360-fase { display:grid; grid-template-columns:170px 1fr; gap:16px;
             padding:14px 0; border-bottom:1px solid #f1f5f9 }
.k360-fase:last-of-type { border-bottom:0 }
.k360-fase-judul { font-size:12px; letter-spacing:.03em }
.k360-fase-judul strong { display:block; color:#334155; margin:6px 0 2px }
.k360-fase-garis { display:block; width:34px; height:3px; border-radius:2px }
.k360-langkah-wadah { display:flex; flex-wrap:wrap; gap:8px }
.k360-langkah { flex:0 1 auto; min-width:172px; border:1px solid; border-radius:8px;
                padding:8px 12px }
.k360-langkah-nama { font-size:13px; font-weight:600 }
.k360-langkah-isi { font-size:12px; color:#64748b; margin-top:2px }

.k360-bawah { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:18px;
              padding-top:16px; border-top:1px solid #e3e8ef }
.k360-bawah-judul { font-size:12px; letter-spacing:.03em; color:#64748b;
                    text-transform:uppercase; margin:0 0 10px }
.k360-produk-baris { display:flex; align-items:center; gap:8px; padding:6px 0;
                     border-bottom:1px solid #f8fafc; font-size:13px }
.k360-produk-sisi { margin-left:auto; text-align:right; font-size:11px }
.k360-pil { font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px }
.k360-catatan { display:grid; grid-template-columns:88px 1fr; gap:10px; padding:7px 0;
                border-bottom:1px solid #f8fafc; font-size:13px }
.k360-lihat { display:inline-block; margin-top:8px; font-size:12px; color:#259FD9;
              cursor:pointer }

@media (max-width: 900px) {
  .k360-fase { grid-template-columns:1fr; gap:8px }
  .k360-bawah { grid-template-columns:1fr; gap:18px }
  .k360-langkah { flex:1 1 100% }
  .k360-produk-sisi { display:block; margin-left:0; text-align:left; width:100% }
}


/* -- Panel perlu tindakan --------------------------------------------- */
.k360-tindakan { padding:10px 0; border-bottom:1px solid rgba(0,0,0,.06); font-size:13px }
.k360-tindakan:last-of-type { border-bottom:0 }
.k360-tindakan-waktu { font-size:12px; color:#64748b; margin-top:1px }
.k360-tindakan-waktu.telat { color:#dc2626; font-weight:600 }
.k360-tindakan-kaki { display:flex; align-items:center; justify-content:space-between;
                      gap:8px; margin-top:7px }
.k360-tindakan-kaki form { margin:0 }
.k360-hitung { display:inline-flex; align-items:center; justify-content:center;
               min-width:20px; height:20px; padding:0 6px; margin-left:6px;
               border-radius:999px; background:#dc2626; color:#fff;
               font-size:11px; font-weight:700; vertical-align:middle }


/* -- Beranda per peran ------------------------------------------------- */
.brd-kisi { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:14px }
.brd-kartu { margin-bottom:0 }
.brd-kepala { display:flex; align-items:center; gap:8px }
.brd-hitung { display:inline-flex; align-items:center; justify-content:center; min-width:20px;
              height:20px; padding:0 6px; border-radius:999px; background:#dc2626; color:#fff;
              font-size:11px; font-weight:700 }
.brd-beres { margin:6px 0; font-size:13px; color:#16a34a }
.brd-daftar { list-style:none; margin:0; padding:0 }
.brd-daftar li { border-bottom:1px solid #f1f5f9 }
.brd-daftar li:last-child { border-bottom:0 }
.brd-item { display:flex; align-items:baseline; gap:10px; padding:8px 0; text-decoration:none }
.brd-item:hover { background:#f8fafc }
.brd-item-utama { flex:1; min-width:0 }
.brd-item-label { display:block; font-size:13px; font-weight:600; color:#02335C;
                  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.brd-item-konteks { display:block; font-size:11px; color:#64748b }
.brd-item-waktu { flex:0 0 auto; font-size:11px; color:#64748b; white-space:nowrap }
.brd-item-waktu.mendesak { color:#dc2626; font-weight:600 }
.brd-semua { display:inline-block; margin-top:10px; font-size:12px; color:#259FD9 }
.brd-angka { display:flex; flex-wrap:wrap; gap:18px; padding:4px 0 }
.brd-angka-nilai { font-size:19px; font-weight:600; color:#02335C }
.brd-angka-label { font-size:11px; color:#64748b }

/* Badge angka di menu samping. */
.mb-sisi .mb-badge-menu { float:right; min-width:19px; height:19px; padding:0 6px; margin-top:1px;
                          border-radius:999px; background:#dc2626; color:#fff; font-size:10px;
                          font-weight:700; line-height:19px; text-align:center }

@media (max-width: 900px) {
  .brd-kisi { grid-template-columns:1fr }
}


/* ── Lonceng notifikasi (dibangun ulang 2026-08-20) ─────────────────── */
.mb-lonceng { position: relative; }
.mb-lonceng summary { list-style: none; cursor: pointer; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  /* Topbar bernuansa gelap — putih dikunci agar tak kalah aturan lain. */
  color: #fff !important; font-size: 17px; }
.mb-lonceng summary i { color: #fff !important; }
.mb-lonceng summary::-webkit-details-marker { display: none; }
.mb-lonceng summary:hover { background: rgba(255,255,255,.18); }
.mb-lonceng-badge { position: absolute; top: 2px; right: 0;
  background: #dc2626; color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 99px; padding: 1px 5px; line-height: 1.4; }
.mb-lonceng-turun { position: absolute; right: 0; top: 42px; z-index: 60;
  width: 320px; max-height: 420px; overflow-y: auto;
  background: var(--mb-putih); border: 1px solid var(--mb-garis);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(2,51,92,.12); }
.mb-lonceng-item { display: flex; justify-content: space-between; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--mb-garis);
  color: var(--mb-teks); text-decoration: none; }
.mb-lonceng-item:hover { background: #f8fafc; }
.mb-lonceng-item.belum { background: var(--mb-brand-muda); }
.mb-lonceng-item strong { font-size: 13px; color: var(--mb-ink); font-weight: 600; }
.mb-lonceng-item small { color: var(--mb-teks-3); white-space: nowrap; }
.mb-lonceng-kosong { padding: 16px; margin: 0; color: var(--mb-teks-2); font-size: 13px; }
.mb-lonceng-semua { display: block; text-align: center; padding: 10px;
  font-size: 13px; font-weight: 600; color: var(--mb-brand); }

/* ========================================================== tab
   Ditambahkan REKANAN-4. Sebelum ini mb.css tidak punya komponen tab sama
   sekali; view yang memakai `nav nav-tabs` warisan AdminLTE tampil sebagai
   daftar bullet karena JS-nya tidak lagi dimuat layouts/mb.
   Markup dibangun app/Views/partials/mb_tabs.php.                        */
.mb-tab {
  display: flex; flex-wrap: nowrap; gap: var(--mb-j5);
  list-style: none; margin: 0 0 var(--mb-j4); padding: 0;
  border-bottom: 1px solid var(--mb-garis);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mb-tab::-webkit-scrollbar { height: 0; }
.mb-tab > li { margin: 0; }
.mb-tab > li > a {
  display: inline-flex; align-items: center; gap: var(--mb-j2);
  padding: 10px 2px; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--mb-teks-2); font-size: var(--mb-ts); font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.mb-tab > li > a:hover,
.mb-tab > li > a:focus-visible { color: var(--mb-brand); }
.mb-tab > li.mb-tab-aktif > a {
  color: var(--mb-brand); border-bottom-color: var(--mb-brand); font-weight: 700;
}
.mb-tab .mb-badge { font-size: 10px; padding: 1px 7px; }

/* Panel mode 'panel'. `hidden` sudah cukup, tetapi aturan ini menjaga
   panel tetap tersembunyi kalau ada gaya lain yang memasang display. */
.mb-tab-panel[hidden] { display: none !important; }

/* ========================================================== bilah saring datar
   Varian .mb-saring untuk bilah yang SUDAH berada di dalam kartu, jadi tanpa
   latar dan garis sendiri supaya tidak tampak seperti kartu bersarang.     */
.mb-saring-datar {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--mb-j2) var(--mb-j3); margin-bottom: var(--mb-j4);
}
/* Kelompok kiri menampung seluruh kontrol dan boleh membungkus sendiri;
   kelompok aksi jadi satu blok terpisah, sehingga tombol Saring tidak
   pernah terdampar sendirian di baris baru. */
.mb-saring-kiri {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: var(--mb-j2) var(--mb-j3); flex: 1 1 auto; min-width: 0;
}
.mb-saring-aksi {
  display: flex; align-items: center; gap: var(--mb-j3);
  flex: 0 0 auto; margin-left: auto;
}
.mb-saring-cari { flex: 1 1 260px; min-width: 260px; }
.mb-saring-medan > label {
  display: block; font-size: var(--mb-ts-xs); color: var(--mb-teks-3);
  margin-bottom: 3px; font-weight: 500;
}
/* Dua tanggal berdampingan tanpa jarak, dibaca sebagai satu rentang. */
.mb-saring-tgl { display: flex; align-items: flex-end; gap: 0; }
.mb-saring-tgl .mb-saring-medan:first-child .form-control {
  border-radius: var(--mb-r-s) 0 0 var(--mb-r-s);
}
.mb-saring-tgl .mb-saring-medan + .mb-saring-medan .form-control {
  border-radius: 0 var(--mb-r-s) var(--mb-r-s) 0; margin-left: -1px;
}

/* ========================================================== peta status
   Satu tempat untuk warna semua status rekanan, dipakai lewat
   <span class="mb-status" data-status="…">. View tidak lagi memilih warna
   sendiri, jadi status yang sama tidak pernah berbeda warna antar halaman. */
.mb-status {
  display: inline-block; padding: 2px 9px; border-radius: var(--mb-r-p);
  font-size: var(--mb-ts-xs); font-weight: 600; line-height: 1.6;
  white-space: nowrap; text-transform: capitalize;
  background: var(--mb-info-muda); color: var(--mb-brand-gelap);
}
/* sedang berjalan — biru (bawaan di atas): verifikasi, interview, training,
   ecard, spk, draft, menunggu */
.mb-status[data-status="daftar"],
.mb-status[data-status="baru"],
.mb-status[data-status="coaching"],
.mb-status[data-status="menunggu_approval"] {
  background: var(--mb-ingat-muda); color: #b45309;
}
.mb-status[data-status="aktif"],
.mb-status[data-status="lolos"],
.mb-status[data-status="disetujui"],
.mb-status[data-status="terbaik"] {
  background: var(--mb-sukses-muda); color: #15803d;
}
.mb-status[data-status="ditolak"],
.mb-status[data-status="nonaktif"] {
  background: #eef2f7; color: var(--mb-teks-2);
}
.mb-status[data-status="mundur"] {
  background: #f8fafc; color: var(--mb-teks-3);
}
.mb-status[data-status="tidak_lolos"],
.mb-status[data-status="tengkorak"] {
  background: var(--mb-bahaya-muda); color: #b91c1c;
}

/* Penanda hasil screening di kolom nama. Tidak ada ikon untuk data bersih:
   ikon yang muncul di setiap baris berhenti menjadi informasi. */
.mb-flag-kuning { color: var(--mb-ingat); }
.mb-flag-merah  { color: var(--mb-bahaya); }

@media (max-width: 768px) {
  .mb-saring-cari { flex-basis: 100%; min-width: 0; }
  .mb-saring-aksi { margin-left: 0; }
  .mb-tab { gap: var(--mb-j4); }
}