/* =============================================================================
   Naturlife WMS — Redesign layer (Juli 2026)
   Tujuan: melepaskan "rasa" korporat Velzon menuju tampilan kasual & hangat,
   TANPA mengganti warna brand (#B65031 sudah jadi primary di app.min.css).

   Cara kerja: dimuat PALING AKHIR di head-css → menimpa token --vz-* Velzon
   (Velzon = Bootstrap 5.3, jadi komponennya membaca var ini) + sedikit aturan
   kelas untuk bentuk & bayangan. Revert: hapus satu baris <link> di head-css
   (atau kembali ke branch `sendy`). Tidak menyentuh struktur/markup.
   ========================================================================== */

:root{
  /* --- brand (dari #B65031) --- */
  --nl-brand:#B65031; --nl-brand-600:#A5462A; --nl-brand-700:#87361F;
  --nl-brand-050:#FBEFE9; --nl-brand-100:#F4DFD5; --nl-brand-200:#E9C6B7;
  --nl-brand-rgb:182,80,49;

  /* --- netral SEJUK (Skema A, 18 Jul) — abu netral dingin, kartu putih bersih ---
     Aksen brand terracotta dibiarkan sbg satu-satunya "pop"; kroma netral dijaga
     agar tidak muddy (keluhan lama: body oat, header tan, modal ke-tint). */
  --nl-ground:#F4F5F7; --nl-ground-2:#ECEEF3; --nl-card:#FFFFFF; --nl-card-2:#FAFBFC;
  --nl-border:#E4E7EE; --nl-border-2:#D6DAE3;
  --nl-ink:#1E2330; --nl-ink-2:#49505F; --nl-muted:#89909E;
  --nl-thead:#EDEFF4; /* header tabel — abu sejuk, tegas dari kartu putih TANPA tint tan */

  --nl-shadow:0 1px 2px rgba(30,35,55,.05), 0 8px 22px rgba(30,40,60,.07);
  --nl-shadow-lg:0 14px 40px rgba(30,40,60,.12);
  --nl-r:16px; --nl-r-sm:11px;

  /* --- timpa token Velzon/Bootstrap (light) --- */
  --vz-body-bg:var(--nl-ground);
  --vz-body-bg-rgb:244,245,247;
  --vz-secondary-bg:var(--nl-ground-2);
  --vz-tertiary-bg:var(--nl-ground-2);
  --vz-body-color:var(--nl-ink);
  --vz-body-color-rgb:30,35,48;
  --vz-heading-color:var(--nl-ink);
  --vz-emphasis-color:var(--nl-ink);
  --vz-secondary-color:var(--nl-ink-2);
  --vz-tertiary-color:var(--nl-muted);
  --vz-border-color:var(--nl-border);
  --vz-border-color-translucent:var(--nl-border);
  --vz-card-bg:var(--nl-card);
  --vz-card-cap-bg:var(--nl-card);
  --vz-card-border-color:var(--nl-border);
  --vz-dropdown-bg:var(--nl-card);
  --vz-dropdown-border-color:var(--nl-border);
  --vz-modal-bg:var(--nl-card);
  --vz-primary:var(--nl-brand);
  --vz-primary-rgb:var(--nl-brand-rgb);
  --vz-link-color:var(--nl-brand-600);
  --vz-link-hover-color:var(--nl-brand-700);
  --vz-border-radius:var(--nl-r-sm);
  --vz-border-radius-sm:9px;
  --vz-border-radius-lg:var(--nl-r);
}

/* Dark mode Velzon (toggle bulan di topbar) — cool-dark slate (selaras Skema A sejuk),
   aksen brand terracotta tetap sbg satu-satunya pop */
[data-bs-theme="dark"]{
  --nl-ground:#151922; --nl-ground-2:#10141B; --nl-card:#1D2430; --nl-card-2:#232B39;
  --nl-border:#2E3644; --nl-border-2:#3A4351;
  --nl-ink:#E8EBF1; --nl-ink-2:#C2C8D4; --nl-muted:#8A93A3;
  --nl-thead:#28303D; /* header tabel (dark) — lebih terang dari kartu spy terbaca sbg band */
  --nl-brand:#D6704C; --nl-brand-050:#3C2419; --nl-brand-100:#48291C; --nl-brand-200:#5A3325;
  --nl-shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 26px rgba(0,0,0,.4);
  --nl-shadow-lg:0 16px 44px rgba(0,0,0,.5);

  --vz-body-bg:var(--nl-ground); --vz-body-bg-rgb:21,25,34;
  --vz-secondary-bg:var(--nl-ground-2); --vz-tertiary-bg:var(--nl-ground-2);
  --vz-body-color:var(--nl-ink); --vz-body-color-rgb:232,235,241;
  --vz-heading-color:var(--nl-ink); --vz-emphasis-color:var(--nl-ink);
  --vz-secondary-color:var(--nl-ink-2); --vz-tertiary-color:var(--nl-muted);
  --vz-border-color:var(--nl-border); --vz-border-color-translucent:var(--nl-border);
  --vz-card-bg:var(--nl-card); --vz-card-cap-bg:var(--nl-card); --vz-card-border-color:var(--nl-border);
  --vz-dropdown-bg:var(--nl-card-2); --vz-modal-bg:var(--nl-card);
  --vz-primary:var(--nl-brand);
}

