/* /* =====================================================
   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 ──
   The sidebar toggle and the bar behind it are coloured together, and both
   from the same custom property, because they were once set apart: the icon
   was forced white here while the bar's colour came from --sidebar-bg, which
   only exists when a Theme row is active. With no active theme the bar stayed
   Filament's default white and the toggle was painted white on top of it —
   present and clickable, but invisible.

   `.fi-topbar > *` is the important selector. The toggle's <svg> inherits from
   the button, but Filament colours that button with a utility class carrying
   its own specificity, so colouring only `svg`/`button` left the icon at the
   mercy of whichever rule won. Setting the colour on the topbar's children and
   letting it inherit puts one value in charge of everything in the bar. */
@media (max-width: 1024px) {
    .fi-topbar,
    .fi-topbar > * {
        background-color: var(--sidebar-bg, #1d3461) !important;
        border-bottom-color: var(--sidebar-border, rgba(255, 255, 255, 0.08)) !important;
    }

    .fi-topbar,
    .fi-topbar a,
    .fi-topbar button,
    .fi-topbar svg,
    .fi-topbar .fi-icon-btn,
    .fi-topbar .fi-icon-btn svg {
        color: var(--text-secondary, rgba(255, 255, 255, 0.9)) !important;
    }

    /* Give the icon a visible hit state, so the control reads as a control. */
    .fi-topbar button:hover svg,
    .fi-topbar .fi-icon-btn:hover svg {
        color: var(--hover-text, #ffffff) !important;
    }

    .fi-topbar .fi-icon-btn:hover {
        background-color: var(--hover-bg, rgba(255, 255, 255, 0.12)) !important;
    }

    /* The user-avatar button keeps its own dark circle; don't let the bar's
       background rule flatten it into the navy. */
    .fi-topbar .fi-user-menu,
    .fi-topbar .fi-avatar,
    .fi-topbar .fi-avatar img {
        background-color: transparent !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;
    }
}