/* =========================================
    Variables & Root Settings
   ========================================= */
:root {
    /* Dimensions */
    --sidebar-width: 300px !important;
    --collapsed-sidebar-width: 80px !important;
    --fi-sidebar-group-spacing: 0.2rem !important;

    /* Colors */
    --custom-primary: #4f46e5;
    /* Indigo-600 */
    --text-white: #ffffff;

    /* Typography */
    --heading-font-size: 1.4rem !important;
    --breadcrumb-font-size: 0.85rem !important;
}

/* =========================================
    Sidebar Styles
   ========================================= */
.fi-sidebar {
    background-color: #ffffff !important;
    border-right: 1px solid #e5e7eb;
}

:root.dark .fi-sidebar {
    background-color: #18181b !important;
    /* zinc-900 */
    border-right: 1px solid #27272a;
    /* zinc-800 */
}

.fi-sidebar-nav-groups {
    row-gap: calc(var(--spacing) * 4);
}

/* Sidebar Items Active State */
.fi-sidebar-item.fi-active>.fi-sidebar-item-btn {
    background: var(--custom-primary) !important;
}

.fi-sidebar-item.fi-active>.fi-sidebar-item-btn>.fi-sidebar-item-label,
.fi-sidebar-item.fi-active>.fi-sidebar-item-btn>.fi-sidebar-item-icon {
    color: var(--text-white) !important;
}

.fi-sidebar-item.fi-active>.fi-sidebar-item-btn>.fi-sidebar-item-grouped-border>.fi-sidebar-item-grouped-border-part {
    background: var(--text-white) !important;
}

/* Sidebar Groups Active State */
.fi-sidebar-group.fi-active .fi-sidebar-group-btn .fi-sidebar-group-label,
.fi-sidebar-group.fi-active .fi-sidebar-group-btn .fi-icon {
    color: var(--custom-primary) !important;
}

/* Cleanup Sidebar Borders */
.fi-sidebar-item-grouped-border-part-not-first,
.fi-sidebar-item-grouped-border-part-not-last {
    background: none !important;
}

/* =========================================
    Header Layout
   ========================================= */
/* Target Header Container */
.fi-header>div:first-of-type {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
}

/* Position Heading (Left) */
.fi-header-heading {
    order: 1;
    flex-shrink: 0;
    font-size: var(--heading-font-size);
    font-weight: 700 !important;
}

/* Explicitly target heading components elsewhere if needed */
.fi-heading-heading {
    font-size: var(--heading-font-size);
    font-weight: 700 !important;
}

/* Position Breadcrumbs (Right) */
.fi-breadcrumbs {
    order: 2;
    margin-left: auto;
    /* Push to right */
    flex-shrink: 0;
    font-size: var(--breadcrumb-font-size);
}

/* =========================================
    Breadcrumbs Styling
   ========================================= */
.fi-breadcrumbs-list {
    gap: 0.25rem !important;
}

.fi-breadcrumbs-item-label {
    font-size: var(--breadcrumb-font-size);
    color: #6b7280 !important;
    /* gray-500 */
    font-weight: 400 !important;
}

/* Current Breadcrumb Item */
.fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label {
    color: #374151 !important;
    /* gray-700 */
    font-weight: 500 !important;
}

.fi-breadcrumbs-item-separator {
    width: 14px !important;
    height: 14px !important;
    color: #9ca3af !important;
    /* gray-400 */
}

/* =========================================
   Table Header
   ========================================= */
/* Standardize UI (Move Create Button to Header) */
.fi-ta-header-toolbar > .flex.items-center.gap-x-4 {
    flex-direction: row-reverse !important;
}

/* Hide the description added via ->description() in all tables */
.fi-ta-header-description {
    display: none !important;
}

/* =========================================
   Pagination Customization (Refined)
   ========================================= */

/* 1. Ensure the footer overview (Showing...) is visible on the left */
.fi-pagination-overview {
    display: flex !important;
    order: -2 !important;
    margin-right: auto !important;
}

/* 2. Hide the "Per page" selector in the footer (since it's now in the header) */
.fi-ta-content > .fi-pagination .fi-pagination-records-per-page-select-ctn,
.fi-ta-footer .fi-pagination-records-per-page-select-ctn {
    display: none !important;
}

/* 3. Ensure pagination links stay on the far right */
.fi-pagination-items {
    order: 1 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* 4. Container for the whole pagination bar */
.fi-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

/* 5. Handle simple pagination buttons if they exist */
.fi-pagination > .flex.items-center.justify-between {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
}

/* =========================================
   Dark Mode Overrides
   ========================================= */
:root.dark {
    --custom-primary: #818cf8;
    /* Indigo-400 for better contrast on dark */
    --text-white: #ffffff;
    --text-gray-400: #a1a1aa;
    /* zinc-400 */
}

/* Header Heading in Dark Mode */
:root.dark .fi-header-heading,
:root.dark .fi-heading-heading {
    color: var(--text-white) !important;
}

/* Breadcrumb Items in Dark Mode */
:root.dark .fi-breadcrumbs-item-label {
    color: var(--text-gray-400) !important;
}

/* Current Breadcrumb Item in Dark Mode */
:root.dark .fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label {
    color: var(--custom-primary) !important;
    font-weight: 600 !important;
}

/* Breadcrumb Separator in Dark Mode */
:root.dark .fi-breadcrumbs-item-separator {
    color: var(--text-gray-400) !important;
}

/* =========================================
    Logo Customization
   ========================================= */
/* Sidebar & Topbar Logo */
.fi-sidebar-header .fi-logo,
.fi-topbar .fi-logo {
    height: 48px !important;
    width: auto !important;
}

/* Login / Authentication Page Logo */
.fi-simple-header .fi-logo,
.fi-simple-page .fi-logo,
.fi-simple-layout .fi-logo {
    height: 78px !important;
    width: auto !important;
    max-width: 240px !important;
    margin-bottom: 0.75rem !important;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.12));
    transition: transform 0.2s ease;
}

.fi-simple-header .fi-logo:hover,
.fi-simple-page .fi-logo:hover {
    transform: scale(1.03);
}