/* ═══════════════════════════════════════════════════════════════
   SIDEBAR MODERN — overhaul sidenav (struktur + visual)
   Dimuat setelah theme style.css & dark-theme.css (menang cascade).
   Light mode di-scope html:not([data-theme="dark"]) agar dark mode
   (dark-theme.css + rule di bawah) selalu konsisten.
   ═══════════════════════════════════════════════════════════════ */

/* ── ACCENT MENGIKUTI PRESET TEMA ──────────────────────────────
   body[data-nav-theme] dirender server (verticalLayoutMaster) dan
   di-update live oleh modal Pengaturan. Default = Brand (navbar navy, aksen gold solid). */
body {
    --menu-accent: #c77f1d;
    --menu-accent-2: #c77f1d;
    --menu-accent-soft: rgba(199, 127, 29, 0.12);
    --menu-accent-strong: rgba(199, 127, 29, 0.30);
    --menu-accent-text: #a5701a;
}
body[data-nav-theme="navbar-brand-solid"] {
    --menu-accent: #c77f1d;
    --menu-accent-2: #c77f1d;
    --menu-accent-soft: rgba(199, 127, 29, 0.12);
    --menu-accent-strong: rgba(199, 127, 29, 0.30);
    --menu-accent-text: #a5701a;
}
body[data-nav-theme="gradient-45deg-green-teal"] {
    --menu-accent: #43a047;
    --menu-accent-2: #1de9b6;
    --menu-accent-soft: rgba(67, 160, 71, 0.12);
    --menu-accent-strong: rgba(67, 160, 71, 0.3);
    --menu-accent-text: #2e7d32;
}
body[data-nav-theme="gradient-45deg-indigo-purple"] {
    --menu-accent: #3949ab;
    --menu-accent-2: #7b1fa2;
    --menu-accent-soft: rgba(57, 73, 171, 0.12);
    --menu-accent-strong: rgba(57, 73, 171, 0.3);
    --menu-accent-text: #303f9f;
}
body[data-nav-theme="gradient-45deg-light-blue-cyan"] {
    --menu-accent: #0288d1;
    --menu-accent-2: #26c6da;
    --menu-accent-soft: rgba(2, 136, 209, 0.12);
    --menu-accent-strong: rgba(2, 136, 209, 0.3);
    --menu-accent-text: #0277bd;
}
body[data-nav-theme="gradient-45deg-indigo-light-blue"] {
    --menu-accent: #3949ab;
    --menu-accent-2: #4fc3f7;
    --menu-accent-soft: rgba(57, 73, 171, 0.12);
    --menu-accent-strong: rgba(57, 73, 171, 0.3);
    --menu-accent-text: #3949ab;
}
body[data-nav-theme="gradient-45deg-purple-deep-orange"] {
    --menu-accent: #8e24aa;
    --menu-accent-2: #ff6e40;
    --menu-accent-soft: rgba(142, 36, 170, 0.12);
    --menu-accent-strong: rgba(142, 36, 170, 0.3);
    --menu-accent-text: #8e24aa;
}
body[data-nav-theme="gradient-45deg-red-pink"] {
    --menu-accent: #e53935;
    --menu-accent-2: #f48fb1;
    --menu-accent-soft: rgba(229, 57, 53, 0.12);
    --menu-accent-strong: rgba(229, 57, 53, 0.3);
    --menu-accent-text: #e53935;
}

/* ── STRUKTUR / SCROLL FIX ─────────────────────────────────────
   Theme: .sidenav { top:64px; height:100% } → 64px konten bawah
   terpotong (fix calc hanya ada di hack IE/Firefox theme). */
@media (min-width: 994px) {
    .sidenav-main .sidenav#slide-out {
        top: 64px !important;
        height: calc(100% - 64px) !important;
    }
}
.sidenav-main {
    box-shadow: none !important;
}
.sidenav-main .sidenav,
.sidenav-main .sidenav.menu-shadow {
    box-shadow: none !important;
}

