/* ============================================
   MakanBang — Sidebar Theme
   ============================================
   Light and dark sidebar theme overrides.
   Loaded globally on all pages after Metronic bundles.
   ============================================ */

/* ---------- Base Sidebar ---------- */
.aside-hoverable {
    font-size: 1rem;
}

.sidebar-menu-parent {
    font-size: 1.2rem !important;
    font-weight: 600 !important;
}

/* Sidebar menu items */
.aside .menu .menu-sub .menu-sub-accordion .menu-link {
    padding-left: 3.5rem !important;
}

.aside .menu .menu-item .menu-link .menu-title {
    font-weight: 500;
    font-size: 1.15rem;
}

.aside .menu .menu-item .menu-link.active .menu-title {
    font-weight: 600;
}

/* Active state: align left edge with non-active items */
.aside .menu .menu-item .menu-link.active {
    margin-left: 0;
    padding-left: 0.75rem;
}

.aside .menu .menu-item .menu-link {
    padding-left: 0.75rem;
    transition: background-color 0.2s ease;
}

/* Sub menu: reduce left indentation */
.aside .menu .menu-sub .menu-link {
    padding-left: 2rem !important;
}

/* Section title (category headers) */
.aside .menu .menu-item .menu-content {
    padding-left: 0.75rem;
    padding-bottom: 0.25rem !important;
}

.aside .menu .menu-item .menu-content .menu-section {
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 0.75rem;
}

/* ---------- Collapsed rail (aside-minimize, not hovered) ----------
   Metronic's aside-minimize only shrinks the outer .aside container (75px)
   via overflow:hidden — every element inside (#kt_aside_menu, .menu-item,
   .menu-link) keeps its full expanded-state box model. That leaves two
   problems, fixed together below:

   1. .menu-icon was rendering off-center in the visible 75px strip, because
      centering happens inside a still-230px-wide .menu-link, and the icon
      itself carries a fixed margin-right (space reserved for the now-hidden
      title) that shifts the "centered" content block.
   2. Section-label rows (Menu / Manajemen Data / Referensi Kit) fade their
      text to opacity:0 but keep the row's height, leaving an unexplained
      blank gap between icon groups.

   Fix: zero out #kt_aside_menu's own left padding, force .menu-link to the
   rail's actual visible width (75px) with centered content, hide the
   (already-invisible-but-space-consuming) title and any accordion arrow, and
   zero the icon's trailing margin. With that, .menu-item-head/.menu-link both
   start flush at the rail's left edge, so a plain 37.5px (half of 75px) is
   the true geometric center for both the icons and the group divider —
   verified by measuring rendered icon-center coordinates directly, not by
   assuming the CSS box model. Everything here is scoped to :not(:hover), so
   the normal expanded/hover-flyout layout is untouched. */
[data-kt-aside-minimize="on"] .aside.aside-hoverable:not(:hover) #kt_aside_menu {
    padding-left: 0 !important;
}

