/* ==========================================================================
   APPLE / SAAS BENTO-BOX FLOATING CARD LAYOUT & DUAL-LAYER HOVER EXPAND SIDEBAR
   ========================================================================== */

:root {
    --fi-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, Roboto, sans-serif;
}

body {
    font-family: var(--fi-font-family);
    background-color: #f8fafc !important; /* bg-slate-50 */
    color: #0f172a;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    letter-spacing: -0.01em;
    height: 100vh;
    overflow: hidden;
}

.dark body {
    background-color: #0b0f19 !important;
    color: #f8fafc;
}

/* --------------------------------------------------------------------------
   STRICT TOGGLE VISIBILITY (NO DUPLICATE ICONS)
   -------------------------------------------------------------------------- */
[x-cloak] {
    display: none !important;
}

/* Hide group labels, group headers, and workspace boxes */
.fi-sidebar-group-label,
.fi-sidebar-group-button,
.fi-workspace-widget,
.fi-workspace-header {
    display: none !important;
}

/* Hide mobile toggle buttons on desktop */
@media (min-width: 1024px) {
    .fi-topbar-open-sidebar-btn,
    .fi-topbar-close-sidebar-btn,
    .lg\:hidden {
        display: none !important;
    }
}

/* When expanded: show collapse button on right, hide expand button */
aside.fi-sidebar.fi-sidebar-open .fi-sidebar-header button.mx-auto {
    display: none !important;
}

/* When collapsed: show expand button centered, hide collapse button */
aside.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header button.ms-auto {
    display: none !important;
}

/* --------------------------------------------------------------------------
   1. BENTO-BOX 3-CARD FLOATING LAYOUT (NO SCREEN-EDGE STICKING)
   -------------------------------------------------------------------------- */
.fi-layout {
    height: 100vh !important;
    width: 100vw !important;
    box-sizing: border-box !important;
    padding: 0.75rem !important; /* p-3 */
    gap: 0.75rem !important;    /* gap-3 */
    display: flex !important;
    flex-direction: row-reverse !important;
    overflow: hidden !important;
    background-color: transparent !important;
}

@media (min-width: 640px) {
    .fi-layout {
        padding: 1.25rem !important; /* sm:p-5 */
        gap: 1.25rem !important;    /* sm:gap-5 */
    }
}

/* Main Container (Top bar + Main Content) */
.fi-main-ctn {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    height: 100% !important;
    gap: 0.75rem !important;
    overflow: hidden !important;
    opacity: 1 !important;
}

@media (min-width: 640px) {
    .fi-main-ctn {
        gap: 1.25rem !important;
    }
}

/* 🛡️ FLOATING TOP BAR CARD */
.fi-topbar {
    position: relative !important;
    top: 0 !important;
    height: 4rem !important; /* h-16 */
    width: 100% !important;
    border-radius: 1rem !important; /* rounded-2xl */
    background-color: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important; /* border-slate-200/80 */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;  /* shadow-sm */
    display: flex !important;
    align-items: center !important;
    padding: 0 1.5rem !important;
    flex-shrink: 0 !important;
    z-index: 20 !important;
}

.dark .fi-topbar {
    background-color: #111827 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.fi-topbar nav {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Topbar & Sidebar Header Toggle Button */
.fi-topbar .fi-icon-btn,
.fi-sidebar-header .fi-icon-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 9999px;
    color: #475569;
    transition: all 0.15s ease;
    background: transparent;
    border: none;
    align-items: center;
    justify-content: center;
}

.dark .fi-topbar .fi-icon-btn,
.dark .fi-sidebar-header .fi-icon-btn {
    color: #94a3b8;
}

.fi-topbar .fi-icon-btn:hover,
.fi-sidebar-header .fi-icon-btn:hover {
    background-color: #f1f5f9;
    color: #0f172a;
}

.dark .fi-topbar .fi-icon-btn:hover,
.dark .fi-sidebar-header .fi-icon-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

/* 🛡️ FLOATING MAIN CONTENT PANEL */
.fi-main {
    flex: 1 1 0% !important;
    overflow-y: auto !important;
    width: 100% !important;
    max-width: none !important;
    background-color: #ffffff !important;
    border-radius: 1rem !important; /* rounded-2xl */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important; /* shadow-sm */
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    padding: 1.5rem 2rem !important;
    margin: 0 !important;
}