/* ---- ground & tipografi ---- */
body{
  background:
    radial-gradient(1100px 340px at 82% -12%, color-mix(in srgb, var(--nl-brand) 7%, transparent), transparent 60%),
    var(--nl-ground) !important;
  color:var(--nl-ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,.card-title{letter-spacing:-.01em}

/* ---- kartu: membulat, bayangan lembut hangat, garis tipis ---- */
.card{
  border:1px solid var(--nl-border) !important;
  border-radius:var(--nl-r) !important;
  box-shadow:var(--nl-shadow) !important;
  background:var(--nl-card);
}
.card .card-header{
  background:transparent !important;
  border-bottom-color:var(--nl-border) !important;
  padding-top:16px; padding-bottom:14px;
}
.card .card-footer{background:transparent !important; border-top-color:var(--nl-border) !important;}

/* ---- tombol: sedikit lebih bulat + interaksi ramah ----
   Radius diambil dari token --vz-border-radius (sudah = 11px), BUKAN dipaksa !important —
   supaya di dalam .input-group Bootstrap bisa menol-kan sudut-dalam (addon+input+tombol menyatu). */
.btn{font-weight:500; transition:transform .12s ease, box-shadow .12s ease, background .12s ease;}
.btn:active{transform:translateY(1px)}
.btn-primary{
  --vz-btn-bg:var(--nl-brand); --vz-btn-border-color:var(--nl-brand);
  --vz-btn-hover-bg:var(--nl-brand-600); --vz-btn-hover-border-color:var(--nl-brand-600);
  --vz-btn-active-bg:var(--nl-brand-700); --vz-btn-active-border-color:var(--nl-brand-700);
  box-shadow:0 6px 16px color-mix(in srgb, var(--nl-brand) 30%, transparent);
}
.btn-primary:hover{box-shadow:0 9px 22px color-mix(in srgb, var(--nl-brand) 42%, transparent);}
.btn-soft-primary,.btn-outline-primary{--vz-btn-color:var(--nl-brand-700);}

/* ---- badge: pil ---- */
.badge{border-radius:999px; font-weight:600; letter-spacing:.01em; padding:.4em .7em;}

/* ---- form: membulat + cincin fokus brand ----
   Radius TIDAK dipaksa di sini (biar --vz-border-radius token yg atur + Bootstrap menol-kan
   sudut-dalam di .input-group). Dulu !important di sini bikin addon+input+tombol tampak
   "kotak bulat asal disatukan" karena tiap elemen membulat penuh. */
.form-control,.form-select,.input-group-text{
  border-color:var(--nl-border-2);
  background-color:var(--nl-card-2);
}
/* Belt-and-suspenders: pastikan tepi-dalam grup benar-benar rata (menang atas sisa aturan). */
.input-group{border-radius:var(--nl-r-sm);}
.input-group > :not(:last-child):not(.dropdown-menu):not(.form-floating){
  border-top-right-radius:0; border-bottom-right-radius:0;}
.input-group > :not(:first-child):not(.dropdown-menu):not(.form-floating){
  border-top-left-radius:0; border-bottom-left-radius:0;}
.form-control:focus,.form-select:focus{
  border-color:var(--nl-brand);
  box-shadow:0 0 0 3.5px color-mix(in srgb, var(--nl-brand) 18%, transparent) !important;
}
.form-control::placeholder{color:var(--nl-muted)}

/* ---- tabel: lebih lega & lembut, header hangat ---- */
.table{--vz-table-border-color:var(--nl-border);}
.table>thead th, .table>thead td, .table-light th{
  background:var(--nl-thead) !important; color:var(--nl-ink-2) !important;
  font-size:11.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  border-bottom:1.5px solid var(--nl-border-2) !important;
}
.table>tbody>tr>td{padding-top:.72rem; padding-bottom:.72rem; border-color:var(--nl-border);}
.table-striped>tbody>tr:nth-of-type(odd)>*{--vz-table-accent-bg:color-mix(in srgb, var(--nl-ground-2) 55%, transparent);}

/* ---- input ANGKA di dalam tabel / input-group: jangan sampai menyusut ----
   `.form-control` di dalam `.input-group` boleh mengecil tanpa batas. Di kolom tabel yang
   sempit ia menyusut sampai ~52px, sementara "100.000" butuh 77px — angkanya terpotong
   tanpa tanda apa pun (keluhan user 5 Agu 2026, halaman Detail Procurement).

   PENTING: melebarkan KOLOM tidak menolong. Diukur di browser dengan CSS ini — pada lebar
   kolom 150/170/190/210/230/250px lebar inputnya TETAP 64px, karena yang menyusut inputnya,
   bukan kolomnya. Yang menolong hanya batas minimum di input itu sendiri.
   90px cukup untuk "1.000.000" (butuh 87px) — sengaja TIDAK lebih besar, lihat catatan wrap.

   ⚠️ SELEKTOR KEDUA WAJIB. Biang keladinya aturan Bootstrap sendiri:
       .input-group>.form-control{ ... min-width:0 }
   Spesifisitasnya 0,0,2,0 — `.nl-num-wide` sendirian (0,0,1,0) KALAH dan tak berpengaruh
   sama sekali. `.input-group > .nl-num-wide` menyamakan spesifisitas, dan karena berkas ini
   dimuat SESUDAH bootstrap.min.css, ia yang menang. Jangan disederhanakan jadi satu selektor. */
.nl-num-wide,
.input-group > .nl-num-wide{ min-width:90px; }

/* ⚠️ WAJIB berpasangan dgn .nl-num-wide. `.input-group` bawaan Bootstrap itu `flex-wrap:wrap`.
   Begitu input diberi lebar minimum dan ruang kolomnya kurang, addon satuan ("gram"/"pcs"/"Rp")
   TURUN KE BARIS BAWAH — tampilannya jadi kotak-angka menumpuk di atas kotak-satuan (laporan
   user 5 Agu 2026, percobaan pertama min-width 110px). `nowrap` membuat lebar minimum grup =
   input + addon, jadi kolomnya yang melebar (tabelnya sudah `.table-responsive`, tinggal
   digeser mendatar) — bukan addonnya yang pindah baris. */
.nl-num-group{ flex-wrap:nowrap; }

/* ---- dropdown / modal: membulat + bayangan ---- */
.dropdown-menu{border-radius:14px !important; border-color:var(--nl-border) !important; box-shadow:var(--nl-shadow-lg) !important; padding:6px;}
.dropdown-item{border-radius:9px;}
.modal-content{border-radius:18px !important; border-color:var(--nl-border) !important; box-shadow:var(--nl-shadow-lg);}

/* ---- topbar & main page ----
   Topbar & sidebar SENGAJA TIDAK ditimpa warnanya:
   - Sidebar (.app-menu): sudah terracotta brand dgn teks terang (data-sidebar="dark").
   - Topbar (#page-topbar): Velzon sudah menata via data-topbar — PUTIH di layout vertikal
     (data-topbar="light"), TERRACOTTA di layout horizontal (data-topbar="dark").
   Menimpa `.navbar-header` saja dulu bikin mode horizontal RUSAK: isi topbar di-container di
   tengah, jadi #page-topbar terracotta nyembul di kiri-kanan navbar-header yang jadi cream.
   Jadi cukup body & komponen yang dihangatkan; kromnya dibiarkan apa adanya. */
.page-content{background:transparent;}

/* ---- nav pills / tabs brand ---- */
.nav-tabs-custom .nav-link.active{color:var(--nl-brand-700);}
.nav-tabs-custom .nav-link.active::after{background:var(--nl-brand) !important;}
/* nav-pills AKTIF = latar brand terisi → teks WAJIB putih. (Dulu dipaksa brand-700 = teks gelap
   di atas terracotta, nyaris tak terbaca — mis. tab "Tracker Produk/Material".) */
.nav-pills .nav-link.active{background-color:var(--nl-brand) !important; color:#fff !important;}
.nav-pills .nav-link:not(.active){color:var(--nl-ink-2);}
.nav-pills .nav-link:not(.active):hover{color:var(--nl-brand);}

/* ---- scrollbar hangat ---- */
*{scrollbar-color:var(--nl-border-2) transparent;}
::-webkit-scrollbar-thumb{background:var(--nl-border-2); border-radius:99px;}

@media (prefers-reduced-motion:reduce){.btn,.card{transition:none !important;}}

/* =============================================================================
   CHROME SIDEBAR — 3 tema (customizer "Tampilan"): A terracotta / B charcoal / C terang
   Digerakkan atribut NATIVE `data-sidebar` yang diset customizer (localStorage 'nl-chrome'):
     A = dark  (terracotta penuh — default server)   B = charcoal   C = light (terang)
   Semua lewat token `--vz-vertical-menu-*` yang memang dibaca `.navbar-menu` — bukan lawan
   CSS minified. Logo gelap/terang ikut native (dark & light) + aturan khusus utk charcoal.
   ========================================================================== */

/* A (dark) — item aktif teks putih + pil putih transparan sedikit lebih tegas biar jelas terlihat
   di atas terracotta (Velzon default rgba .15 terlalu samar; prototipe yg disukai user ~.17–.2). */
:root[data-sidebar="dark"]{ --vz-vertical-menu-item-active-color:#FFFFFF; --vz-vertical-menu-item-active-bg:rgba(255,255,255,.2); }

/* A saat DARK MODE — Velzon build memakai abu #212529 utk sidebar dark di tema gelap, jadi identitas
   "terracotta penuh" hilang. Paksa tetap terracotta biar konsisten & beda jelas dari chrome B/C. */
:root[data-bs-theme="dark"][data-sidebar="dark"]{
  --vz-vertical-menu-bg:#B65031; --vz-vertical-menu-border:#B65031;
  --vz-vertical-menu-item-color:#FFFFFF;
  --vz-vertical-menu-item-bg:rgba(255,255,255,.15);
  --vz-vertical-menu-item-hover-color:#FFFFFF;
  --vz-vertical-menu-item-active-color:#FFFFFF;
  --vz-vertical-menu-item-active-bg:rgba(255,255,255,.16);
  --vz-vertical-menu-sub-item-color:#FFFFFF;
  --vz-vertical-menu-sub-item-hover-color:#FFFFFF;
  --vz-vertical-menu-sub-item-active-color:#FFFFFF;
  --vz-vertical-menu-title-color:rgba(255,255,255,.6);
}

/* B (charcoal) — netral slate sejuk; item aktif = SATU pil terracotta (aksen presisi) */
:root[data-sidebar="charcoal"]{
  --vz-vertical-menu-bg:#1E2432; --vz-vertical-menu-border:#1E2432;
  --vz-vertical-menu-item-color:#B9C0CE;
  --vz-vertical-menu-item-bg:rgba(255,255,255,.06);        /* hover bg */
  --vz-vertical-menu-item-hover-color:#FFFFFF;
  --vz-vertical-menu-item-active-color:#FFFFFF;
  --vz-vertical-menu-item-active-bg:var(--nl-brand);       /* pil terracotta */
  --vz-vertical-menu-sub-item-color:#9AA2B2;
  --vz-vertical-menu-sub-item-hover-color:#FFFFFF;
  --vz-vertical-menu-sub-item-active-color:#FFFFFF;
  --vz-vertical-menu-title-color:#6B7488;
}
/* charcoal = latar gelap → tampilkan logo terang (mirror perilaku data-sidebar=dark) */
[data-sidebar="charcoal"] .logo-dark{display:none;}
[data-sidebar="charcoal"] .logo-light{display:inline-block;}
[data-sidebar="charcoal"] .app-menu .navbar-brand-box .logo-dark{display:none;}
[data-sidebar="charcoal"] .app-menu .navbar-brand-box .logo-light{display:inline-block;}

/* C (light) — sidebar putih: buang tint BIRU korporat Velzon → tint brand (hover & pil aktif) */
:root[data-sidebar="light"]{
  --vz-vertical-menu-border:var(--nl-border);
  --vz-vertical-menu-item-color:var(--nl-ink-2);
  --vz-vertical-menu-item-bg:color-mix(in srgb, var(--nl-brand) 9%, transparent);   /* hover */
  --vz-vertical-menu-item-hover-color:var(--nl-brand-700);
  --vz-vertical-menu-item-active-color:var(--nl-brand-700);
  --vz-vertical-menu-item-active-bg:var(--nl-brand-050);   /* pil terracotta lembut */
  --vz-vertical-menu-sub-item-color:var(--nl-muted);
  --vz-vertical-menu-sub-item-hover-color:var(--nl-brand-700);
  --vz-vertical-menu-sub-item-active-color:var(--nl-brand-700);
  --vz-vertical-menu-title-color:var(--nl-muted);
}
/* C saat DARK MODE — sidebar putih janggal di app gelap → jadikan surface cool-dark + pil terracotta.
   (Token --nl-* sudah cool-dark di [data-bs-theme=dark]; brand-700 kurang kontras di gelap → pakai #fff.) */
:root[data-bs-theme="dark"][data-sidebar="light"]{
  --vz-vertical-menu-bg:var(--nl-card);
  --vz-vertical-menu-border:var(--nl-border);
  --vz-vertical-menu-item-color:var(--nl-ink-2);
  --vz-vertical-menu-item-bg:color-mix(in srgb, var(--nl-brand) 16%, transparent);
  --vz-vertical-menu-item-hover-color:#FFFFFF;
  --vz-vertical-menu-item-active-color:#FFFFFF;
  --vz-vertical-menu-item-active-bg:var(--nl-brand);
  --vz-vertical-menu-sub-item-color:var(--nl-muted);
  --vz-vertical-menu-sub-item-hover-color:#FFFFFF;
  --vz-vertical-menu-sub-item-active-color:#FFFFFF;
  --vz-vertical-menu-title-color:var(--nl-muted);
}
/* di kombinasi ini sidebar gelap → tampilkan logo TERANG (bukan logo gelap milik data-sidebar=light) */
[data-bs-theme="dark"][data-sidebar="light"] .logo-dark{display:none;}
[data-bs-theme="dark"][data-sidebar="light"] .logo-light{display:inline-block;}
[data-bs-theme="dark"][data-sidebar="light"] .app-menu .navbar-brand-box .logo-dark{display:none;}
[data-bs-theme="dark"][data-sidebar="light"] .app-menu .navbar-brand-box .logo-light{display:inline-block;}

/* =============================================================================
   MEMPERCANTIK SIDEBAR — bentuk, ritme spasi, state (hover/aktif), indikator,
   ikon, submenu berhierarki, mikro-interaksi. Warna-agnostik: membaca token
   --vz-vertical-menu-* yg sudah ditema-kan per chrome (A/B/C) & light/dark,
   jadi otomatis pas di semua. Tanpa ubah markup (revert = hapus blok ini).
   `cc`/`cc2` = warna kontras dari teks item utk garis/rail halus di semua tema.
   ========================================================================== */
.app-menu{
  --nl-cc: color-mix(in srgb, var(--vz-vertical-menu-item-color) 14%, transparent);
  --nl-cc2: color-mix(in srgb, var(--vz-vertical-menu-item-color) 8%, transparent);
}

/* ---- brand box: beri napas + garis pemisah halus ---- */
.app-menu .navbar-brand-box{
  padding-top:6px; padding-bottom:6px;
  border-bottom:1px solid var(--nl-cc);
  margin-bottom:6px;
}

/* ---- judul seksi: judul POLOS (0 padding/margin sendiri); jarak HANYA sebagai SPACE antar-section
   (margin-top). Struktur <ul> datar → separasi antar-grup paling bersih lewat margin-atas judul. ---- */
.app-menu .navbar-nav .menu-title{
  padding:0 20px !important; margin:18px 0 0 !important; height:auto !important; line-height:1.2;
  font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--vz-vertical-menu-title-color); opacity:.75;
}
.app-menu .navbar-nav .menu-title:first-child{ margin-top:2px !important; }
.app-menu .navbar-nav .menu-title span{ position:relative; }

/* ---- item menu utama: jadi PIL, padding nyaman, transisi halus ----
   ⚠️ PAKAI SELEKTOR KETURUNAN (`.navbar-nav .nav-link.menu-link`), JANGAN anak-langsung
   (`.navbar-nav > .nav-item > ...`). SimpleBar membungkus isi #navbar-nav ke `.simplebar-content`
   ~2 dtk setelah load → relasi anak-langsung PUTUS → pil/aktif hilang walau class .active tetap ada
   (bug "muncul lalu hilang" 22 Jul). `.menu-link` sudah cukup membedakan item induk dari sub-link. */
.app-menu .navbar-nav .nav-link.menu-link{
  position:relative;
  margin:2px 12px; padding:.56rem .8rem .56rem .85rem;
  border-radius:11px; gap:11px; font-weight:500; line-height:1.2;
  transition:background-color .17s ease, color .17s ease, transform .12s ease, box-shadow .17s ease;
}
.app-menu .navbar-nav .nav-link.menu-link > i,
.app-menu .navbar-nav .nav-link.menu-link > img{
  flex:0 0 auto; width:22px; font-size:1.02rem; text-align:center;
  opacity:.92; transition:transform .17s ease, opacity .17s ease;
}
.app-menu .navbar-nav .nav-link.menu-link > span{ letter-spacing:-.005em; }

/* hover: tint lembut + ikon menyala + geser tipis */
.app-menu .navbar-nav .nav-link.menu-link:hover{
  background:var(--vz-vertical-menu-item-bg);
  color:var(--vz-vertical-menu-item-hover-color);
}
.app-menu .navbar-nav .nav-link.menu-link:hover > i,
.app-menu .navbar-nav .nav-link.menu-link:hover > img{ transform:translateX(1px) scale(1.06); opacity:1; }

/* aktif: PIL terisi + bobot sedikit lebih tegas + indikator garis kiri + sedikit terangkat */
.app-menu .navbar-nav .nav-link.menu-link.active{
  background:var(--vz-vertical-menu-item-active-bg);
  color:var(--vz-vertical-menu-item-active-color);
  font-weight:600;
  box-shadow:0 3px 10px color-mix(in srgb, var(--vz-vertical-menu-item-active-bg) 55%, transparent);
}
.app-menu .navbar-nav .nav-link.menu-link.active > i,
.app-menu .navbar-nav .nav-link.menu-link.active > img{ opacity:1; }
.app-menu .navbar-nav .nav-link.menu-link.active::before{
  content:""; position:absolute; left:7px; top:50%; transform:translateY(-50%);
  width:3px; height:56%; border-radius:3px;
  background:var(--vz-vertical-menu-item-active-color); opacity:.85;
}

/* ---- caret submenu: Velzon menyembunyikannya → hidupkan + berputar saat terbuka ---- */
.app-menu .navbar-nav .nav-link.menu-link[data-bs-toggle="collapse"]::after{
  content:""; display:block !important; flex:0 0 auto; margin-left:auto;
  width:.46rem; height:.46rem; margin-right:2px;
  border-right:1.7px solid currentColor; border-bottom:1.7px solid currentColor;
  transform:rotate(-45deg); opacity:.55;
  transition:transform .22s ease, opacity .17s ease;
}
.app-menu .navbar-nav .nav-link.menu-link[data-bs-toggle="collapse"]:hover::after{ opacity:.9; }
.app-menu .navbar-nav .nav-link.menu-link[data-bs-toggle="collapse"][aria-expanded="true"]::after{ transform:rotate(45deg); opacity:.9; }

/* ---- submenu: hierarki jelas — rail konektor + item pil + penanda titik ---- */
.app-menu .navbar-nav .menu-dropdown{ margin:2px 0 4px; }
.app-menu .navbar-nav .menu-dropdown > .nav-sm{
  position:relative; margin-left:1.65rem; padding-left:.4rem;
  border-left:1.5px solid var(--nl-cc);
}
.app-menu .navbar-nav .nav-sm .nav-link{
  position:relative; display:flex; align-items:center; min-height:40px;   /* target sentuh HP */
  margin:1px 12px 1px 0;
  padding:.5rem .75rem .5rem 1.35rem !important;
  border-radius:9px; font-size:.85rem; line-height:1.25;
  transition:background-color .16s ease, color .16s ease, transform .12s ease;
}
/* penanda titik: dari Velzon (dash) → titik bulat rapi yg terisi saat hover/aktif */
.app-menu .navbar-nav .nav-sm .nav-link::before{
  content:""; width:6px; height:6px; border-radius:50%;
  border:1.5px solid currentColor; background:transparent;
  left:.3rem; top:50%; transform:translateY(-50%); margin:0;
  opacity:.5; transition:background-color .16s ease, opacity .16s ease;
}
.app-menu .navbar-nav .nav-sm .nav-link:hover{
  background:var(--vz-vertical-menu-item-bg);
  color:var(--vz-vertical-menu-sub-item-hover-color); transform:translateX(1px);
}
.app-menu .navbar-nav .nav-sm .nav-link:hover::before{ background:currentColor; opacity:.9; }
.app-menu .navbar-nav .nav-sm .nav-link.active{
  background:color-mix(in srgb, var(--vz-vertical-menu-item-active-bg) 60%, transparent);
  color:var(--vz-vertical-menu-sub-item-active-color); font-weight:600;
}
.app-menu .navbar-nav .nav-sm .nav-link.active::before{ background:currentColor; opacity:1; }

/* ---- scrollbar sidebar (SimpleBar) halus & senada ---- */
.app-menu .simplebar-scrollbar::before{ background:var(--vz-vertical-menu-item-color); opacity:.22; }
.app-menu .simplebar-scrollbar.simplebar-visible::before{ opacity:.4; }

/* ---- aksesibilitas: fokus keyboard terlihat ---- */
.app-menu .navbar-nav .nav-link:focus-visible{
  outline:2px solid var(--vz-vertical-menu-item-active-color); outline-offset:-2px; border-radius:11px;
}

/* ---- mode sidebar RINGKAS (icon-rail): jangan tampilkan caret/indikator garis ---- */
[data-sidebar-size="sm"] .app-menu .navbar-nav .nav-link.menu-link[data-bs-toggle="collapse"]::after,
[data-sidebar-size="sm"] .app-menu .navbar-nav .nav-link.menu-link.active::before{ display:none !important; }
[data-sidebar-size="sm"] .app-menu .navbar-nav .nav-link.menu-link{ margin-left:8px; margin-right:8px; }

@media (prefers-reduced-motion:reduce){
  .app-menu .nav-link, .app-menu .nav-link > i, .app-menu .nav-link > img,
  .app-menu .nav-link::after, .app-menu .nav-link::before{ transition:none !important; }
}

/* =============================================================================
   MEMPERCANTIK TOPBAR — tombol ikon konsisten & interaktif, badge rapi,
   area user berkelas, garis + elevasi halus. Warna-agnostik (token --vz-*/--nl-*).
   ========================================================================== */
#page-topbar{
  border-bottom:1px solid var(--vz-border-color);
  box-shadow:0 1px 2px rgba(30,40,60,.04);
}

/* tombol ikon topbar: hover tint + naik tipis + fokus terlihat */
#page-topbar .header-item > .btn-icon,
#page-topbar .btn-topbar{
  border-radius:12px !important;
  transition:background-color .16s ease, color .16s ease, transform .12s ease;
}
#page-topbar .header-item > .btn-icon:hover,
#page-topbar .btn-topbar:hover{
  background:var(--nl-ground-2) !important;
  color:var(--nl-brand) !important;
  transform:translateY(-1px);
}
#page-topbar .header-item > .btn-icon:active,
#page-topbar .btn-topbar:active{ transform:translateY(0); }
#page-topbar .header-item > .btn-icon:focus-visible,
#page-topbar .btn-topbar:focus-visible{
  outline:2px solid color-mix(in srgb, var(--nl-brand) 55%, transparent); outline-offset:2px;
}

