/* =====================================================================
   Visa Expert — tema gabungan (Soft Modern + Modern SaaS), redesign v2
   Sumber: docs/redesign-v2/soft-modern.css + REDESIGN-GUIDE.md (di luar repo).
   Sidebar gelap ungu tua, konten lavender dengan kartu putih membulat.

   Dimuat layouts/app.blade.php SETELAH semua CSS Vuexy + app.css, jadi
   aturan di sini menang cascade. Halaman publik (layouts/public) & login
   (layouts/guest) SENGAJA belum memuat file ini.

   Beda dengan file acuan (disesuaikan ke markup & Vuexy versi proyek ini):
   - Sidebar Vuexy di sini diwarnai lewat variabel --bs-menu-* pada
     #layout-menu, BUKAN .bg-menu-theme (kelas itu tak ada di versi ini).
     <aside> tetap data-bs-theme="dark" (bawaan Vuexy) supaya komponen di
     dalamnya ikut mode gelap; warna brand ditimpa lagi di #layout-menu
     karena blok [data-bs-theme=dark] core.css punya nilai primary sendiri.
   - Latar navbar diatur lewat --bs-navbar-bg (aturan Vuexy ber-!important).
   - Token acuan --ve-surface (putih) diganti nama --ve-card: nama
     --ve-surface sudah dipakai app.css untuk tint panel (#faf9fc, .bg-surface
     & hover baris). Menimpanya akan membuat panel-panel itu jadi putih polos.
   - Kartu bersarang berlatar warna (bg-label-*) tidak diratakan.
   - .table-responsive di kartu TIDAK diberi overflow:hidden (acuan) — itu
     mematikan gulir horizontal tabel lebar di layar HP.
   ===================================================================== */

:root {
  /* Brand */
  --ve-primary: #534AB7;
  --ve-primary-hover: #463EA0;
  --ve-primary-soft: #EEEDFE;
  --ve-primary-ink: #3C3489;

  /* Surface */
  --ve-page: #F6F5FE;
  --ve-card: #FFFFFF;
  --ve-border: #EDEBF7;
  --ve-divider: #F1EFE8;
  --ve-thead: #FAFAFE;

  /* Text */
  --ve-heading: #26215C;
  --ve-text: #2C2C2A;
  --ve-text-2: #5F5E5A;
  --ve-muted: #888780;

  /* Pastel pairs: bg / ink / mid */
  --ve-purple-bg: #EEEDFE; --ve-purple-ink: #3C3489; --ve-purple-mid: #AFA9EC;
  --ve-teal-bg:   #E1F5EE; --ve-teal-ink:   #085041; --ve-teal-mid:   #5DCAA5;
  --ve-blue-bg:   #E6F1FB; --ve-blue-ink:   #0C447C; --ve-blue-mid:   #85B7EB;
  --ve-amber-bg:  #FAEEDA; --ve-amber-ink:  #633806; --ve-amber-mid:  #EF9F27;
  --ve-red-bg:    #FCEBEB; --ve-red-ink:    #A32D2D; --ve-red-mid:    #F09595;
  --ve-pink-bg:   #FBEAF0; --ve-pink-ink:   #72243E; --ve-pink-mid:   #ED93B1;
  --ve-gray-bg:   #F1EFE8; --ve-gray-ink:   #444441; --ve-gray-mid:   #B4B2A9;

  /* Sidebar gelap */
  --ve-sidebar: #1E1B4B;
  --ve-sidebar-text: #A5A3C9;
  /* Guide: #6B6894 — kontrasnya ±3:1 di atas #1E1B4B, terlalu redup untuk teks
     11px. Dinaikkan ke #8E8BBA (±4.9:1, lolos WCAG AA) agar judul grup terbaca. */
  --ve-sidebar-muted: #8E8BBA;
  --ve-sidebar-hover: rgba(255, 255, 255, 0.06);
  --ve-sidebar-badge-bg: #F09595;
  --ve-sidebar-badge-ink: #501313;

  /* Chart */
  --ve-chart-1: #7F77DD;  /* leads / seri utama */
  --ve-chart-1-fill: rgba(175, 169, 236, 0.25);
  --ve-chart-2: #1D9E75;  /* converted / approved */
  --ve-chart-2-fill: rgba(93, 202, 165, 0.20);
  --ve-funnel-1: #CECBF6;
  --ve-funnel-2: #AFA9EC;
  --ve-funnel-3: #7F77DD;
  --ve-funnel-final: #534AB7;
  --ve-funnel-empty: #F1EFE8;

  /* Shape */
  --ve-radius-card: 14px;
  --ve-radius-control: 10px;
  --ve-radius-icon: 10px;
  --ve-radius-pill: 999px;

  /* Spacing */
  --ve-gap: 12px;
  --ve-pad-card: 16px;
  --ve-float: 12px;   /* jarak sidebar melayang dari tepi layar */
  --ve-navbox: 38px;  /* kotak lonceng & avatar di navbar (setinggi kolom cari) */

  /* Jembatan ke Bootstrap/Vuexy. Semua turunan primary ikut ditimpa: Vuexy
     memakai --bs-primary-rgb, -bg-subtle, dan warna link secara terpisah. */
  --bs-primary: var(--ve-primary);
  --bs-primary-rgb: 83, 74, 183;
  --bs-primary-text-emphasis: var(--ve-primary-ink);
  --bs-primary-bg-subtle: var(--ve-primary-soft);
  --bs-primary-border-subtle: var(--ve-purple-mid);
  --bs-link-color: var(--ve-primary);
  --bs-link-color-rgb: 83, 74, 183;
  --bs-link-hover-color: var(--ve-primary-hover);
  --bs-link-hover-color-rgb: 70, 62, 160;
  --bs-body-bg: var(--ve-page);
  --bs-body-bg-rgb: 246, 245, 254;
  --bs-body-color: var(--ve-text);
  --bs-body-color-rgb: 44, 44, 42;
  --bs-secondary-color: var(--ve-text-2);
  --bs-secondary-color-rgb: 95, 94, 90;
  --bs-border-color: var(--ve-border);
  --bs-heading-color: var(--ve-heading);
}