/* ── LIGHT MODE — panel & brand ── */
html:not([data-theme="dark"]) .sidenav-main {
    background: #fff !important;
    border-right: 1px solid #eef0f2;
}
html:not([data-theme="dark"]) .sidenav-main .sidenav {
    background: #fff !important;
}
html:not([data-theme="dark"]) .sidenav-main .brand-sidebar {
    background: #fff !important;
    box-shadow: none !important;
    border-bottom: 1px solid #eef0f2;
}
html:not([data-theme="dark"]) .sidenav-main .brand-sidebar span.logo-text {
    color: #263238 !important;
}
html:not([data-theme="dark"]) .sidenav-main .brand-sidebar .navbar-toggler i {
    color: #90a4ae !important;
}
html[data-theme="dark"] .sidenav-main {
    border-right: 1px solid var(--border-color, #363c44);
}

/* ── ITEM MENU — pill rounded, spacing modern (kedua mode) ── */
.sidenav-main .sidenav li > a,
.sidenav-main .sidenav li a.collapsible-header {
    border-radius: 10px !important;
    margin: 2px 10px !important;
    padding: 0 14px !important;
    height: 44px;
    line-height: 44px;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: none !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.sidenav-main .sidenav li > a > i.material-icons,
.sidenav-main .sidenav li a.collapsible-header > i.material-icons {
    font-size: 1.3rem;
    margin: 0 14px 0 0;
    transition: color 0.15s ease;
}

/* Warna — light mode */
html:not([data-theme="dark"]) .sidenav-main .sidenav li > a {
    color: #455a64 !important;
}
html:not([data-theme="dark"]) .sidenav-main .sidenav li a i.material-icons {
    color: #78909c !important;
}
html:not([data-theme="dark"]) .sidenav-main .sidenav li > a:not(.active):hover {
    background: #f5f7f9 !important;
}

/* ── ACTIVE STATE ── */
/* Item aktif (leaf) — pill solid navy + garis indikator amber */
html:not([data-theme="dark"]) .sidenav-main .sidenav a.active {
    position: relative;
    background: var(--menu-accent) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px var(--menu-accent-strong) !important;
    border-radius: 10px !important;
}
html:not([data-theme="dark"]) .sidenav-main .sidenav a.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #234465;
}
html:not([data-theme="dark"]) .sidenav-main .sidenav a.active i.material-icons {
    color: #fff !important;
}
/* Grup induk yang punya anak aktif — tint lembut */
html:not([data-theme="dark"]) .sidenav-main .sidenav > li.active > a:not(.active) {
    background: var(--menu-accent-soft) !important;
    color: var(--menu-accent-text) !important;
}
html:not([data-theme="dark"]) .sidenav-main .sidenav > li.active > a:not(.active) i.material-icons {
    color: var(--menu-accent) !important;
}
/* Matikan bg lavender template pada li submenu aktif (pill di anchor sudah cukup) */
.sidenav-main .sidenav .collapsible-body > ul:not(.collapsible) > li.active {
    background: transparent !important;
}

/* Dark mode — active (tetap mengikuti accent preset, versi lembut) */
html[data-theme="dark"] .sidenav-main .sidenav a.active {
    background: var(--menu-accent-soft) !important;
    color: var(--menu-accent-2) !important;
    box-shadow: none !important;
    border-radius: 10px !important;
}
html[data-theme="dark"] .sidenav-main .sidenav a.active i.material-icons {
    color: var(--menu-accent-2) !important;
}
html[data-theme="dark"] .sidenav-main .sidenav > li.active > a:not(.active) {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--menu-accent-2) !important;
}
html[data-theme="dark"] .sidenav-main .sidenav > li.active > a:not(.active) i.material-icons {
    color: var(--menu-accent-2) !important;
}

/* ── SUBMENU ── */
.sidenav-main .sidenav .collapsible-body {
    background: transparent !important;
}
html:not([data-theme="dark"]) .sidenav-main .sidenav .collapsible-body {
    background: #fafbfc !important;
}
html[data-theme="dark"] .sidenav-main .sidenav .collapsible-body {
    background: rgba(0, 0, 0, 0.15) !important;
}
.sidenav-main .sidenav .collapsible-body li > a {
    font-size: 0.84rem;
    height: 40px;
    line-height: 40px;
    padding: 0 14px 0 26px !important;
}
.sidenav-main .sidenav .collapsible-body li > a > i.material-icons {
    font-size: 0.6rem;
    margin: 0 12px 0 0;
}