.dark .fi-main {
    background-color: #111827 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* --------------------------------------------------------------------------
   2. 🛡️ STRUCTURAL & VISUAL FLOATING SIDEBAR CARD
   -------------------------------------------------------------------------- */
aside.fi-sidebar {
    height: 100% !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: #ffffff !important;
    border-radius: 1rem !important; /* rounded-2xl */
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
    transition: width 0.25s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.25s ease !important;
    z-index: 10 !important;
    margin: 0 !important;
    top: 0 !important;
    left: 0 !important;
}

.dark aside.fi-sidebar {
    background-color: #111827 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* --------------------------------------------------------------------------
   🛡️ ZERO-LAYOUT-SHIFT HOVER EXPANSION (DESKTOP)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    aside.fi-sidebar:not(.fi-sidebar-open) {
        width: 4.5rem !important; /* 72px collapsed */
    }

    aside.fi-sidebar:not(.fi-sidebar-open):hover {
        width: 16rem !important; /* 256px expanded */
        position: absolute !important;
        top: 1.25rem !important;
        left: 1.25rem !important;
        height: calc(100vh - 2.5rem) !important;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(226, 232, 240, 0.9) !important; /* shadow-2xl */
        z-index: 50 !important;
        background-color: #ffffff !important;
    }

    .dark aside.fi-sidebar:not(.fi-sidebar-open):hover {
        background-color: #111827 !important;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
    }

    /* 🛡️ REVEAL LOGO & LABELS ON HOVER */
    aside.fi-sidebar:not(.fi-sidebar-open):hover .fi-sidebar-header > div,
    aside.fi-sidebar:not(.fi-sidebar-open):hover .fi-sidebar-item-label,
    aside.fi-sidebar:not(.fi-sidebar-open):hover .fi-logo,
    aside.fi-sidebar:not(.fi-sidebar-open):hover [x-show*="sidebar.isOpen"],
    aside.fi-sidebar:not(.fi-sidebar-open):hover [x-show*="isOpen"] {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    aside.fi-sidebar:not(.fi-sidebar-open):hover .fi-sidebar-group-items {
        display: flex !important;
    }

    /* Align items nicely to the left with text on hover */
    aside.fi-sidebar:not(.fi-sidebar-open):hover .fi-sidebar-item-button {
        width: 100% !important;
        justify-content: flex-start !important;
        padding: 0.625rem 0.75rem !important;
        margin: 0.125rem 0 !important;
    }

    aside.fi-sidebar:not(.fi-sidebar-open):hover .fi-sidebar-item-button .fi-sidebar-item-icon {
        margin-right: 0.75rem !important;
    }
}

/* --------------------------------------------------------------------------
   3. SIDEBAR HEADER & BRANDING
   -------------------------------------------------------------------------- */
.fi-sidebar-header {
    height: 4rem !important;
    padding: 0 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    background-color: transparent !important;
    border-bottom: 1px solid rgba(241, 245, 249, 0.8) !important;
    box-shadow: none !important;
    --tw-ring-shadow: none !important;
}

.dark .fi-sidebar-header {
    border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

.fi-sidebar-header .fi-logo {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.025em !important;
}

.dark .fi-sidebar-header .fi-logo {
    color: #f8fafc !important;
}

/* --------------------------------------------------------------------------
   4. SIDEBAR NAVIGATION
   -------------------------------------------------------------------------- */
.fi-sidebar-nav {
    padding: 0.75rem 0.5rem !important;
    gap: 0.25rem !important;
    display: flex !important;
    flex-direction: column !important;
}

.fi-sidebar-group {
    padding: 0 !important;
    margin: 0 !important;
}

.fi-sidebar-nav-groups {
    gap: 0.25rem !important;
}

/* --------------------------------------------------------------------------
   5. NAVIGATION ITEMS (CLEAN ICONS & LINKS ONLY)
   -------------------------------------------------------------------------- */
.fi-sidebar-item {
    margin: 0.125rem 0 !important;
}

/* Inactive Item */
.fi-sidebar-item-button {
    border-radius: 0.5rem !important; /* rounded-lg */
    padding: 0.625rem 0.75rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #64748b !important; /* text-slate-500 */
    transition: all 0.15s ease !important;
    background: transparent !important;
}

.dark .fi-sidebar-item-button {
    color: #94a3b8 !important;
}

.fi-sidebar-item-button:hover {
    background-color: #f8fafc !important; /* hover:bg-slate-50 */
    color: #0f172a !important;            /* hover:text-slate-900 */
}

.dark .fi-sidebar-item-button:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}

.fi-sidebar-item-button .fi-sidebar-item-icon,
.fi-sidebar-item-button svg {
    color: #64748b !important;
    width: 1.15rem !important;
    height: 1.15rem !important;
    transition: color 0.15s ease !important;
}

.dark .fi-sidebar-item-button .fi-sidebar-item-icon,
.dark .fi-sidebar-item-button svg {
    color: #94a3b8 !important;
}

.fi-sidebar-item-button:hover .fi-sidebar-item-icon,
.fi-sidebar-item-button:hover svg {
    color: #0f172a !important;
}

.dark .fi-sidebar-item-button:hover .fi-sidebar-item-icon,
.dark .fi-sidebar-item-button:hover svg {
    color: #ffffff !important;
}

/* 🛡️ ACTIVE ITEM: DARK PILL BENTO (bg-slate-900 text-white shadow-md) */
.fi-sidebar-item.fi-active .fi-sidebar-item-button,
.fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-button,
.fi-sidebar-item-button.bg-gray-100 {
    background-color: #0f172a !important; /* bg-slate-900 */
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 0.5rem !important;    /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important; /* shadow-md */
}

.dark .fi-sidebar-item.fi-active .fi-sidebar-item-button,
.dark .fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-button,
.dark .fi-sidebar-item-button.dark\:bg-white\/5 {
    background-color: #ffffff !important; /* white pill in dark mode */
    color: #0f172a !important;
    font-weight: 700 !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active svg,
.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active span,
.fi-sidebar-item.fi-sidebar-item-active span {
    color: #ffffff !important;
}

.dark .fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.dark .fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-icon,
.dark .fi-sidebar-item.fi-active svg,
.dark .fi-sidebar-item.fi-active .fi-sidebar-item-label,
.dark .fi-sidebar-item.fi-sidebar-item-active .fi-sidebar-item-label,
.dark .fi-sidebar-item.fi-active span,
.dark .fi-sidebar-item.fi-sidebar-item-active span {
    color: #0f172a !important;
}

/* 🛡️ COLLAPSED MODE: 40x40px CENTERED ICONS */
@media (min-width: 1024px) {
    aside.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-button {
        width: 2.5rem !important;  /* 40px */
        height: 2.5rem !important; /* 40px */
        padding: 0 !important;
        margin: 0.25rem auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* --------------------------------------------------------------------------
   6. CRIMSON COUNTER BADGES (#DF1F4A)
   -------------------------------------------------------------------------- */
.fi-sidebar-item .fi-badge {
    background-color: #fff1f2 !important; /* bg-rose-50 */
    color: #df1f4a !important;            /* text-[#DF1F4A] */
    border: 1px solid #ffe4e6 !important; /* border-rose-100 */
    font-weight: 800 !important;
    font-size: 0.65rem !important;
    padding: 0.125rem 0.5rem !important;
    border-radius: 9999px !important;
}

.fi-sidebar-item.fi-active .fi-badge {
    background-color: #df1f4a !important; /* crimson on active */
    color: #ffffff !important;
    border: none !important;
}

/* --------------------------------------------------------------------------
   7. GLOBAL SEARCH & INPUTS
   -------------------------------------------------------------------------- */
.fi-global-search-field input {
    background-color: #f8fafc !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    border-radius: 0.75rem !important;
    height: 40px !important;
    font-size: 0.875rem !important;
    color: #0f172a !important;
}

.dark .fi-global-search-field input {
    background-color: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
}

.fi-global-search-field input:focus {
    background-color: #ffffff !important;
    box-shadow: 0 0 0 2px #0f172a !important;
}