/* ---------- Page ---------- */
body,
.layout-wrapper,
.layout-page,
.content-wrapper {
  background-color: var(--ve-page) !important;
  color: var(--ve-text);
}

h1, h2, h3, h4, h5, h6,
.card-title { color: var(--ve-heading); font-weight: 500; }

.text-muted { color: var(--ve-muted) !important; }

/* ---------- Sidebar gelap (#layout-menu) ----------
   Selector ID dipakai supaya menang dari blok [data-bs-theme=dark] core.css. */
#layout-menu {
  --bs-primary: var(--ve-primary);
  --bs-primary-rgb: 83, 74, 183;
  --bs-menu-bg: var(--ve-sidebar);
  --bs-menu-bg-rgb: 30, 27, 75;
  --bs-menu-color: var(--ve-sidebar-text);
  --bs-menu-color-rgb: 165, 163, 201;
  --bs-menu-hover-bg: var(--ve-sidebar-hover);
  --bs-menu-hover-color: #fff;
  --bs-menu-sub-active-bg: var(--ve-sidebar-hover);
  --bs-menu-sub-active-color: #fff;
  --bs-menu-active-bg: var(--ve-primary);
  --bs-menu-active-color: #fff;
  --bs-menu-box-shadow: none;
  background-color: var(--ve-sidebar) !important;
  color: var(--ve-sidebar-text);
  box-shadow: none !important;
  border: 0 !important;
}
/* Bayangan di bawah logo saat menu digulir — tak cocok dengan gaya datar. */
#layout-menu .menu-inner-shadow { display: none !important; }

/* Logo: ikon + wordmark putih (aset asli untuk latar gelap). Tombol ciut terang. */
#layout-menu .app-brand-text,
#layout-menu .app-brand .layout-menu-toggle { color: #fff !important; }

/* Judul grup menu: kecil, sentence case, ungu redup. Saat menu diciutkan
   Vuexy mengganti teksnya dengan garis pendek (::before). */
#layout-menu .menu-header .menu-header-text {
  color: var(--ve-sidebar-muted);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}
#layout-menu .menu-inner > .menu-header::before { background-color: var(--ve-sidebar-muted) !important; }

#layout-menu .menu-link,
#layout-menu .menu-link .menu-icon { color: var(--ve-sidebar-text); }
#layout-menu .menu-inner > .menu-item > .menu-link { border-radius: var(--ve-radius-control); }
#layout-menu .menu-item:not(.active) > .menu-link:hover {
  background-color: var(--ve-sidebar-hover);
  color: #fff;
}
#layout-menu .menu-item:not(.active) > .menu-link:hover .menu-icon { color: #fff; }

/* Menu aktif: ungu penuh, tanpa gradien & bayangan bawaan Vuexy. */
#layout-menu .menu-item.active > .menu-link:not(.menu-toggle) {
  background: var(--ve-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}
#layout-menu .menu-item.active > .menu-link .menu-icon { color: #fff; }

