/* Rapikan sidebar ala Oafindo: tanpa garis scrollbar + grup menu collapsible (toggle). */

/* Hilangkan garis vertikal (scrollbar) saat sidebar di-scroll */
.sidebar-nav, .sidebar, #employee-menu, #admin-menu-nav { scrollbar-width: none; -ms-overflow-style: none; }
.sidebar-nav::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
#employee-menu::-webkit-scrollbar,
#admin-menu-nav::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none; }

/* Header grup yang bisa diklik untuk buka/tutup */
.nav-group-toggle {
    display: flex !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.nav-group-toggle > .nav-group-text { flex: 1; min-width: 0; }

/* Pengaman: label menu tak pernah melipat jadi 2 baris (dipotong halus bila kepanjangan),
   supaya tinggi tiap baris menu selalu sama rata seperti Oafindo. */
.nav-group-text,
.nav-link > span:first-of-type {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-group-toggle .nav-caret {
    margin-left: auto;
    font-size: 10px;
    opacity: 0.55;
    transition: transform 0.2s ease;
}
.nav-group-toggle:hover .nav-caret { opacity: 0.9; }

/* Saat grup ditutup: sembunyikan daftar menunya + putar chevron */
.nav-section.collapsed .nav-list { display: none; }
.nav-section.collapsed .nav-group-toggle .nav-caret { transform: rotate(-90deg); }

/* Logo Bisatani lebih besar */
.sidebar-logo-full { height: 46px !important; }
.sidebar.collapsed .sidebar-logo-icon { height: 38px !important; }

/* ============================================
   BADGE NOTIFIKASI (bulatan merah) — SATU UKURAN untuk semua, rata kanan
   pada KOLOM YANG SAMA, seperti Oafindo.
   Dulu ukurannya beda-beda: badge item 31×21px (inline style `padding:2px 8px`,
   satu bahkan `1px 8px`) vs badge agregat header grup 18px. Badge item juga 22px
   lebih menjorok ke kanan daripada badge header, karena header punya chevron.
   ⚠️ `display` SENGAJA TIDAK diatur di sini: JS menyembunyikan badge dengan
   `style.display='none'` dan menampilkannya dengan 'inline-block'/'inline-flex'.
   Kalau display dipaksa lewat CSS !important, badge kosong ikut muncul terus.
   ============================================ */
.nav-group-badge,
.nav-link > span[style*="margin-left"] {
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    background: #ef4444 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 20px !important;
    text-align: center !important;
    align-items: center;
    justify-content: center;
}

/* Item menu tidak punya chevron, sedangkan header grup punya (10px + gap 12px).
   Beri jarak kanan 22px pada badge item supaya SEJAJAR dgn badge di header grup. */
.nav-link > span[style*="margin-left"] { margin-right: 22px !important; }

/* Mode rail (sidebar di-collapse jadi ikon): sembunyikan chevron & paksa grup terbuka */
.sidebar.collapsed .nav-caret { display: none; }
/* Teks header grup disembunyikan, sisakan ikonnya di tengah rail. (Dulu teksnya meluber
   keluar rail karena .nav-group-toggle memakai display:flex !important yang mengalahkan
   aturan `.sidebar.collapsed .nav-label { display:none }` di main.css.) */
.sidebar.collapsed .nav-group-text { display: none; }
.sidebar.collapsed .nav-group-toggle {
    justify-content: center;
    padding: 10px 0 !important;
    margin: 0 8px 3px !important;
}
.sidebar.collapsed .nav-group-icon { width: auto; }
.sidebar.collapsed .nav-group-badge { display: none !important; }
.sidebar.collapsed .nav-section.collapsed .nav-list { display: block; }

/* ============================================
   POLESAN TIPOGRAFI ala Oafindo (2026-07-04)
   Font Inter, ukuran & warna konsisten dgn app Oafindo:
   label kecil kalem, item abu redup, active = pill netral + ikon hijau.
   ============================================ */

/* Sidebar sedikit lebih lebar mengikuti font — konten utama otomatis bergeser
   (main.css pakai var --sidebar-width). Mode HP (≤992px) tetap off-canvas, tak terpengaruh. */
:root { --sidebar-width: 288px; }
@media (max-width: 576px) {
    /* Overlay di HP: jangan sampai menutup seluruh layar sempit */
    :root { --sidebar-width: min(288px, 85vw); }
}

/* Label section: "Menu", dst — kecil, tanpa uppercase berlebihan */
.nav-label {
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    text-transform: none !important;
    color: #64748b !important;
    padding: 0 25px;
    margin-bottom: 7px;
}

/* Header grup (toggle) tampil PERSIS seperti ITEM menu di Oafindo: ikon + teks + chevron,
   ukuran/warna/indentasi identik dgn .nav-link sehingga tepi kiri seluruh menu lurus. */
.nav-group-toggle {
    font-size: 15px !important;
    font-weight: 400 !important;
    letter-spacing: -0.18px !important;
    line-height: 22px;
    color: #bac5d1 !important;
    padding: 8px 12px !important;
    margin: 0 12px 3px !important;
    border-radius: 8px;
    gap: 10px !important;
}
.nav-group-toggle:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff !important; }

/* Ikon header grup: metrik sama persis dgn ikon item (.nav-link i) agar teks sejajar */
.nav-group-icon {
    flex: 0 0 auto;
    font-size: 17px !important;
    width: 21px;
    text-align: center;
    color: #bac5d1 !important;
}
.nav-group-toggle:hover .nav-group-icon { color: #ffffff !important; }
/* Grup yang memuat halaman aktif: ikon hijau brand — penanda posisi, seperti Oafindo */
.nav-section:has([data-page].active) > .nav-group-toggle { color: #ffffff !important; font-weight: 500 !important; }
.nav-section:has([data-page].active) > .nav-group-toggle .nav-group-icon { color: #4ade80 !important; }

/* Item menu — angka DIUKUR LANGSUNG dari sidebar erp.oafindo.com (2026-09-01) lalu
   dikonversi dari root 18px ke root 16px Bisatani (÷1,125):
     font 15,75→14px · weight 400 (aktif 500) · letter-spacing -0,18px · line-height 22,5→20px
     warna item lab(79,07 -1,30 -7,35) = #bac5d1 · warna aktif lab(97,68) = #f8f8f8
     baris padding 9→8px · gap ikon-teks 9→8px · radius 9→8px · ikon 16px sewarna teks
   ⚠️ PENYESUAIAN SELERA (permintaan user 2026-09-01, SENGAJA beda dari Oafindo):
   Oafindo terasa terlalu rapat untuk Bisatani → font dinaikkan 14→15px, line-height
   20→22px, padding baris 6→8px (tinggi baris 32→38px), gap 8→10px, ikon 16→17px.
   Kalau nanti diminta "persis Oafindo lagi", kembalikan ke angka di baris atas. */
.nav-link {
    font-size: 15px !important;
    font-weight: 400 !important;
    letter-spacing: -0.18px !important;
    line-height: 22px;
    color: #bac5d1 !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    gap: 10px;
}
.nav-link span { font-size: 15px !important; font-weight: 400 !important; }
.nav-link i { font-size: 17px !important; width: 21px; text-align: center; color: #bac5d1 !important; }
.nav-link:hover, .nav-link:hover span { color: #ffffff !important; }
.nav-link:hover i { color: #ffffff !important; }

/* Active: pill netral terang tipis (ala Oafindo) + teks putih + ikon hijau brand */
.nav-item.active .nav-link {
    background: rgba(255, 255, 255, 0.09) !important;
    color: #f8f8f8 !important;
    font-weight: 500 !important;
}
.nav-item.active .nav-link span { color: #f8f8f8 !important; font-weight: 500 !important; }
.nav-item.active .nav-link i { color: #4ade80 !important; }

/* Anak grup: garis panduan vertikal tipis di kiri (ala Oafindo) saat grup terbuka */
.nav-group-toggle + .nav-list {
    margin: 0 12px 0 24px;
    padding: 0 0 0 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.10);
}
.nav-group-toggle + .nav-list .nav-link { padding-left: 11px !important; }
/* Mode rail (sidebar ikon): garis & indent dilepas agar ikon tetap di tengah */
.sidebar.collapsed .nav-group-toggle + .nav-list { border-left: none; margin: 0; padding: 0 10px; }

/* Jarak antar section dirapatkan sedikit — ritme seperti Oafindo */
.nav-section { margin-bottom: 4px; }
.nav-section:has(> .nav-label:not(.nav-group-toggle)) { margin-bottom: 12px; }