/* hamburger: area sentuh membulat + hover senada */
#page-topbar .topnav-hamburger{ border-radius:12px; transition:background-color .16s ease; }
#page-topbar .topnav-hamburger:hover{ background:var(--nl-ground-2); }

/* badge notifikasi: cincin tipis biar bersih menempel di ikon */
#page-topbar .topbar-badge{
  box-shadow:0 0 0 2px var(--vz-header-bg, var(--nl-card));
  font-weight:700;
}

/* area user: hover halus + avatar bercincin */
#page-topbar .topbar-user > .btn{
  border-radius:12px; padding:.28rem .5rem;
  transition:background-color .16s ease;
}
#page-topbar .topbar-user > .btn:hover{ background:var(--nl-ground-2); }
#page-topbar .topbar-user .header-profile-user{
  border:2px solid color-mix(in srgb, var(--nl-brand) 30%, transparent);
  padding:1px; background:var(--nl-card);
}
#page-topbar .topbar-user .user-name-text{ font-weight:600; letter-spacing:-.01em; }

@media (prefers-reduced-motion:reduce){
  #page-topbar .btn-icon, #page-topbar .btn-topbar, #page-topbar .topnav-hamburger,
  #page-topbar .topbar-user > .btn{ transition:none !important; }
}

/* =============================================================================
   FIX SPA — sidebar collapsed: SimpleBar wrapper menutupi konten (blok klik)
   Saat navigasi Turbo (app.js tak jalan ulang → SimpleBar #navbar-nav TAK di-recalculate),
   `.simplebar-wrapper` bisa tetap selebar sidebar TERBUKA (~249px) walau sidebar sudah 70px →
   wrapper transparan itu menindih area konten & memblok klik tombol/aksi (mis. Create Procurement,
   Tambah Material). Paksa lebar #navbar-nav + wrapper SimpleBar = lebar collapsed (70px), seperti
   kondisi non-SPA. Flyout hover submenu tetap escape via posisi absolut (sama seperti non-SPA).
   ========================================================================== */
