/* ==========================================================================
   Enterprise sidebar skin (nama file/class sage dipertahankan) — the single owner of sidebar COLORS.
   Structure/geometry lives in menu-flyout.css; this file only paints:
   brand gelap dari General Setting (--theme-color-1/2) — klasik & menyatu.
   ========================================================================== */

#layout-menu.sidebar-sage {
    --sb-bg: var(--theme-color-1, #0a5c41);
    --sb-surface: rgba(255, 255, 255, 0.08);
    --sb-panel: rgba(255, 255, 255, 0.05);
    --sb-ink: #ffffff;
    --sb-muted: rgba(255, 255, 255, 0.68);
    --sb-line: rgba(255, 255, 255, 0.16);
    --sb-chip: rgba(255, 255, 255, 0.10);
    --sb-chip-hover: rgba(255, 255, 255, 0.20);
    background: var(--sb-bg) !important;
    color: var(--sb-ink) !important;
    border-right: 1px solid var(--sb-line);
}

/* --- Brand ------------------------------------------------------------------ */
#layout-menu.sidebar-sage .menu-flyout-brand {
    min-height: 88px;
    padding: 20px 16px;
    background: transparent;
    border-bottom: 1px solid var(--sb-line);
}

#layout-menu.sidebar-sage .app-brand-logo {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: var(--theme-color-2, #117956) !important;
}

#layout-menu.sidebar-sage .app-brand-text,
#layout-menu.sidebar-sage .app-brand-text span,
#layout-menu.sidebar-sage .app-brand-link {
    color: var(--sb-ink) !important;
}

#layout-menu.sidebar-sage .app-brand-text {
    letter-spacing: -.025em !important;
}

#layout-menu.sidebar-sage .app-brand-text small {
    color: var(--sb-muted) !important;
    font-size: 10px !important;
    letter-spacing: .02em !important;
}

#layout-menu.sidebar-sage .sidebar-collapse-toggle {
    background: transparent;
    color: var(--sb-ink);
    border-color: var(--sb-line);
    border-radius: 7px;
}

#layout-menu.sidebar-sage .sidebar-collapse-toggle:hover,
#layout-menu.sidebar-sage .sidebar-collapse-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--sb-line);
    color: var(--sb-ink);
}

/* --- User card ---------------------------------------------------------------- */
#layout-menu.sidebar-sage .sidebar-user-profile-wrapper {
    padding: 16px 12px !important;
    background: transparent;
    border: 0;
}

#layout-menu.sidebar-sage .sidebar-user-card {
    padding: 10px !important;
    border: 1px solid var(--sb-line) !important;
    border-radius: 10px !important;
    background: var(--sb-surface) !important;
    gap: 0;
}

#layout-menu.sidebar-sage .sidebar-user-card > .flex-shrink-0 > div {
    width: 34px !important;
    height: 34px !important;
    border-width: 1px !important;
    border-color: var(--sb-line) !important;
    color: var(--sb-ink) !important;
    font-size: 17px !important;
}

#layout-menu.sidebar-sage .sidebar-user-info {
    margin-left: 10px !important;
}

#layout-menu.sidebar-sage .sidebar-user-info .fw-bold {
    color: var(--sb-ink) !important;
    font-size: 12px !important;
}

#layout-menu.sidebar-sage .sidebar-user-info small {
    color: var(--sb-muted) !important;
    font-size: 9px !important;
    margin-top: 3px;
}

#layout-menu.sidebar-sage .sidebar-user-settings {
    min-height: 30px;
    padding: 5px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--sb-ink) !important;
}

/* --- Rail + buttons ------------------------------------------------------------ */
#layout-menu.sidebar-sage .menu-flyout-rail {
    padding: 0 12px 16px !important;
    background: var(--sb-bg);
    gap: 5px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.45) transparent;
}

#layout-menu.sidebar-sage .sidebar-section-label {
    padding: 6px 12px 8px;
    margin: 0;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--sb-muted);
    text-transform: uppercase;
}

#layout-menu.sidebar-sage .menu-flyout-divider {
    margin: 9px 10px;
    border-top-color: var(--sb-line);
}

#layout-menu.sidebar-sage .menu-flyout-btn {
    min-height: 44px;
    padding: 11px 12px;
    gap: 11px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
}

#layout-menu.sidebar-sage .menu-flyout-btn-label {
    font-size: 12px;
    font-weight: 600;
}

#layout-menu.sidebar-sage .menu-flyout-btn > i {
    font-size: 19px;
}

/* Chevron on group buttons; rotates when expanded. */
#layout-menu.sidebar-sage .menu-flyout-btn[data-sidebar-group]::after {
    content: '';
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    opacity: .65;
}