/* Submenu (menu-sub): belum dipakai, tapi bila ada tetap terbaca di latar gelap. */
#layout-menu .menu-sub .menu-link { color: var(--ve-sidebar-text); }
#layout-menu .menu-sub .menu-item.active > .menu-link:not(.menu-toggle) {
  background: var(--ve-sidebar-hover) !important;
  color: #fff !important;
}
#layout-menu .menu-item.open > .menu-toggle,
#layout-menu .menu-item.active > .menu-toggle { background-color: var(--ve-sidebar-hover); color: #fff; }

/* Badge jumlah: merah pastel, teks merah tua. */
#layout-menu .menu-link .badge {
  background: var(--ve-sidebar-badge-bg) !important;
  color: var(--ve-sidebar-badge-ink) !important;
  font-weight: 500;
}

/* Sidebar melayang (hanya desktop; di <1200px sidebar Vuexy jadi off-canvas).
   Isi halaman & navbar fixed digeser sejauh jarak melayangnya. */
@media (min-width: 1200px) {
  .layout-menu-fixed #layout-menu {
    inset-block: var(--ve-float);
    inset-inline-start: var(--ve-float);
    block-size: auto !important;
    border-radius: var(--ve-radius-card);
    overflow: hidden;
  }
  .layout-menu-fixed:not(.layout-menu-collapsed) .layout-page {
    padding-inline-start: calc(var(--bs-menu-width) + var(--ve-float));
  }
  .layout-menu-fixed.layout-menu-collapsed .layout-page {
    padding-inline-start: calc(var(--bs-menu-collapsed-width) + var(--ve-float));
  }
  .layout-menu-fixed.layout-navbar-fixed:not(.layout-menu-collapsed) .layout-content-navbar:not(.layout-without-menu) .layout-navbar {
    inset-inline-start: calc(var(--bs-menu-width) + var(--ve-float));
  }
  .layout-navbar-fixed .layout-navbar.navbar-detached {
    inline-size: calc(100% - 1.5rem * 2 - var(--bs-menu-width) - var(--ve-float));
  }
  /* Menu diciutkan (tombol di samping logo) */
  .layout-menu-fixed.layout-navbar-fixed.layout-menu-collapsed #layout-navbar {
    inset-inline-start: calc(var(--bs-menu-collapsed-width) + var(--ve-float));
    inline-size: calc(100% - 1.5rem * 2 - var(--bs-menu-collapsed-width) - var(--ve-float));
  }
}

/* ---------- Top navbar ----------
   Vuexy mengisi latar lewat `.navbar[class*="bg-"]:not(…)` ber-!important dengan
   spesifisitas lebih tinggi dari selector kelas biasa — jadi variabelnya yang
   ditimpa, di #layout-navbar. */
#layout-navbar { --bs-navbar-bg: transparent; }
.layout-navbar,
.layout-navbar.navbar-detached,
.bg-navbar-theme {
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
/* Vuexy memberi kaca buram saat halaman digulir — biarkan transparan. */
.layout-menu.menu-vertical ~ .layout-page.window-scrolled .layout-navbar {
  backdrop-filter: none;
  background-color: transparent !important;
}
.layout-navbar.navbar-detached { padding-inline: 0; }

/* Kolom cari: kotak putih */
.ve-search {
  display: flex; align-items: center; gap: 8px;
  inline-size: 100%; max-inline-size: 420px; min-inline-size: 0;
  block-size: var(--ve-navbox);
  padding-inline: 12px;
  background: var(--ve-card);
  border: 1px solid var(--ve-border);
  border-radius: var(--ve-radius-control);
  color: var(--ve-muted);
}
.ve-search input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  color: var(--ve-text); font-size: 0.875rem;
}
.ve-search input::placeholder { color: var(--ve-muted); }

/* Lonceng dalam kotak putih; avatar dalam kotak ungu */
.ve-navbox {
  inline-size: var(--ve-navbox); block-size: var(--ve-navbox);
  display: inline-flex !important; align-items: center; justify-content: center;
  padding: 0 !important;
  background: var(--ve-card);
  border: 1px solid var(--ve-border);
  border-radius: var(--ve-radius-control);
  color: var(--ve-text-2) !important;
}
.ve-navbox:hover { color: var(--ve-primary) !important; }
#layout-navbar .dropdown-user .avatar { inline-size: var(--ve-navbox); block-size: var(--ve-navbox); }
#layout-navbar .dropdown-user .avatar .avatar-initial {
  border-radius: var(--ve-radius-control) !important;
  background: var(--ve-primary) !important;
  color: #fff !important;
  font-size: 13px; font-weight: 500;
}