/* ── NAV HEADER — label section kecil uppercase ── */
.sidenav-main .sidenav li.navigation-header {
    margin: 14px 0 2px;
    padding: 0 24px;
}
.sidenav-main .sidenav .navigation-header-text {
    font-size: 0.67rem !important;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
html:not([data-theme="dark"]) .sidenav-main .sidenav .navigation-header-text {
    color: #90a4ae !important;
}

/* ── BADGE ── */
.sidenav-main .sidenav span.badge.pill {
    border-radius: 999px !important;
    font-size: 0.66rem;
    font-weight: 700;
}

/* ── COLLAPSED RAIL (ciut, ≥994px) ─────────────────────────────
   Ikon terpusat + indikasi menu aktif + badge jadi dot.
   :not(.nav-expanded) = tidak berlaku saat hover-expand. */
@media (min-width: 994px) {
    .sidenav-main.nav-collapsed:not(.nav-expanded) .sidenav li > a,
    .sidenav-main.nav-collapsed:not(.nav-expanded) .sidenav li a.collapsible-header {
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        margin: 2px 10px !important;
    }
    .sidenav-main.nav-collapsed:not(.nav-expanded) .sidenav li > a i.material-icons,
    .sidenav-main.nav-collapsed:not(.nav-expanded) .sidenav li a.collapsible-header i.material-icons {
        margin: 0 !important;
        float: none !important;
        width: auto;
        height: auto;
        line-height: 1;
    }
    .sidenav-main.nav-collapsed:not(.nav-expanded) .sidenav > li {
        position: relative;
    }
    /* Section header di rail → garis pemisah tipis antar kelompok ikon.
       !important juga mengalahkan inline style dari JS mouseleave template.
       Teks & ikon header sudah display:none dari template. */
    .sidenav-main.nav-collapsed:not(.nav-expanded) .sidenav li.navigation-header {
        height: 1px !important;
        min-height: 0 !important;
        margin: 6px 16px !important;
        padding: 0 !important;
        background: rgba(120, 144, 156, 0.25) !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: hidden !important;
        line-height: 0 !important;
    }
    html[data-theme="dark"] .sidenav-main.nav-collapsed:not(.nav-expanded) .sidenav li.navigation-header {
        background: rgba(255, 255, 255, 0.08) !important;
    }
    /* Napas kecil di bawah brand agar ikon pertama tidak menempel */
    .sidenav-main.nav-collapsed:not(.nav-expanded) .sidenav#slide-out {
        padding-top: 6px;
    }
    /* Matikan kotak abu template pada grup yang tadinya terbuka
       (.sidenav-active-*.nav-collapsed li.close { background: rgba(0,0,0,.08) }) */
    .sidenav-main.nav-collapsed .sidenav > li.close,
    .sidenav-main.nav-collapsed .sidenav > li.close > a:not(.active) {
        background: transparent !important;
    }
    /* Accent bar kiri + tint pada grup/item yang aktif — ikut preset tema */
    .sidenav-main.nav-collapsed:not(.nav-expanded) .sidenav > li.active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 10px;
        bottom: 10px;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--menu-accent-2);
        z-index: 2;
    }
    .sidenav-main.nav-collapsed:not(.nav-expanded) .sidenav > li.active > a:not(.active) {
        background: var(--menu-accent-soft) !important;
    }
    .sidenav-main.nav-collapsed:not(.nav-expanded) .sidenav > li.active > a:not(.active) i.material-icons {
        color: var(--menu-accent) !important;
    }
    html[data-theme="dark"] .sidenav-main.nav-collapsed:not(.nav-expanded) .sidenav > li.active > a:not(.active) {
        background: var(--menu-accent-soft) !important;
    }
    html[data-theme="dark"] .sidenav-main.nav-collapsed:not(.nav-expanded) .sidenav > li.active > a:not(.active) i.material-icons {
        color: var(--menu-accent-2) !important;
    }
    /* Badge count → dot kecil di pojok ikon */
    .sidenav-main.nav-collapsed:not(.nav-expanded) .sidenav span.badge.pill {
        display: block !important;
        position: absolute;
        top: 7px;
        right: 13px;
        width: 9px;
        height: 9px;
        min-width: 9px;
        padding: 0 !important;
        border-radius: 50% !important;
        font-size: 0 !important;
        line-height: 0;
    }
}

/* ── PERFECT SCROLLBAR ── */
.sidenav-main .ps__rail-y {
    background: transparent !important;
    width: 8px;
}
.sidenav-main .ps__thumb-y {
    background: #cfd8dc !important;
    width: 4px !important;
}
html[data-theme="dark"] .sidenav-main .ps__thumb-y {
    background: #454d57 !important;
}