[data-sidebar-size="sm"] .app-menu #navbar-nav,
[data-sidebar-size="sm"] .app-menu #navbar-nav .simplebar-wrapper,
[data-sidebar-size="sm"] .app-menu #navbar-nav .simplebar-mask,
[data-sidebar-size="sm"] .app-menu #navbar-nav .simplebar-content-wrapper{
  width: var(--vz-vertical-menu-width-sm, 70px) !important;
  max-width: var(--vz-vertical-menu-width-sm, 70px) !important;
}

/* =============================================================================
   KOMPONEN TABEL BARU (.nl-dt) — 24 Jul 2026
   Gaya kartu "mengambang": header tabel abu sejuk, baris berjarak dengan hairline,
   pil status, tombol aksi ikon (hover berwarna), chip vendor, paginasi & search
   membulat aksen terracotta. OPT-IN: pasang class `nl-dt` pada .card pembungkus
   DataTables. Semua warna lewat token --nl-*/--vz-* → auto-adaptif dark mode.
   Dipakai pertama di Daftar Material; siap dirollout ke tabel utama lain.
   ========================================================================== */
.nl-dt.card{ border:1px solid var(--nl-border); border-radius:16px;
  box-shadow:0 1px 2px rgba(30,35,48,.04), 0 16px 34px -20px rgba(30,35,48,.20); overflow:hidden; }