#layout-menu.sidebar-sage .menu-flyout-btn[aria-expanded="true"]::after {
    transform: rotate(45deg);
}

#layout-menu.sidebar-sage .menu-flyout-btn:hover,
#layout-menu.sidebar-sage .menu-flyout-btn:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--sb-line);
    color: var(--sb-ink);
}

#layout-menu.sidebar-sage .menu-flyout-btn.active,
#layout-menu.sidebar-sage .menu-flyout-btn[aria-expanded="true"] {
    background: var(--theme-color-2, #117956);
    border-color: var(--theme-color-2, #117956);
    color: #ffffff;
}

/* --- Expanded inline panel + chip grid ------------------------------------------ */
#layout-menu.sidebar-sage .menu-flyout-panel {
    margin: 0 0 7px;
    background: var(--sb-panel);
    border: 1px solid var(--sb-line);
    color: var(--sb-ink);
}

#layout-menu.sidebar-sage .mf-panel-header {
    padding: 12px 12px 6px;
    min-height: 32px;
}

#layout-menu.sidebar-sage .mf-panel-title {
    color: var(--sb-muted);
    font-size: 9px;
    letter-spacing: .1em;
}

#layout-menu.sidebar-sage .mf-panel-body {
    padding: 0 7px 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.45) transparent;
}

#layout-menu.sidebar-sage .mf-panel-body::-webkit-scrollbar {
    width: 6px;
}

#layout-menu.sidebar-sage .mf-panel-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 3px;
}

#layout-menu.sidebar-sage .mf-grid {
    gap: 0;
}

#layout-menu.sidebar-sage .mf-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 9px 3px 10px;
}

#layout-menu.sidebar-sage .mf-card + .mf-card {
    border-top: 1px solid var(--sb-line);
}

/* Judul grup = tombol accordion: ikon + nama + badge + chevron. */
#layout-menu.sidebar-sage .mf-card-title {
    padding: 6px 8px;
    margin: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--sb-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

#layout-menu.sidebar-sage .mf-card-title:hover,
#layout-menu.sidebar-sage .mf-card-title:focus-visible {
    background: var(--sb-chip-hover);
    color: var(--sb-ink);
}

#layout-menu.sidebar-sage .mf-card-title[aria-expanded="true"] {
    color: var(--sb-ink);
}

#layout-menu.sidebar-sage .mf-card-title i {
    font-size: 11px;
}

#layout-menu.sidebar-sage .mf-card-title > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: start;
}

/* Chevron grup — berputar saat terbuka (pola sama dgn tombol kategori). */
#layout-menu.sidebar-sage .mf-card-title::after {
    content: '';
    width: 5px;
    height: 5px;
    flex: 0 0 auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    opacity: .65;
}

#layout-menu.sidebar-sage .mf-card-title[aria-expanded="true"]::after {
    transform: rotate(45deg);
}

/* Badge jumlah menu di dalam grup. */
#layout-menu.sidebar-sage .mf-card-count {
    flex: 0 0 auto;
    min-width: 16px;
    padding: 1px 5px;
    border-radius: 999px;
    background: var(--sb-chip);
    color: var(--sb-muted);
    font-size: 9px;
    font-weight: 700;
    text-align: center;
}

#layout-menu.sidebar-sage .mf-card-title[aria-expanded="true"] .mf-card-count {
    background: var(--sb-chip-hover);
    color: var(--sb-ink);
}

/* Chip: pill satu kolom; label rata kiri, terbaca utuh (title utk yang sangat panjang). */
#layout-menu.sidebar-sage .mf-link {
    min-height: 28px;
    padding: 4px 11px;
    color: rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.25;
    background: var(--sb-chip);
    border-color: transparent;
    justify-content: flex-start;
    text-align: start;
}

#layout-menu.sidebar-sage .mf-link:hover,
#layout-menu.sidebar-sage .mf-link:focus-visible {
    background: var(--sb-chip-hover);
    border-color: transparent;
    color: var(--sb-ink);
}

#layout-menu.sidebar-sage .mf-link.active {
    background: var(--theme-color-2, #117956);
    color: #fff;
    border-color: var(--theme-color-2, #117956);
    font-weight: 600;
}

#layout-menu.sidebar-sage .mf-link .badge {
    font-size: 9px;
    padding: 1px 5px;
}

/* --- Focus ring ------------------------------------------------------------------ */
#layout-menu.sidebar-sage :is(a, button):focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: 2px;
    box-shadow: none !important;
}

/* ==========================================================================
   Collapsed desktop: icon rail + white flyout overlay.
   ========================================================================== */