/* ── BRAND MARK ── */
.brand-sidebar .logo-wrapper a.brand-logo {
    display: flex !important;
    align-items: center;
    gap: 9px;
}
.brand-sidebar .logo-wrapper a.brand-logo .brand-logo-full {
    display: block;
    height: 30px;
    width: 150px;
    flex: 0 0 auto;
    background: url('/images/logo/hasklik-logo.svg?v=2') left center / contain no-repeat;
}
.brand-sidebar .logo-wrapper a.brand-logo .brand-logo-mark {
    display: none;
    height: 30px;
    width: 30px;
    flex: 0 0 auto;
    background: url('/images/logo/hasklik-mark.svg?v=2') center / contain no-repeat;
}
html[data-theme="dark"] .brand-sidebar a.brand-logo .brand-logo-full {
    background-image: url('/images/logo/hasklik-logo-dark.svg?v=2');
}
html[data-theme="dark"] .brand-sidebar a.brand-logo .brand-logo-mark {
    background-image: url('/images/logo/hasklik-mark-dark.svg?v=2');
}
@media (min-width: 994px) {
    .sidenav-main.nav-collapsed:not(.nav-expanded) .brand-sidebar a.brand-logo .brand-logo-full {
        display: none;
    }
    .sidenav-main.nav-collapsed:not(.nav-expanded) .brand-sidebar a.brand-logo .brand-logo-mark {
        display: block;
        height: 28px;
        width: 28px;
        margin: 0 auto;
    }
}

/* ═══════════════════════════════════════════════════════════════
   NEUMORPHISM — Soft UI depth untuk sidebar (palette dipertahankan)
   Panel & item berbagi satu base tone; kedalaman dari dual shadow
   (highlight terang + shadow gelap). Aksen preset tetap.
   ═══════════════════════════════════════════════════════════════ */
html:not([data-theme="dark"]) {
    --sb-bg: #eaedf2;
    --sb-sh:    5px 5px 12px rgba(170,180,200,0.55), -5px -5px 11px #ffffff;
    --sb-sh-sm: 3px 3px 7px  rgba(170,180,200,0.5),  -3px -3px 6px  #ffffff;
    --sb-in:    inset 3px 3px 6px rgba(170,180,200,0.55), inset -3px -3px 6px #ffffff;
}

/* panel & brand berbagi base yang sama, tepi kanan jadi timbul lembut */
html:not([data-theme="dark"]) .sidenav-main,
html:not([data-theme="dark"]) .sidenav-main .sidenav,
html:not([data-theme="dark"]) .sidenav-main .brand-sidebar {
    background: var(--sb-bg) !important;
    border-right: none !important;
    border-bottom: none !important;
}
html:not([data-theme="dark"]) .sidenav-main {
    box-shadow: 6px 0 18px rgba(170,180,200,0.35) !important;
}
html:not([data-theme="dark"]) .sidenav-main .brand-sidebar {
    box-shadow: 0 4px 10px rgba(170,180,200,0.22) !important;
}

/* hover item → timbul lembut */
html:not([data-theme="dark"]) .sidenav-main .sidenav li > a:not(.active):hover,
html:not([data-theme="dark"]) .sidenav-main .sidenav li a.collapsible-header:not(.active):hover {
    background: var(--sb-bg) !important;
    box-shadow: var(--sb-sh-sm) !important;
}

/* item aktif → pill accent tetap, tapi menonjol neumorphic */
html:not([data-theme="dark"]) .sidenav-main .sidenav a.active {
    box-shadow: var(--sb-sh) !important;
}

/* submenu → laci cekung ke dalam */
html:not([data-theme="dark"]) .sidenav-main .sidenav .collapsible-body {
    background: var(--sb-bg) !important;
    box-shadow: var(--sb-in) !important;
}

/* ── NEUMORPHISM — DARK ── */
html[data-theme="dark"] {
    --sb-bg: #1c2128;
    --sb-sh:    5px 5px 12px rgba(0,0,0,0.5),  -4px -4px 10px rgba(255,255,255,0.03);
    --sb-sh-sm: 3px 3px 7px  rgba(0,0,0,0.45), -3px -3px 6px  rgba(255,255,255,0.025);
    --sb-in:    inset 3px 3px 6px rgba(0,0,0,0.5), inset -3px -3px 6px rgba(255,255,255,0.03);
}
html[data-theme="dark"] .sidenav-main {
    border-right: none !important;
    box-shadow: 5px 0 16px rgba(0,0,0,0.4) !important;
}
html[data-theme="dark"] .sidenav-main .brand-sidebar {
    border-bottom: none !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}
html[data-theme="dark"] .sidenav-main .sidenav li > a:not(.active):hover,
html[data-theme="dark"] .sidenav-main .sidenav li a.collapsible-header:not(.active):hover {
    background: var(--sb-bg) !important;
    box-shadow: var(--sb-sh-sm) !important;
}
html[data-theme="dark"] .sidenav-main .sidenav a.active {
    box-shadow: var(--sb-sh) !important;
}
html[data-theme="dark"] .sidenav-main .sidenav .collapsible-body {
    box-shadow: var(--sb-in) !important;
}