/* /* =====================================================
   Stitch & Wash — Dynamic Theme Admin Sidebar
   ===================================================== */

/* ── Sidebar container ── */
.fi-sidebar-nav {
    scrollbar-width: none !important;
}

.fi-sidebar {
    background-color: var(--sidebar-bg, #1d3461) !important;
    border-right-color: var(--sidebar-border, rgba(255, 255, 255, 0.08)) !important;
}

/* ── Sidebar header / brand area ── */
.fi-sidebar-header {
    background-color: var(--sidebar-bg, #1d3461) !important;
    border-bottom-color: var(--sidebar-border, rgba(255, 255, 255, 0.08)) !important;
}

.fi-sidebar-header .fi-logo,
.fi-sidebar-header a,
.fi-sidebar-header span {
    color: var(--text-primary, rgba(255, 255, 255, 0.95)) !important;
}

/* ── Navigation group labels ── */
.fi-sidebar-group-label {
    color: var(--text-muted, rgba(255, 255, 255, 0.4)) !important;
    font-size: 0.68rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

/* ─────────────────────────────────────────────
   INACTIVE nav items — white text/icon on navy
   ───────────────────────────────────────────── */
.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-label {
    color: var(--text-secondary, rgba(255, 255, 255, 0.78)) !important;
}

.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-icon {
    color: var(--text-muted, rgba(255, 255, 255, 0.65)) !important;
}

/* ── Hover on inactive items ── */
.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover {
    background-color: var(--hover-bg, rgba(255, 255, 255, 0.1)) !important;
}

.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover .fi-sidebar-item-label,
.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: var(--hover-text, rgba(255, 255, 255, 1)) !important;
}

/* ─────────────────────────────────────────────
   ACTIVE nav item — dark navy text on white pill
   fi-active is on the <li>, not the <a>
   ───────────────────────────────────────────── */
.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: var(--active-indicator, #1d3461) !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: var(--active-indicator, #1d3461) !important;
}

/* ── Sidebar footer (user avatar area) ── */
.fi-sidebar-footer {
    background-color: var(--sidebar-bg, #1d3461) !important;
    border-top-color: var(--hover-bg, rgba(255, 255, 255, 0.1)) !important;
}

.fi-sidebar-footer span,
.fi-sidebar-footer button,
.fi-sidebar-footer a {
    color: var(--text-secondary, rgba(255, 255, 255, 0.78)) !important;
}

/* ── Sidebar scrollbar — thin, branded ── */
.fi-sidebar-nav::-webkit-scrollbar,
.fi-sidebar::-webkit-scrollbar {
    width: 4px;
}

.fi-sidebar-nav::-webkit-scrollbar-track,
.fi-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.fi-sidebar-nav::-webkit-scrollbar-thumb,
.fi-sidebar::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb, rgba(255, 255, 255, 0.18));
    border-radius: 999px;
}

.fi-sidebar-nav::-webkit-scrollbar-thumb:hover,
.fi-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover, rgba(255, 255, 255, 0.35));
}

/* Firefox */
.fi-sidebar-nav,
.fi-sidebar {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb, rgba(255, 255, 255, 0.18)) transparent;
}

/* ── Topbar on mobile ── */
@media (max-width: 1024px) {
    .fi-topbar {
        background-color: var(--sidebar-bg, #1d3461) !important;
        border-bottom-color: var(--sidebar-border, rgba(255, 255, 255, 0.08)) !important;
    }
    .fi-topbar svg,
    .fi-topbar button {
        color: var(--text-secondary, rgba(255, 255, 255, 0.8)) !important;
    }

    /* Sidebar drawer on mobile — must sit above all page content */
    .fi-sidebar {
        position: fixed !important;
        inset-block: 0 !important;
        inset-inline-start: 0 !important;
        z-index: 50 !important;
        height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Backdrop overlay behind the sidebar drawer */
    .fi-sidebar-close-overlay {
        position: fixed !important;
        inset: 0 !important;
        z-index: 49 !important;
    }
}