@media (min-width: 1200px) {
    html.layout-menu-collapsed #layout-menu.sidebar-sage .sidebar-section-label {
        display: none;
    }

    html.layout-menu-collapsed #layout-menu.sidebar-sage .menu-flyout-brand {
        padding: 20px 8px;
    }

    html.layout-menu-collapsed #layout-menu.sidebar-sage .menu-flyout-rail {
        padding: 0 7px 16px !important;
        background: var(--sb-bg);
    }

    html.layout-menu-collapsed #layout-menu.sidebar-sage .menu-flyout-btn {
        padding: 10px 3px;
        gap: 5px;
        color: rgba(255, 255, 255, 0.85);
    }

    html.layout-menu-collapsed #layout-menu.sidebar-sage .menu-flyout-btn-label {
        font-size: 9px;
    }

    html.layout-menu-collapsed #layout-menu.sidebar-sage .menu-flyout-btn::after {
        display: none;
    }

    html.layout-menu-collapsed #layout-menu.sidebar-sage .menu-flyout-btn:hover,
    html.layout-menu-collapsed #layout-menu.sidebar-sage .menu-flyout-btn:focus-visible {
        background: rgba(255, 255, 255, 0.14);
        color: var(--sb-ink);
    }

    html.layout-menu-collapsed #layout-menu.sidebar-sage .menu-flyout-btn.active,
    html.layout-menu-collapsed #layout-menu.sidebar-sage .menu-flyout-btn[aria-expanded="true"] {
        background: var(--sb-ink);
        color: #ffffff;
    }

    html.layout-menu-collapsed #layout-menu.sidebar-sage .sidebar-user-profile-wrapper {
        padding: 12px 5px !important;
    }

    html.layout-menu-collapsed #layout-menu.sidebar-sage .sidebar-user-card {
        border: 0 !important;
        padding: 5px !important;
        background: transparent !important;
    }

    /* Flyout overlay: light card, list-mode links (not chips). */
    html.layout-menu-collapsed #layout-menu.sidebar-sage .menu-flyout-panel {
        margin: 0;
        background: #ffffff;
        border-color: var(--sb-line);
        border-radius: 0 12px 12px 0;
        box-shadow: 12px 0 32px rgba(10, 22, 40, .14);
    }

    /* Mega panel: semua grup terbuka — chevron tak relevan. */
    html.layout-menu-collapsed #layout-menu.sidebar-sage .mf-card-title {
        cursor: default;
    }

    html.layout-menu-collapsed #layout-menu.sidebar-sage .mf-card-title::after {
        display: none;
    }

    html.layout-menu-collapsed #layout-menu.sidebar-sage .mf-panel-header {
        padding: 20px 20px 12px;
    }

    html.layout-menu-collapsed #layout-menu.sidebar-sage .mf-panel-body {
        padding: 0 16px 20px;
    }

    html.layout-menu-collapsed #layout-menu.sidebar-sage .mf-grid {
        gap: 16px;
    }

    html.layout-menu-collapsed #layout-menu.sidebar-sage .mf-card {
        background: #fff;
        border: 1px solid #e3eaf3;
        border-radius: 8px;
        padding: 10px;
    }

    html.layout-menu-collapsed #layout-menu.sidebar-sage .mf-card + .mf-card {
        border-top: 1px solid #e3eaf3;
    }

    html.layout-menu-collapsed #layout-menu.sidebar-sage .mf-link {
        min-height: 32px;
        padding: 5px 9px;
        border-radius: 6px;
        background: transparent;
        justify-content: flex-start;
        text-align: start;
    }

    html.layout-menu-collapsed #layout-menu.sidebar-sage .mf-link:hover,
    html.layout-menu-collapsed #layout-menu.sidebar-sage .mf-link:focus-visible {
        background: #e6f2ec;
        color: var(--sb-ink);
    }

    html.layout-menu-collapsed #layout-menu.sidebar-sage .mf-link.active {
        background: var(--theme-color-2, #117956);
        border-color: var(--theme-color-2, #117956);
        color: #fff;
    }

    html.layout-menu-collapsed #layout-menu.sidebar-sage .mf-link-icon {
        display: inline-flex;
        color: var(--theme-color-1, #0a5c41);
    }
}

/* ==========================================================================
   Tablet/mobile offcanvas: sage surfaces, dark-on-light.
   ========================================================================== */
@media (max-width: 1199.98px) {
    #layout-menu.sidebar-sage .menu-flyout-rail {
        background: var(--sb-bg);
        border-bottom: 0;
    }

    #layout-menu.sidebar-sage .menu-flyout-panel {
        background: var(--sb-panel);
        border-color: var(--sb-line);
    }

    #layout-menu.sidebar-sage .mf-card {
        padding: 10px 5px;
    }

    #layout-menu.sidebar-sage .mf-link {
        min-height: 40px;
        font-size: 12px;
        justify-content: flex-start;
        text-align: start;
    }
}