/* ---------- Footer: satu baris kecil abu ---------- */
.content-footer .footer-container { color: var(--ve-muted); font-size: 12px; }

/* ---------- Cards ---------- */
.card {
  background-color: var(--ve-card);
  border: 1px solid var(--ve-border);
  border-radius: var(--ve-radius-card);
  box-shadow: none !important;
}
.card-header { background: transparent; border-bottom: 0; padding-bottom: 0; }
.card-body { padding: var(--ve-pad-card); }

/* Kartu di dalam kartu tidak diizinkan: ratakan kartu bersarang.
   Kecuali yang berlatar warna (kartu angka bg-label-* di Pengaturan). */
.card .card:not([class*="bg-"]) { border: 0; background: transparent; }

/* ---------- Buttons ---------- */
.btn { border-radius: var(--ve-radius-control); font-weight: 500; box-shadow: none !important; }

.btn-primary {
  background-color: var(--ve-primary) !important;
  border-color: var(--ve-primary) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active { background-color: var(--ve-primary-hover) !important; border-color: var(--ve-primary-hover) !important; }

.btn-outline-primary,
.btn-label-primary {
  background-color: var(--ve-primary-soft) !important;
  border-color: transparent !important;
  color: var(--ve-primary-ink) !important;
}
/* app.css punya hover outline-primary dengan hex ungu lama (#7367f0). */
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-label-primary:hover {
  background-color: var(--ve-primary) !important;
  border-color: var(--ve-primary) !important;
  color: #fff !important;
}

/* ---------- Forms ---------- */
.form-control,
.form-select,
.input-group-text {
  border-radius: var(--ve-radius-control);
  border-color: var(--ve-border);
  background-color: var(--ve-card);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--ve-purple-mid);
  box-shadow: 0 0 0 3px var(--ve-primary-soft);
}

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; color: var(--ve-text); margin-bottom: 0; }
.table > :not(caption) > * > * { border-bottom-color: var(--ve-divider); padding: 12px 14px; }
/* table-sm = bentuk tabel baku proyek (ui-conventions): tetap lebih rapat. */
.table-sm > :not(caption) > * > * { padding: 10px 12px; }
/* Header kapital kecil berlatar tipis. Selector kedua disamakan dengan milik
   core.css (:not(.table-borderless):not(.dataTable)) supaya setara spesifisitasnya. */
.table thead th,
.table:not(.table-borderless):not(.dataTable) thead th {
  color: var(--ve-text-2);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-top: 1px solid var(--ve-border);
  border-bottom: 1px solid var(--ve-border);
  background: var(--ve-thead);
  padding-top: 8px; padding-bottom: 8px;
}
/* Tabel langsung di kartu: header menempel ke tepi, sudut bawah ikut membulat. */
.card > .table-responsive,
.card > .table { border-radius: 0 0 var(--ve-radius-card) var(--ve-radius-card); }
.card > .table-responsive > .table > :not(caption) > * > :first-child { padding-inline-start: var(--ve-pad-card); }
.card > .table-responsive > .table > :not(caption) > * > :last-child { padding-inline-end: var(--ve-pad-card); }
.card > .table-responsive > .table > tbody > tr:last-child > * { border-bottom: 0; }
.table-hover > tbody > tr:hover > * { --bs-table-hover-bg: var(--ve-thead); }

/* ---------- Tabs / nav-pills (filter status) ---------- */
.nav-pills .nav-link { border-radius: var(--ve-radius-control); color: var(--ve-text-2); }
.nav-pills .nav-link.active { background: var(--ve-primary); color: #fff; box-shadow: none; }

/* =====================================================================
   Komponen baru (prefix ve-)
   ===================================================================== */

/* Judul halaman: 18–20px, keterangan kecil abu di bawahnya */
.ve-page-title { font-size: 20px; line-height: 1.3; margin: 0 0 2px; }
.ve-lb { color: var(--ve-muted); font-size: 12.5px; }
.min-w-0 { min-width: 0; }

/* Pill status */
.ve-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; line-height: 1; padding: 5px 10px;
  border-radius: var(--ve-radius-pill); white-space: nowrap; font-weight: 500;
}
.ve-pill--purple { background: var(--ve-purple-bg); color: var(--ve-purple-ink); }
.ve-pill--teal   { background: var(--ve-teal-bg);   color: var(--ve-teal-ink); }
.ve-pill--blue   { background: var(--ve-blue-bg);   color: var(--ve-blue-ink); }
.ve-pill--amber  { background: var(--ve-amber-bg);  color: var(--ve-amber-ink); }
.ve-pill--red    { background: var(--ve-red-bg);    color: var(--ve-red-ink); }
.ve-pill--pink   { background: var(--ve-pink-bg);   color: var(--ve-pink-ink); }
.ve-pill--gray   { background: var(--ve-gray-bg);   color: var(--ve-gray-ink); }