.nl-dt .card-header{ background:var(--nl-card); border-bottom:1px solid var(--nl-border); padding:18px 22px 14px; }
.nl-dt .card-body{ padding:6px 10px 4px; overflow-x:auto; }

/* Toolbar tombol */
.nl-dt .card-header .btn{ border-radius:11px; font-weight:500; }
.nl-dt .card-header .btn-success{ background:var(--nl-brand); border-color:var(--nl-brand); color:#fff; }
.nl-dt .card-header .btn-success:hover{ background:var(--nl-brand-600); border-color:var(--nl-brand-600); color:#fff; }

/* DataTables: length + search + info */
.nl-dt .dataTables_wrapper .dataTables_length{ padding:8px 12px 2px; }
.nl-dt .dataTables_wrapper .dataTables_filter{ padding:8px 12px 2px; }
.nl-dt .dataTables_length select{ border-radius:9px !important; border:1px solid var(--nl-border-2); padding:5px 26px 5px 10px; }
.nl-dt .dataTables_filter input{ border-radius:11px; border:1px solid var(--nl-border-2); padding:8px 14px; min-width:230px; background:var(--nl-card); }
.nl-dt .dataTables_filter input:focus{ border-color:var(--nl-brand); box-shadow:0 0 0 3px rgba(var(--nl-brand-rgb),.12); outline:none; }
.nl-dt .dataTables_info{ color:var(--nl-muted); font-size:12.5px; padding:12px 22px; }
.nl-dt .dataTables_processing{ color:var(--nl-brand); font-weight:500; }

/* Tabel: hilangkan garis vertikal & striping bawaan → gaya bersih berjarak */
.nl-dt table.dataTable{ border-collapse:separate !important; border-spacing:0; border:none; margin:0 !important; }
.nl-dt table.dataTable.table-bordered > :not(caption) > * > *{ border-width:0 0 1px 0; }
.nl-dt table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > *{ box-shadow:none; --vz-table-accent-bg:transparent; }
.nl-dt table.dataTable thead th{ background:var(--nl-thead); color:var(--nl-muted); font-size:11.5px; font-weight:600;
  letter-spacing:.1px; border-top:1px solid var(--nl-border); border-bottom:1px solid var(--nl-border);
  padding:12px 14px; vertical-align:middle; white-space:nowrap; }
.nl-dt table.dataTable thead th:first-child{ padding-left:22px; border-top-left-radius:0; }
.nl-dt table.dataTable thead th:last-child{ padding-right:22px; text-align:center; }
.nl-dt table.dataTable thead th.sorting::before,
.nl-dt table.dataTable thead th.sorting::after,
.nl-dt table.dataTable thead th.sorting_asc::before,
.nl-dt table.dataTable thead th.sorting_desc::before,
.nl-dt table.dataTable thead th.sorting_asc::after,
.nl-dt table.dataTable thead th.sorting_desc::after{ opacity:.35; color:var(--nl-muted); }
.nl-dt table.dataTable tbody td{ border-bottom:1px solid var(--nl-border); border-top:none;
  padding:14px; vertical-align:middle; color:var(--nl-ink-2); font-size:13.5px; background:transparent; }
.nl-dt table.dataTable tbody td:first-child{ padding-left:22px; color:var(--nl-muted); font-variant-numeric:tabular-nums; }
.nl-dt table.dataTable tbody td:last-child{ padding-right:22px; }
.nl-dt table.dataTable tbody tr:hover td{ background:var(--nl-ground); }
.nl-dt table.dataTable tbody tr:last-child td{ border-bottom:none; }

/* Sel material (nama + SKU) */
.nl-dt .nl-mtl b{ display:block; color:var(--nl-ink); font-weight:600; font-size:14px; line-height:1.25; }
.nl-dt .nl-mtl small{ color:var(--nl-muted); font-size:12px; }

/* Dipakai (link modal) */
.nl-dt .nl-used{ display:inline-flex; align-items:center; gap:5px; color:var(--nl-brand-600); font-weight:500; text-decoration:none; font-size:13px; }
.nl-dt .nl-used:hover{ text-decoration:underline; }
.nl-dt .nl-used.zero{ color:var(--nl-muted); font-weight:400; }

/* Stok */
.nl-dt .nl-stock{ font-weight:600; color:var(--nl-ink); font-variant-numeric:tabular-nums; }
.nl-dt .nl-thr{ font-size:12.5px; color:var(--nl-ink-2); }

/* Pil status */
.nl-dt .nl-pill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px; }
.nl-dt .nl-pill .nl-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.nl-dt .nl-pill--on{ background:var(--vz-success-bg-subtle,#e2f3ed); color:var(--vz-success-text-emphasis,#0f6e56); }
.nl-dt .nl-pill--off{ background:var(--nl-ground-2); color:var(--nl-muted); }

/* Chip vendor */
.nl-dt .nl-chip{ display:inline-block; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  vertical-align:middle; font-size:11.5px; padding:3px 9px; border-radius:999px; background:var(--nl-brand-050); color:var(--nl-brand-700); }
.nl-dt .nl-more{ font-size:11.5px; color:var(--nl-muted); font-weight:500; margin-left:5px; }

/* Tombol aksi ikon */
.nl-dt .nl-act{ display:flex; align-items:center; justify-content:center; gap:7px; }
.nl-dt .nl-ib{ width:31px; height:31px; border-radius:9px; display:inline-grid; place-items:center;
  border:1px solid var(--nl-border-2); background:var(--nl-card); color:var(--nl-muted); cursor:pointer; transition:.12s; text-decoration:none; }
.nl-dt .nl-ib i{ font-size:15px; line-height:1; }
.nl-dt .nl-ib:hover{ transform:translateY(-1px); }
.nl-dt .nl-ib.v:hover{ background:var(--vz-info-bg-subtle,#e8f1fb); border-color:transparent; color:var(--vz-info-text-emphasis,#185fa5); }
.nl-dt .nl-ib.e:hover{ background:var(--nl-brand-050); border-color:transparent; color:var(--nl-brand); }
.nl-dt .nl-ib.s:hover{ background:var(--vz-success-bg-subtle,#e2f3ed); border-color:transparent; color:var(--vz-success-text-emphasis,#0f6e56); }
.nl-dt .nl-ib.d:hover{ background:var(--vz-danger-bg-subtle,#fbeae7); border-color:transparent; color:var(--vz-danger-text-emphasis,#a32d2d); }

/* Paginasi */
.nl-dt .dataTables_paginate{ padding:12px 18px; }
.nl-dt .dataTables_paginate .pagination{ gap:6px; margin:0; }
.nl-dt .dataTables_paginate .page-item .page-link{ border-radius:9px !important; border:1px solid var(--nl-border-2);
  color:var(--nl-ink-2); min-width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; }
.nl-dt .dataTables_paginate .page-item .page-link:hover{ background:var(--nl-ground); }
.nl-dt .dataTables_paginate .page-item.active .page-link{ background:var(--nl-brand); border-color:var(--nl-brand); color:#fff; }
.nl-dt .dataTables_paginate .page-item.disabled .page-link{ opacity:.45; }

/* ── Ringkasan vendor di modal "Pilih Material" (partial materials/partials/vendor-chips) ──
   Tabel modal ber-class `nowrap`, jadi daftar vendor yang panjang dulu memaksa baris
   melebar ke samping. Di sini nowrap DIBATALKAN khusus untuk sel material + nama vendor
   yang kepanjangan dipotong dengan ellipsis. */
#table-select-material td{ white-space: normal !important; }
#table-select-material td h5{ white-space: normal; }
.nl-vendors{ display:inline-flex; flex-wrap:wrap; gap:4px; align-items:center; vertical-align:middle; }
.nl-vendor-chip{
  max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  display:inline-block; vertical-align:bottom; font-weight:500;
}
.nl-vendor-more{ cursor:help; border:1px dashed var(--nl-border, #E4E7EE); font-weight:500; }

/* ── Kehadiran (presence): avatar user lain yang sedang online di topbar ──────────────
   Pola & ukuran mengikuti naturlife-master (public/css/master.css) supaya dua app konsisten.
   Warna avatar (--pc) dikirim server (hue stabil per user id). */
.presence{ display:flex; align-items:center; padding-left:6px; }
.presence[hidden]{ display:none !important; }
.pr-av{ position:relative; width:30px; height:30px; margin-left:-9px; }
.pr-av:first-child{ margin-left:0; }
/* wajah avatar: foto atau inisial; cincin sewarna topbar memberi jeda antar avatar bertumpuk */
.pr-face{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; overflow:hidden;
          font-size:11px; font-weight:700; color:#fff; letter-spacing:.02em; cursor:default;
          background:var(--pc,#2b7d94); box-shadow:0 0 0 2px var(--vz-header-bg, var(--nl-card));
          transition:transform .12s; }
.pr-av:hover{ z-index:70 !important; }
.pr-av:hover .pr-face{ transform:translateY(-2px); }
.pr-face img{ width:100%; height:100%; object-fit:cover; display:block; }
.pr-more .pr-face{ background:var(--nl-border-2); color:var(--nl-ink-2); font-size:11.5px; }
/* tooltip kartu — latar tinta, teks terang (kontras di mode terang & gelap) */
.pr-tip{ position:absolute; top:calc(100% + 9px); right:0; z-index:80; pointer-events:none;
         background:var(--nl-ink); color:var(--nl-card); padding:7px 11px; border-radius:10px;
         box-shadow:var(--nl-shadow-lg); white-space:nowrap; opacity:0; transform:translateY(-4px);
         transition:opacity .12s, transform .12s; display:flex; flex-direction:column; gap:2px; }
.pr-tip b{ font-weight:650; font-size:12px; }
.pr-tip span{ font-size:11px; opacity:.75; }
.pr-tip::after{ content:""; position:absolute; bottom:100%; right:11px; border:5px solid transparent;
                border-bottom-color:var(--nl-ink); }
.pr-av:hover .pr-tip{ opacity:1; transform:translateY(0); }

/* ── Skeleton saat pindah halaman (lihat layouts/turbo-spa + layouts/skeleton/*) ─────
   Ditampilkan HANYA untuk halaman yang pernah dibuka (markup-nya diambil dari kunjungan
   sebelumnya), jadi bentuknya selalu cocok dgn halaman tujuan — beda dari skeleton v1
   (dibuang 24 Jul) yang menebak bentuk dari URL sehingga sering meleset. */
#nl-skel-overlay{ position:absolute; inset:0; z-index:5; background:var(--nl-ground);
                  overflow:hidden; }   /* padding disalin dari .page-content via JS (turbo-spa) */
#nl-skel-overlay[hidden]{ display:none !important; }
.page-content{ position:relative; }   /* jangkar overlay agar menutup AREA KONTEN saja */

.sk{ background:var(--nl-ground-2); border-radius:6px; position:relative; overflow:hidden; }
.sk-line{ height:12px; }
.sk-circle{ width:38px; height:38px; border-radius:50%; flex:0 0 auto; }
.sk-btn{ width:150px; height:36px; border-radius:11px; }
.sk-thead{ background:var(--nl-thead); border-radius:10px; }
.sk-row{ border-bottom:1px solid var(--nl-border); }

/* Kilau bergerak — penanda "sedang memuat" tanpa teks. */
.sk::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
            background:linear-gradient(90deg, transparent,
                       color-mix(in srgb, var(--nl-card) 70%, transparent), transparent);
            animation:sk-shimmer 1.25s infinite; }
@keyframes sk-shimmer{ 100%{ transform:translateX(100%); } }
@media (prefers-reduced-motion:reduce){ .sk::after{ animation:none; } }