[data-kt-aside-minimize="on"] .aside.aside-hoverable:not(:hover) .menu-link {
    width: 75px !important;
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

[data-kt-aside-minimize="on"] .aside.aside-hoverable:not(:hover) .menu-link .menu-title,
[data-kt-aside-minimize="on"] .aside.aside-hoverable:not(:hover) .menu-link .menu-arrow {
    display: none !important;
}

[data-kt-aside-minimize="on"] .aside.aside-hoverable:not(:hover) .menu-link .menu-icon {
    margin-right: 0 !important;
    /* Metronic's own bundle overrides its default `.menu-icon{justify-content:
       center}` with a LATER `.menu-icon{justify-content:flex-start}` rule
       (same specificity, later source wins) — meant for expanded mode, where
       the icon should sit flush-left before the title text that follows it.
       That later rule still wins here too, packing the icon glyph against
       the left edge of .menu-icon's own box instead of centering it — the
       real, measured cause (confirmed via getBoundingClientRect: the glyph's
       center sat 6.5px left of the rail's true center) of icons reading as
       off-center only when NOT active (the .active variant below already
       forces its own justify-content:center as part of turning .menu-icon
       into a chip, which is why only inactive icons showed the bug). */
    justify-content: center !important;
}

/* .menu-icon's own margin-right is zeroed above, but its CHILD (.svg-icon,
   Metronic's icon wrapper) carries its OWN separate margin-right:.5rem —
   meant to gap the icon from the title text that follows it in expanded
   mode. That trailing-only margin is still part of .svg-icon's flex-item
   box when .menu-icon centers it, so it biases the visible glyph toward the
   left inside the centered box (worst-case in the plain 32px icon, where
   Metronic sized .menu-icon to exactly fit icon+margin, leaving zero slack
   to redistribute and pinning the glyph hard against the left edge). Zero
   it too so the glyph itself — not glyph-plus-invisible-trailing-space —
   is what gets centered. */
[data-kt-aside-minimize="on"] .aside.aside-hoverable:not(:hover) .menu-link .menu-icon .svg-icon {
    margin-right: 0 !important;
}

/* Active item: the .menu-link.active background-color naturally fills the
   entire (now 75px-wide, full row height) link box, reading as a full-width
   bar rather than a discrete "this icon is active" indicator. Shrink it to a
   compact centered chip instead — 44px/var(--mb-radius) matches the app's
   existing icon-chip convention (.mb-kpi-icon) — so only the icon itself
   carries the highlight. */
[data-kt-aside-minimize="on"] .aside.aside-hoverable:not(:hover) .menu-link.active {
    background: transparent !important;
}

[data-kt-aside-minimize="on"] .aside.aside-hoverable:not(:hover) .menu-link.active .menu-icon {
    width: 44px !important;
    height: 44px !important;
    background: var(--mb-primary, #2678c9) !important;
    border-radius: var(--mb-radius, 0.75rem) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* A group whose child route is active (.has-active-child) recolours its own
   icon glyph brand-blue elsewhere in this file — meant to read against the
   sidebar's plain background when expanded. In collapsed/icon-only mode the
   rule two blocks up ALSO paints that same icon's background brand-blue (the
   "active chip"), so the glyph and its background collide: an invisible
   blue-on-blue icon on any parent group whose current child page is active
   (reported: "level child diklik, icon parent tidak tampil"). Force the
   glyph to white in this one context only — same fix Metronic itself uses
   for its own default-blue active chip elsewhere, just scoped to collapsed
   mode so the expanded sidebar's brand-blue "this group is active" text
   colour is untouched. */
[data-kt-aside-minimize="on"] .aside.aside-hoverable:not(:hover) .menu-link.active .menu-icon i {
    color: #fff !important;
}

/* Centered via display:flex + justify-content:center — the exact same
   mechanism .menu-link uses for its icon (not a hardcoded left:37.5px +
   translate(-50%), and not margin:auto either). Two different centering
   *techniques* for two rows that need to line up is exactly the kind of
   thing that can resolve to different sub-pixels on some browser/zoom/DPR
   combination even when both measure to the same value here — using the
   identical mechanism removes that risk instead of trusting the arithmetic
   to match. The section text is hidden outright (rather than left at
   opacity:0) so it doesn't count as a second flex child fighting the
   divider for centering. */
[data-kt-aside-minimize="on"] .aside.aside-hoverable:not(:hover) .menu-item-head:has(.menu-section) {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 75px !important;
    min-height: 2rem;
}

[data-kt-aside-minimize="on"] .aside.aside-hoverable:not(:hover) .menu-item-head:has(.menu-section) .menu-content {
    display: none !important;
}

[data-kt-aside-minimize="on"] .aside.aside-hoverable:not(:hover) .menu-item-head:has(.menu-section)::after {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--mb-border, #e0e3e8);
}

/* Menu content padding */
.menu .menu-item .menu-content,
.aside-menu .menu .menu-item .menu-link {
    padding-right: 10px !important;
}

/* ---------- Search Bar ---------- */
.search {
    border: none;
    padding-left: 30px;
    padding-right: 30px;
    transition:
        background-color 0.2s,
        color 0.2s;
}

/* Light sidebar: search bar */
.aside-light .search {
    color: #3f4254 !important;
    background-color: #f5f8fa !important;
}

.aside-light .search::placeholder {
    color: #a1a5b7 !important;
}

.aside-light .search-icon,
.aside-light .clear-icon {
    color: #a1a5b7;
}

/* Dark sidebar: search bar */
.aside-dark .search {
    color: #e0e6f0 !important;
    background-color: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
}

/* Placeholder dinaikkan ke #8892a4 untuk kontras yang lebih baik */
.aside-dark .search::placeholder {
    color: #8892a4 !important;
}

.aside-dark .search-icon,
.aside-dark .clear-icon {
    color: #8892a4;
}

.search-icon,
.clear-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.search-icon {
    left: 10px;
}

.clear-icon {
    right: 10px;
}

/* ===========================================
   LIGHT SIDEBAR THEME
   Uses data-attribute [data-sidebar-theme="light"]
   set by JS for maximum specificity control
   =========================================== */

/* Base */
[data-sidebar-theme="light"]#kt_aside {
    border-right: 1px solid #eff2f5;
    background-color: #fff;
}

/* Explicit dark sidebar background — slight purple undertone selaras dengan mesh gradient global */
[data-sidebar-theme="dark"]#kt_aside {
    background-color: #1c1828;
    border-right: 1px solid #2a2440;
}