/* Kotak ikon pastel */
.ve-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--ve-radius-icon);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.ve-icon--sm { width: 30px; height: 30px; font-size: 15px; }
.ve-icon--purple { background: var(--ve-purple-bg); color: var(--ve-primary); }
.ve-icon--teal   { background: var(--ve-teal-bg);   color: var(--ve-teal-ink); }
.ve-icon--blue   { background: var(--ve-blue-bg);   color: var(--ve-blue-ink); }
.ve-icon--amber  { background: var(--ve-amber-bg);  color: var(--ve-amber-ink); }
.ve-icon--red    { background: var(--ve-red-bg);    color: var(--ve-red-ink); }
.ve-icon--pink   { background: var(--ve-pink-bg);   color: var(--ve-pink-ink); }
.ve-icon--gray   { background: var(--ve-gray-bg);   color: var(--ve-gray-ink); }
/* Ikon Tabler versi iconify berukuran lewat --bs-icon-size, bukan font-size. */
.ve-icon > .icon-base { --bs-icon-size: 18px; }
.ve-icon--sm > .icon-base { --bs-icon-size: 15px; }

/* Kartu angka (KPI): label kapital + ikon pastel kanan, angka, keterangan */
.ve-stat { padding: 14px 16px; }
.ve-stat__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ve-stat__label {
  font-size: 11px; font-weight: 500; color: var(--ve-text-2);
  text-transform: uppercase; letter-spacing: .05em;
}
.ve-stat__value { font-size: 26px; font-weight: 500; color: var(--ve-heading); line-height: 1.2; margin-top: 2px; }
.ve-stat__sub { font-size: 12px; color: var(--ve-muted); margin-top: 2px; }
a.ve-stat { color: inherit; transition: border-color .15s; }
a.ve-stat:hover { border-color: var(--ve-purple-mid); }

/* Label kapital kecil (header kolom custom, dsb.) */
.ve-caps { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--ve-text-2); }

/* Peringatan ringkas yang bisa ditindaklanjuti */
.ve-alert {
  display: flex; align-items: center; gap: 10px;
  border-radius: 12px; padding: 10px 14px; font-size: 13px;
}
.ve-alert > span { min-width: 0; }
.ve-alert a { margin-left: auto; font-weight: 500; text-decoration: none; color: inherit; white-space: nowrap; }
.ve-alert--amber { background: var(--ve-amber-bg); color: var(--ve-amber-ink); }
.ve-alert--red   { background: var(--ve-red-bg);   color: var(--ve-red-ink); }
.ve-alert--blue  { background: var(--ve-blue-bg);  color: var(--ve-blue-ink); }
.ve-alert--teal  { background: var(--ve-teal-bg);  color: var(--ve-teal-ink); }

/* Funnel pipeline horizontal */
.ve-funnel { display: flex; flex-direction: column; gap: 8px; }
.ve-funnel__row { display: grid; grid-template-columns: 84px 1fr 28px; gap: 8px; align-items: center; font-size: 12.5px; color: inherit; text-decoration: none; }
.ve-funnel__label { color: var(--ve-text-2); }
.ve-funnel__bar { height: 16px; border-radius: 8px; min-width: 8px; }
.ve-funnel__value { text-align: right; font-weight: 500; color: var(--ve-heading); }
.ve-funnel__row.is-empty .ve-funnel__bar { background: var(--ve-funnel-empty) !important; width: 8px !important; }
.ve-funnel__row.is-empty .ve-funnel__value { color: var(--ve-muted); font-weight: 400; }

/* Chip tanggal agenda */
.ve-date { width: 38px; text-align: center; border-radius: 9px; padding: 4px 0; flex-shrink: 0; background: var(--ve-purple-bg); color: var(--ve-purple-ink); }
.ve-date b { display: block; font-size: 14px; font-weight: 500; line-height: 1.1; }
.ve-date small { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; }

/* Kode negara */
.ve-cc {
  display: inline-block; font-size: 11px; font-weight: 500;
  padding: 2px 6px; border-radius: 6px;
  background: var(--ve-gray-bg); color: var(--ve-gray-ink);
  letter-spacing: .02em; vertical-align: 1px;
}

