/* ── Sembunyikan collapse button default Filament ── */
.fi-sidebar-collapse-btn,
button.fi-sidebar-collapse-btn,
[class*="sidebar-collapse"],
[class*="collapse-btn"],
nav button[title*="collapse"],
nav button[title*="Collapse"],
.fi-sidebar > button,
.fi-sidebar-header button,
.fi-sidebar-header > button:last-child {
    position: fixed !important;
    top: -9999px !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* ── Sidebar ── */
.fi-sidebar {
    background: #ffffff !important;
    border-right: 1px solid #f0f0f0 !important;
    box-shadow: 2px 0 20px rgba(0,0,0,0.05) !important;
    overflow: visible !important;
    transition: width 0.3s ease !important;
}

/* ── Brand logo fix ── */
.fi-sidebar-header,
.fi-sidebar .fi-logo,
[class*="fi-sidebar"] [class*="brand"],
[class*="fi-sidebar"] [class*="logo"] {
    overflow: visible !important;
    padding: 0.75rem 1rem !important;
}

.fi-sidebar-header > a,
.fi-sidebar-header > div,
.fi-logo {
    width: 100% !important;
    overflow: visible !important;
}

/* ── Semua nav item ── */
.fi-sidebar-nav .fi-sidebar-item a,
.fi-sidebar-nav .fi-sidebar-item button {
    border-radius: 10px !important;
    padding: 0.3rem 0.9rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #374151 !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    margin: 1px 0 !important;
}

.fi-sidebar-nav .fi-sidebar-item a *,
.fi-sidebar-nav .fi-sidebar-item button * {
    color: inherit !important;
}

/* ── Hover ── */
.fi-sidebar-nav .fi-sidebar-item a:hover,
.fi-sidebar-nav .fi-sidebar-item button:hover {
    background: #f0fdf4 !important;
    color: #15803d !important;
}
.fi-sidebar-nav .fi-sidebar-item a:hover svg,
.fi-sidebar-nav .fi-sidebar-item button:hover svg {
    color: #16a34a !important;
}

/* ── Active ── */
.fi-sidebar-nav .fi-sidebar-item a[aria-current],
.fi-sidebar-nav .fi-sidebar-item a[aria-current="page"],
.fi-sidebar-nav .fi-sidebar-item a.fi-active,
.fi-sidebar-nav .fi-sidebar-item button.fi-active,
.fi-active .fi-sidebar-item-button,
.fi-sidebar-item.fi-active > a,
.fi-sidebar-item.fi-active button,
[class*="fi-sidebar-item"] [aria-current="page"] {
    background: #16a34a !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(22,163,74,0.35) !important;
}

.fi-sidebar-nav .fi-sidebar-item a[aria-current] *,
.fi-sidebar-nav .fi-sidebar-item a[aria-current="page"] *,
.fi-sidebar-nav .fi-sidebar-item a.fi-active *,
.fi-sidebar-nav .fi-sidebar-item button.fi-active *,
.fi-sidebar-item.fi-active > a *,
.fi-sidebar-item.fi-active button *,
[class*="fi-sidebar-item"] [aria-current="page"] * {
    color: #ffffff !important;
}

.fi-sidebar-nav .fi-sidebar-item a[aria-current] svg,
.fi-sidebar-nav .fi-sidebar-item a[aria-current="page"] svg,
.fi-sidebar-nav .fi-sidebar-item a.fi-active svg,
.fi-sidebar-nav .fi-sidebar-item button.fi-active svg,
.fi-sidebar-item.fi-active > a svg,
.fi-sidebar-item.fi-active button svg {
    color: #ffffff !important;
    fill: none !important;
    stroke: #ffffff !important;
}

/* ── Badge ── */
.fi-sidebar-item .fi-badge {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    padding: 1px 7px !important;
    border-radius: 999px !important;
    min-width: 20px !important;
    text-align: center !important;
}

.fi-sidebar-group {
    margin-top: 0 !important;
    padding-top: 0 !important;
    gap: 0 !important;
}
.fi-sidebar-group-items,
.fi-sidebar-nav > ul,
.fi-sidebar-nav > div {
    gap: 0 !important;
    row-gap: 0 !important;
}

/* ── Group label ── */
.fi-sidebar-group-label,
[class*="fi-sidebar-group"] > div > span,
.fi-sidebar-group > div:first-child span {
    font-size: 0.67rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.09em !important;
    text-transform: uppercase !important;
    color: #9ca3af !important;
    padding-top: 0.8rem !important;
    padding-bottom: 0.25rem !important;
    display: block !important;
}

/* ── Floating sidebar toggle button ── */
#sidebar-toggle-btn {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 260px !important;
    z-index: 39 !important; 
    width: 20px !important;
    height: 48px !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-left: none !important;
    border-radius: 0 8px 8px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 3px 0 10px rgba(0,0,0,0.08) !important;
    transition: background 0.15s ease !important;
}