[data-sidebar-theme="light"] .aside-logo {
    border-bottom: 1px solid #eff2f5;
}

/* Dark logo area separator */
[data-sidebar-theme="dark"] .aside-logo {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Inner padding */
[data-sidebar-theme="light"] .aside-menu .menu {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Default: all menu links */
[data-sidebar-theme="light"] .menu-link .menu-title {
    color: #3d4465 !important;
    transition: color 0.2s ease;
}

[data-sidebar-theme="light"] .menu-link .menu-icon .svg-icon svg * {
    fill: #6c778f !important;
    transition: fill 0.2s ease;
}

[data-sidebar-theme="light"] .menu-link .menu-icon i {
    color: #6c778f !important;
    transition: color 0.2s ease;
}

[data-sidebar-theme="light"] .menu-link .menu-arrow {
    color: #6c778f !important;
    transition: color 0.2s ease;
}

[data-sidebar-theme="light"] .menu-link .menu-bullet .bullet {
    background-color: #6c778f !important;
    transition:
        background-color 0.2s ease,
        width 0.2s ease,
        height 0.2s ease;
}

/* Section labels — kontras diraikan ke #6b7185 untuk rasio ~4.5:1 (WCAG AA) */
[data-sidebar-theme="light"] .menu-content .menu-section {
    color: #6b7185 !important;
}

/* ---- DIRECT MENU active (Dashboard etc): solid blue pill ---- */
[data-sidebar-theme="light"]
    .menu-item:not(.menu-accordion)
    > .menu-link.active {
    background-color: #2678c9 !important;
    border-radius: 0.45rem;
}

[data-sidebar-theme="light"]
    .menu-item:not(.menu-accordion)
    > .menu-link.active
    .menu-title {
    color: #fff !important;
    font-weight: 600 !important;
}

[data-sidebar-theme="light"]
    .menu-item:not(.menu-accordion)
    > .menu-link.active
    .menu-icon
    .svg-icon
    svg
    * {
    fill: #fff !important;
}

[data-sidebar-theme="light"]
    .menu-item:not(.menu-accordion)
    > .menu-link.active
    .menu-icon
    i {
    color: #fff !important;
}

/* Bullet aktif pada direct menu (level atas) saja — putih karena bg biru */
[data-sidebar-theme="light"]
    .menu-item:not(.menu-accordion)
    > .menu-link.active
    .menu-bullet
    .bullet {
    background-color: #fff !important;
}

/* Sub-menu bullet aktif — biru lebih besar, jelas tanda halaman aktif */
[data-sidebar-theme="light"] .menu-sub .menu-link.active .menu-bullet .bullet {
    background-color: #2678c9 !important;
    width: 8px;
    height: 8px;
}

/* ---- PARENT with active child (has-active-child class set by JS) ---- */
[data-sidebar-theme="light"]
    .menu-item.has-active-child
    > .menu-link
    .menu-title {
    color: #2678c9 !important;
    font-weight: 600 !important;
}

[data-sidebar-theme="light"]
    .menu-item.has-active-child
    > .menu-link
    .menu-icon
    .svg-icon
    svg
    * {
    fill: #2678c9 !important;
}

[data-sidebar-theme="light"]
    .menu-item.has-active-child
    > .menu-link
    .menu-icon
    i {
    color: #2678c9 !important;
}

[data-sidebar-theme="light"]
    .menu-item.has-active-child
    > .menu-link
    .menu-arrow {
    color: #2678c9 !important;
}

/* ---- HOVER ---- */
[data-sidebar-theme="light"] .menu-link:not(.active):hover {
    background-color: #f1f5f9 !important;
    border-radius: 0.4rem;
}

[data-sidebar-theme="light"] .menu-link:not(.active):hover .menu-title {
    color: #2678c9 !important;
}

[data-sidebar-theme="light"]
    .menu-link:not(.active):hover
    .menu-icon
    .svg-icon
    svg
    * {
    fill: #2678c9 !important;
}

[data-sidebar-theme="light"] .menu-link:not(.active):hover .menu-icon i {
    color: #2678c9 !important;
}

[data-sidebar-theme="light"]
    .menu-link:not(.active):hover
    .menu-bullet
    .bullet {
    background-color: #2678c9 !important;
}

/* ===========================================
   DARK SIDEBAR THEME
   =========================================== */

/* Default text & icon color (dark sidebar) */
[data-sidebar-theme="dark"] .menu-link .menu-title {
    color: #c9d1e0 !important;
    transition: color 0.2s ease;
}

[data-sidebar-theme="dark"] .menu-link .menu-icon .svg-icon svg * {
    fill: #8f9bb3 !important;
    transition: fill 0.2s ease;
}

[data-sidebar-theme="dark"] .menu-link .menu-icon i {
    color: #8f9bb3 !important;
    transition: color 0.2s ease;
}

[data-sidebar-theme="dark"] .menu-link .menu-arrow {
    color: #8f9bb3 !important;
    transition: color 0.2s ease;
}

/* Inner padding */
[data-sidebar-theme="dark"] .aside-menu .menu {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Section labels dark — eksplisit agar tidak bergantung Metronic default */
[data-sidebar-theme="dark"] .menu-content .menu-section {
    color: #6a7490 !important;
}

/* ---- DIRECT MENU active (Dashboard etc): solid pill ---- */
[data-sidebar-theme="dark"]
    .menu-item:not(.menu-accordion)
    > .menu-link.active {
    background-color: #2678c9 !important;
    border-radius: 0.45rem;
}

/* Dark sub-menu aktif: tanpa background pill agar konsisten dengan light sidebar */
[data-sidebar-theme="dark"] .menu-sub .menu-link.active .menu-title {
    color: #4da3ff !important;
    font-weight: 600 !important;
}

[data-sidebar-theme="dark"]
    .menu-item:not(.menu-accordion)
    > .menu-link.active
    .menu-title {
    color: #fff !important;
    font-weight: 600 !important;
}

[data-sidebar-theme="dark"]
    .menu-item:not(.menu-accordion)
    > .menu-link.active
    .menu-icon
    .svg-icon
    svg
    * {
    fill: #fff !important;
}

[data-sidebar-theme="dark"]
    .menu-item:not(.menu-accordion)
    > .menu-link.active
    .menu-icon
    i {
    color: #fff !important;
}

[data-sidebar-theme="dark"] .menu-link .menu-bullet .bullet {
    background-color: #8f9bb3 !important;
    transition:
        background-color 0.2s ease,
        width 0.2s ease,
        height 0.2s ease;
}

/* Bullet aktif pada direct menu dark (level atas) — putih */
[data-sidebar-theme="dark"]
    .menu-item:not(.menu-accordion)
    > .menu-link.active
    .menu-bullet
    .bullet {
    background-color: #fff !important;
}

/* Sub-menu bullet aktif dark — biru lebih besar */
[data-sidebar-theme="dark"] .menu-sub .menu-link.active .menu-bullet .bullet {
    background-color: #4da3ff !important;
    width: 8px;
    height: 8px;
}

/* ---- PARENT with active child ---- */
[data-sidebar-theme="dark"]
    .menu-item.has-active-child
    > .menu-link
    .menu-title {
    color: #fff !important;
    font-weight: 600 !important;
}

[data-sidebar-theme="dark"]
    .menu-item.has-active-child
    > .menu-link
    .menu-icon
    .svg-icon
    svg
    * {
    fill: #fff !important;
}

[data-sidebar-theme="dark"]
    .menu-item.has-active-child
    > .menu-link
    .menu-icon
    i {
    color: #fff !important;
}

[data-sidebar-theme="dark"]
    .menu-item.has-active-child
    > .menu-link
    .menu-arrow {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ---- HOVER ---- */
[data-sidebar-theme="dark"] .menu-link:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    border-radius: 0.4rem;
}

[data-sidebar-theme="dark"] .menu-link:not(.active):hover .menu-title {
    color: #fff !important;
}

[data-sidebar-theme="dark"]
    .menu-link:not(.active):hover
    .menu-icon
    .svg-icon
    svg
    * {
    fill: #fff !important;
}

[data-sidebar-theme="dark"] .menu-link:not(.active):hover .menu-icon i {
    color: #fff !important;
}

[data-sidebar-theme="dark"] .menu-link:not(.active):hover .menu-bullet .bullet {
    background-color: rgba(255, 255, 255, 0.6) !important;
}

/* ===========================================
   CUSTOM SCROLLBAR
   =========================================== */

/* Light sidebar scrollbar */
[data-sidebar-theme="light"] .hover-scroll-overlay-y::-webkit-scrollbar,
[data-sidebar-theme="light"] .aside-menu::-webkit-scrollbar {
    width: 4px;
}

[data-sidebar-theme="light"] .hover-scroll-overlay-y::-webkit-scrollbar-track,
[data-sidebar-theme="light"] .aside-menu::-webkit-scrollbar-track {
    background: transparent;
}

[data-sidebar-theme="light"] .hover-scroll-overlay-y::-webkit-scrollbar-thumb,
[data-sidebar-theme="light"] .aside-menu::-webkit-scrollbar-thumb {
    background-color: #d1d5e0;
    border-radius: 4px;
}

[data-sidebar-theme="light"]
    .hover-scroll-overlay-y::-webkit-scrollbar-thumb:hover,
[data-sidebar-theme="light"] .aside-menu::-webkit-scrollbar-thumb:hover {
    background-color: #a1a5b7;
}

/* Dark sidebar scrollbar */
[data-sidebar-theme="dark"] .hover-scroll-overlay-y::-webkit-scrollbar,
[data-sidebar-theme="dark"] .aside-menu::-webkit-scrollbar {
    width: 4px;
}

[data-sidebar-theme="dark"] .hover-scroll-overlay-y::-webkit-scrollbar-track,
[data-sidebar-theme="dark"] .aside-menu::-webkit-scrollbar-track {
    background: transparent;
}

[data-sidebar-theme="dark"] .hover-scroll-overlay-y::-webkit-scrollbar-thumb,
[data-sidebar-theme="dark"] .aside-menu::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

[data-sidebar-theme="dark"]
    .hover-scroll-overlay-y::-webkit-scrollbar-thumb:hover,
[data-sidebar-theme="dark"] .aside-menu::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3);
}