/* Avatar inisial */
.ve-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 500;
  background: var(--ve-purple-bg); color: var(--ve-purple-ink);
}
.ve-avatar--teal  { background: var(--ve-teal-bg);  color: var(--ve-teal-ink); }
.ve-avatar--blue  { background: var(--ve-blue-bg);  color: var(--ve-blue-ink); }
.ve-avatar--amber { background: var(--ve-amber-bg); color: var(--ve-amber-ink); }
.ve-avatar--pink  { background: var(--ve-pink-bg);  color: var(--ve-pink-ink); }
.ve-avatar--gray  { background: var(--ve-gray-bg);  color: var(--ve-gray-ink); }

/* Progress tipis — ungu bila ≥ 80%, amber di bawahnya (.is-low) */
.ve-progress { height: 6px; background: var(--ve-divider); border-radius: 3px; overflow: hidden; }
.ve-progress > span { display: block; height: 100%; background: var(--ve-primary); border-radius: 3px; }
.ve-progress > span.is-low { background: var(--ve-amber-mid); }

/* Bar pipeline bersegmen */
.ve-pipeline { display: flex; gap: 3px; height: 10px; }
.ve-pipeline > span { border-radius: 5px; min-width: 6px; }

/* Header section di dalam kartu */
.ve-card-title {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-weight: 500; color: var(--ve-heading); margin-bottom: 12px;
}
.ve-card-title a { font-weight: 400; font-size: 12.5px; color: var(--ve-primary); text-decoration: none; white-space: nowrap; }

/* Legend grafik kecil (kanan atas kartu) */
.ve-legend { display: flex; gap: 14px; font-size: 12px; color: var(--ve-text-2); font-weight: 400; white-space: nowrap; }
.ve-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }

/* Empty state */
.ve-empty { text-align: center; padding: 32px 16px; color: var(--ve-text-2); }
.ve-empty .ve-icon { margin-bottom: 10px; }

/* Baris daftar di kartu (agenda) */
.ve-item { display: flex; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--ve-divider); min-width: 0; }
.ve-card-title + .ve-item { border-top: 0; padding-top: 0; }

/* Sel yang mengisi sisa lebar & memotong teks panjang dengan "…" (tanpa ini,
   nama panjang ber-nowrap melebarkan tabel melewati kartu di layar HP).
   Hanya di HP: di desktop kolom lain butuh lebar alaminya. */
@media (max-width: 767.98px) {
  .ve-cell-fill { width: 100%; max-width: 0; }
}

/* Grafik ApexCharts: font & warna label mengikuti halaman */
.ve-chart .apexcharts-text { fill: var(--ve-muted); }
.ve-chart .apexcharts-tooltip { border-radius: var(--ve-radius-control) !important; border-color: var(--ve-border) !important; box-shadow: none !important; }

/* =====================================================================
   Halaman publik & login (layouts/public, layouts/guest)
   ===================================================================== */

/* Baris dokumen di Share Link: nama kiri, pill + tautan kanan */
.ve-doc-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--ve-divider);
}
.ve-doc-row:last-child { border-bottom: 0; }

/* Garis pemisah bagian (kuesioner) memakai warna divider tema */
.ve-public hr { border-color: var(--ve-divider); opacity: 1; }

/* =====================================================================
   Fase 2 (Leads, Applicant, Group, detail Lead)
   ===================================================================== */

/* Stepper status: titik dengan garis penghubung (guide: "4 titik, tahap aktif
   ungu"). Markup <x-stepper> tetap; ini menimpa .ve-stepper di custom.css. */
.ve-stepper .st .cir {
  width: 22px; height: 22px; border: 0; font-size: 12px;
  background: var(--ve-gray-bg); color: transparent; position: relative;
}
.ve-stepper .st .cir .icon-base { --bs-icon-size: 12px; }
.ve-stepper .st.done .cir { background: var(--ve-primary); color: #fff; }
.ve-stepper .st.cur .cir { background: var(--ve-card); color: transparent; box-shadow: inset 0 0 0 2px var(--ve-primary); }
.ve-stepper .st.cur .cir::after {
  content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--ve-primary);
}
.ve-stepper .bar { top: 10px; height: 2px; background: var(--ve-divider); }
.ve-stepper .st.done .bar, .ve-stepper .st.cur .bar { background: var(--ve-primary); }
.ve-stepper .st .tl { font-size: 12px; margin-top: 6px; color: var(--ve-muted); font-weight: 400; }
.ve-stepper .st.done .tl { color: var(--ve-text-2); }
.ve-stepper .st.cur .tl { color: var(--ve-primary); font-weight: 500; }
.ve-stepper .st.clk:hover .cir { box-shadow: 0 0 0 4px var(--ve-primary-soft); }
.ve-stepper .st.cur.clk:hover .cir { box-shadow: inset 0 0 0 2px var(--ve-primary), 0 0 0 4px var(--ve-primary-soft); }