#sidebar-toggle-btn:hover {
    background: #f0fdf4 !important;
    box-shadow: 3px 0 14px rgba(22,163,74,0.2) !important;
}

#sidebar-toggle-btn svg {
    width: 12px !important;
    height: 12px !important;
    color: #9ca3af !important;
    transition: color 0.15s ease, transform 0.3s ease !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
}

#sidebar-toggle-btn:hover svg {
    color: #16a34a !important;
}

#sidebar-toggle-btn.collapsed svg {
    transform: rotate(180deg) !important;
}

/* ── Main content background ── */
.fi-main { background: #f8fafc !important; }

/* ── Topbar ── */
.fi-topbar {
    border-bottom: 1px solid #f0f0f0 !important;
    box-shadow: 0 1px 8px rgba(0,0,0,0.04) !important;
}

/* ── Scrollbar ── */
.fi-sidebar-nav::-webkit-scrollbar { width: 3px !important; }
.fi-sidebar-nav::-webkit-scrollbar-thumb {
    background: #bbf7d0 !important;
    border-radius: 99px !important;
}

/* ── Paksa brand ke pojok kiri topbar (desktop only) ── */
@media (min-width: 1024px) {
    .fi-topbar-breadcrumbs,
    .fi-breadcrumbs,
    [class*="fi-topbar"] > div > div:first-child,
    .fi-topbar nav,
    .fi-topbar > div {
        flex: unset !important;
        width: auto !important;
    }

    .fi-topbar .fi-logo,
    .fi-topbar [href],
    .fi-topbar-brand,
    [class*="fi-brand"] {
        margin-right: auto !important;
        order: -1 !important;
    }
}
/* ── Fix badge angka saat active ── */
.fi-sidebar-item a[aria-current="page"] .fi-badge-label,
.fi-sidebar-item a[aria-current] .fi-badge-label,
.fi-sidebar-item a.fi-active .fi-badge-label,
.fi-sidebar-item.fi-active a .fi-badge-label {
    color: #16a34a !important;
    background: #ffffff !important;
}


/* ── Sembunyikan arrow/collapse di topbar — DESKTOP ONLY ── */
@media (min-width: 1024px) {
    .fi-topbar button[title*="collapse"],
    .fi-topbar button[title*="Collapse"],
    .fi-topbar button[title*="sidebar"],
    .fi-topbar button[title*="Sidebar"],
    .fi-topbar button[title*="toggle"],
    .fi-topbar button[title*="Toggle"],
    [class*="fi-topbar"] button[class*="sidebar"],
    [class*="fi-topbar"] button[class*="collapse"],
    [class*="fi-topbar"] button[class*="toggle"],
    .fi-sidebar-close-overlay-btn {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
}
/* ── Floating toggle hanya di desktop ── */
@media (max-width: 1023px) {
    #sidebar-toggle-btn {
        display: none !important;
    }
    .fi-sidebar-header,
    .fi-sidebar-header > a,
    .fi-sidebar-header > div,
    .fi-logo {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
}