/* Penanda data terenkripsi: gembok kecil abu-abu (pengganti emoji 🔒) */
.ve-lock { --bs-icon-size: 12px; color: var(--ve-muted); vertical-align: -1px; }

/* Warna ikon channel lead (<x-channel>): teks biasa + ikon kecil berwarna, bukan pill */
.ve-ch--teal   { color: #1D9E75; }
.ve-ch--blue   { color: #378ADD; }
.ve-ch--pink   { color: #D4537E; }
.ve-ch--amber  { color: #BA7517; }
.ve-ch--purple { color: #7F77DD; }
.ve-ch--gray   { color: var(--ve-muted); }

/* Angka di tab status (nav-pills): pill abu kecil; di tab aktif putih transparan */
.ve-count {
  display: inline-block; min-width: 20px; text-align: center;
  font-size: 11px; font-weight: 500; line-height: 1; padding: 3px 7px;
  border-radius: var(--ve-radius-pill); background: var(--ve-gray-bg); color: var(--ve-gray-ink);
}
.nav-pills .nav-link.active .ve-count { background: rgba(255, 255, 255, .22); color: #fff; }

/* Badge Vuexy lama (.badge.bg-label-*) tampil sebagai pill pastel guide —
   jembatan global (keputusan owner Fase 2) agar puluhan badge berwarna dinamis
   tak perlu diubah satu-satu. Hanya elemen .badge: kotak ikon/avatar yang juga
   memakai bg-label-* tidak tersentuh. */
.badge[class*="bg-label-"] {
  border-radius: var(--ve-radius-pill); font-weight: 500; padding: 4px 9px; line-height: 1.1;
}
.badge.bg-label-primary   { background: var(--ve-purple-bg) !important; color: var(--ve-purple-ink) !important; }
.badge.bg-label-success   { background: var(--ve-teal-bg)   !important; color: var(--ve-teal-ink)   !important; }
.badge.bg-label-info      { background: var(--ve-blue-bg)   !important; color: var(--ve-blue-ink)   !important; }
.badge.bg-label-warning   { background: var(--ve-amber-bg)  !important; color: var(--ve-amber-ink)  !important; }
.badge.bg-label-danger    { background: var(--ve-red-bg)    !important; color: var(--ve-red-ink)    !important; }
.badge.bg-label-secondary { background: var(--ve-gray-bg)   !important; color: var(--ve-gray-ink)   !important; }

/* Judul kartu: 16px, tidak sebesar h5 bawaan Vuexy (18px) */
.card-header h5, .card-header .h5 { font-size: 1rem; font-weight: 500; }

/* Tombol upload berkas (.ve-upload di app.css): tombol soft ungu muda */
.ve-upload {
  border: 1px solid transparent !important; border-radius: var(--ve-radius-control);
  background: var(--ve-primary-soft); color: var(--ve-primary-ink);
}
.ve-upload:hover { background: var(--ve-primary); border-color: var(--ve-primary) !important; color: #fff; }

/* Baris judul grup dokumen di tabel checklist */
.ve-grp { background: var(--ve-page) !important; color: var(--ve-heading); }

/* Dropdown status checklist (bisa diubah) tampil seperti pill pastel sesuai statusnya */
.ve-status-select .select2-container--default .select2-selection--single {
  border-color: transparent !important; border-radius: var(--ve-radius-pill) !important;
  background: var(--ve-gray-bg); font-weight: 500;
}
.ve-status-select .select2-selection__rendered { color: inherit !important; }
.ve-status--missing            .select2-selection--single { background: var(--ve-gray-bg)  !important; color: var(--ve-gray-ink); }
.ve-status--received           .select2-selection--single { background: var(--ve-blue-bg)  !important; color: var(--ve-blue-ink); }
.ve-status--in_review          .select2-selection--single { background: var(--ve-amber-bg) !important; color: var(--ve-amber-ink); }
.ve-status--revision_requested .select2-selection--single { background: var(--ve-amber-bg) !important; color: var(--ve-amber-ink); }
.ve-status--approved           .select2-selection--single { background: var(--ve-teal-bg)  !important; color: var(--ve-teal-ink); }

/* Biodata: nilai berwarna judul, label abu */
.biodata .v { color: var(--ve-heading); font-weight: 500; }
.biodata .r { border-bottom-color: var(--ve-divider); }
.photo-box { border-radius: var(--ve-radius-card); background: var(--ve-primary-soft); color: var(--ve-primary); font-weight: 500; }

/* =====================================================================
   Fase 3 (Invoice, Expenses, Kalender, Tugas)
   ===================================================================== */

/* Angka tabular: digit selebar sama, kolom nominal rapi rata kanan */
.ve-num { font-variant-numeric: tabular-nums; }
.ve-stat__value.ve-num { font-size: 22px; }

/* Nav-pills kecil (filter periode) */
.ve-pills-sm { gap: 2px; background: var(--ve-card); border: 1px solid var(--ve-border); border-radius: var(--ve-radius-control); padding: 3px; }
.ve-pills-sm .nav-link { padding: 4px 10px; font-size: 12.5px; border-radius: 8px; }

/* Chip tanggal per warna jenis (agenda, kalender) */
.ve-date--teal  { background: var(--ve-teal-bg);  color: var(--ve-teal-ink); }
.ve-date--amber { background: var(--ve-amber-bg); color: var(--ve-amber-ink); }
.ve-date--pink  { background: var(--ve-pink-bg);  color: var(--ve-pink-ink); }
.ve-date--red   { background: var(--ve-red-bg);   color: var(--ve-red-ink); }
.ve-date--blue  { background: var(--ve-blue-bg);  color: var(--ve-blue-ink); }

/* Grid kalender bulanan (markup .cal di custom.css) */
.cal { gap: 4px; }
.cal .dow { color: var(--ve-muted); font-weight: 500; text-transform: none; font-size: 12px; }
.cal .cell { border-color: var(--ve-divider); border-radius: var(--ve-radius-control); background: var(--ve-card); }
.cal .cell.off { background: var(--ve-page); color: var(--ve-muted); }
.cal .cell .dn { color: var(--ve-heading); font-weight: 500; }
.cal .cell[style*="outline"] { outline-color: var(--ve-primary) !important; outline-offset: -1px; }
.cal .ev { border-radius: 6px; padding: 2px 6px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Tujuh kolom selalu sama lebar: teks event yang panjang (nowrap) tak boleh
   melebarkan kolomnya — tanpa minmax(0, …) grid melebar melewati layar HP. */
.cal { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal .cell { min-width: 0; }
@media (max-width: 575.98px) {
  .cal { gap: 2px; }
  .cal .cell { min-height: 64px; padding: 3px; }
  .cal .ev { font-size: 10px; padding: 1px 3px; }
}
/* Desktop: teks event boleh turun baris (kolom sudah terkunci sama lebar).
   HP: satu baris dipotong "…" — ruangnya terlalu sempit. */
.cal .ev { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
@media (max-width: 575.98px) {
  .cal .ev { white-space: nowrap; overflow-wrap: normal; }
}
/* Tombol kecil ber-py-0 (Share Link, Tanda Terima, Edit biodata, dll.): ikon
   menempel ke tepi tombol (owner 3 Okt 2026). Beri ruang atas-bawah & sejajarkan
   ikon dengan teks. Tombol ikon ringkas Kalender (.lh-1) sengaja dikecualikan —
   owner memintanya ringkas (30 Sep 2026). */
.btn.btn-sm.py-0:not(.lh-1),
.btn.btn-xs.py-0:not(.lh-1) {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  line-height: 1.2;
}
/* btn-xs (mis. "jadikan PIC" di tabel) sedikit lebih ringkas dari btn-sm. */
.btn.btn-xs.py-0:not(.lh-1) { padding-top: 3px !important; padding-bottom: 3px !important; }
.btn.btn-sm.py-0:not(.lh-1) > .icon-base { --bs-icon-size: 16px; }

/* =====================================================================
   Fase 4 (admin & pengaturan)
   ===================================================================== */

/* Aksi ikon di tabel (Edit/Hapus/Reset/…): abu-abu, ungu saat disorot */
.table a.link-secondary,
.table .btn-text-secondary { color: var(--ve-muted) !important; transition: color .15s; }
.table a.link-secondary:hover,
.table .btn-text-secondary:hover { color: var(--ve-primary) !important; }
.table .btn-text-danger { color: var(--ve-muted) !important; }
.table .btn-text-danger:hover { color: var(--ve-red-ink) !important; background: var(--ve-red-bg) !important; }

/* Submenu kiri Pengaturan: daftar, item aktif ungu muda (bukan ungu penuh) */
.ve-submenu .nav-link { color: var(--ve-text-2); border-radius: var(--ve-radius-control); }
.ve-submenu .nav-link:hover { background: var(--ve-page); color: var(--ve-heading); }
.ve-submenu .nav-link.active { background: var(--ve-primary-soft) !important; color: var(--ve-primary-ink) !important; font-weight: 500; }