/* Enterprise UI/UX Overrides for Filament */

/* Cross-browser antialiasing reset */
.fi-sidebar,
.fi-sidebar * {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* Global Card & Container Styles */
.fi-ta-content, .fi-fo-wizard, .fi-section, .fi-modal-window {
    border-radius: 12px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid #e2e8f0 !important;
}
.fi-input, .fi-select, .fi-textarea {
    border-radius: 8px !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}
.fi-btn {
    border-radius: 8px !important;
}

/* Hide scrollbar for sidebar */
.fi-sidebar-nav::-webkit-scrollbar {
    display: none;
}

.fi-sidebar-nav {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Sidebar Dark Theme Background & Full Height Lock */
.fi-sidebar {
    z-index: 40;
    display: flex !important;
    flex-direction: column !important;
    background-color: #0F172A !important;
    border-right: 1px solid #1e293b !important;
}

@media (min-width: 1024px) {
    .fi-sidebar {
        position: sticky !important;
        top: 0 !important;
        height: 100vh !important;
    }
}

/* Ensure no white background gap beneath the sidebar */
.fi-sidebar-nav {
    flex-grow: 1;
    overflow-y: auto;
    background-color: #0F172A !important;
}

/* Main Menu (Group Level) Text & Styling */
.fi-sidebar-group-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    color: #f8fafc !important; 
}

/* Enable smooth collapse chevron rotation */
.fi-sidebar-group-collapse-btn {
    transition: transform 0.3s ease-in-out !important;
}
.fi-sidebar-group.fi-collapsed .fi-sidebar-group-collapse-btn {
    transform: rotate(180deg) !important;
}

/* Top-level Navigation Links (Not in Groups) */
.fi-sidebar-item-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #f8fafc !important;
}

/* Item icons default color */
.fi-sidebar-item-icon {
    width: 20px !important;
    height: 20px !important;
    margin-right: 12px !important;
}

/* Main menu icons color (Accent color) */
.fi-sidebar-item-icon.is-mainmenu-icon,
.fi-sidebar-group-btn>svg,
.fi-sidebar-group-btn>.fi-icon {
    color: #818cf8 !important; /* Indigo primary */
    width: 20px !important;
    height: 20px !important;
    margin-right: 12px !important;
}

/* Submenu Navigation Items */
.fi-sidebar-sub-item-label,
.fi-sidebar-item-grouped-border + .fi-sidebar-item-btn .fi-sidebar-item-label,
.is-submenu-icon + .fi-sidebar-item-label {
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    color: #cbd5e1 !important;
}

/* Submenu icons color (Subtle minimal color) */
.fi-sidebar-item-icon.is-submenu-icon {
    color: #94a3b8 !important; 
    width: 10px !important;
    height: 10px !important;
    margin-right: 8px !important;
}

/* Item bullet dots (for items without icons) */
.fi-sidebar-item-grouped-border-part {
    border-color: #64748b !important;
}

/* Default & Hover Item Styling */
.fi-sidebar-item-btn {
    border-radius: 8px !important;
    transition: all 200ms ease-in-out !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    margin-bottom: 4px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Submenu specific padding and indentation */
.fi-sidebar-group-items .fi-sidebar-item-btn {
    padding-left: 24px !important;
}

.fi-sidebar-item-btn:hover {
    background-color: #1e293b !important;
}
.fi-sidebar-group-btn:hover {
    background-color: #1e293b !important;
    border-radius: 8px !important;
}

/* Active State Styling */
.fi-sidebar-item-btn.fi-active {
    background-color: rgba(99, 102, 241, 0.1) !important;
    border-left: 4px solid #6366f1 !important;
    border-radius: 0 8px 8px 0 !important;
}

.fi-sidebar-item-btn.fi-active .fi-sidebar-item-label,
.fi-sidebar-item-btn.fi-active .fi-sidebar-sub-item-label {
    color: #6366f1 !important;
    font-weight: 600 !important;
}

.fi-sidebar-item-btn.fi-active .fi-sidebar-item-icon.is-submenu-icon,
.fi-sidebar-item-btn.fi-active .fi-sidebar-item-icon.is-mainmenu-icon {
    color: #6366f1 !important;
}

/* Submenu Active State doesn't need huge left border */
.fi-sidebar-group-items .fi-sidebar-item-btn.fi-active {
    border-left: none !important;
    border-radius: 8px !important;
}

/* Sidebar Dark Theme Background */
.fi-sidebar,
.fi-sidebar-header-ctn,
.fi-sidebar-header,
header.fi-sidebar-header {
    background-color: #0F172A !important;
    border-right-color: #1e293b !important;
    border-bottom-color: #1e293b !important;
}

/* Sidebar Logo Styling */
.fi-sidebar-header-ctn .fi-logo {
    color: #ffffff !important;
}

/* Sidebar Groups spacing and gaps */
.fi-sidebar-nav-groups {
    gap: 8px !important;
}

.fi-sidebar-nav-groups>*,
.fi-sidebar-nav-groups>*+* {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    gap: 0 !important;
}

.fi-sidebar-group-btn {
    margin: 0 !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    cursor: pointer !important;
    width: 100% !important;
}

.fi-sidebar-group-items {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: max-height 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease-in-out !important;
    overflow: hidden !important;
}

/* Ensure collapsed groups take absolutely zero space with smooth animation */
.fi-sidebar-group.fi-collapsed .fi-sidebar-group-items,
.fi-sidebar-group.fi-collapsed ul {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Active Selected Menu Item Pill */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: rgba(99, 102, 241, 0.15) !important; /* Soft purple bg */
    border-left: 4px solid #6366F1 !important;
    border-radius: 0 8px 8px 0 !important; /* Flat on left, rounded on right */
    box-shadow: inset 2px 0 10px rgba(99, 102, 241, 0.1) !important; /* Soft glow */
    margin-left: 0 !important; /* Connect border to edge */
}

/* Make icons and text white on active */
.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,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn svg,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

/* Smooth GPU-accelerated sidebar transitions */
.fi-sidebar {
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), width 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform, width;
}

/* Cards & Tables */
.fi-ta-content,
.fi-wi-widget,
.fi-section,
.fi-wi-stats-overview-stat {
    border-radius: 0.75rem !important;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.05) !important;
}

/* Soften inputs */
.fi-input {
    border-radius: 0.5rem !important;
    box-shadow: none !important;
}

/* Primary Action Buttons */
.fi-btn {
    border-radius: 0.5rem !important;
    font-weight: 500 !important;
}
/* Redesign Overrides */

/* Form Controls (Inputs, Selects, Textareas) */
.fi-input, .fi-select-input, .fi-textarea {
    min-height: 48px !important;
    border-radius: 0.5rem !important;
    transition: all 200ms ease-in-out !important;
    border-color: #e2e8f0 !important;
}

.fi-input:focus, .fi-select-input:focus, .fi-textarea:focus,
.fi-input-wrapper:focus-within, .fi-select:focus-within {
    border-color: rgba(99, 102, 241, 1) !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15) !important;
}

.custom-description-textarea textarea {
    min-height: 120px !important;
    padding: 1rem !important;
}

/* Custom Permission Card Section */
.custom-permission-card {
    border-radius: 1rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05) !important;
    padding: 1.5rem !important;
}

/* Buttons */
.fi-btn {
    min-height: 48px !important;
    border-radius: 0.5rem !important;
    font-weight: 500 !important;
    transition: all 200ms ease-in-out !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.fi-btn:hover {
    transform: translateY(-1px);
}

/* Sidebar Nav Submenu Connector lines */
.fi-sidebar-group-items > ul {
    border-left: 1px solid #334155 !important;
    margin-left: 1.25rem !important;
    padding-left: 0.5rem !important;
}

.fi-sidebar-item-grouped-border,
.fi-sidebar-item-grouped-border-part,
.fi-sidebar-item-active-indicator {
    display: none !important;
}

.fi-sidebar-sub-item {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Hover for Submenu */
.fi-sidebar-item-btn,
.fi-sidebar-sub-item-btn {
    position: relative !important;
    transition: all 250ms ease-in-out !important;
}

.fi-sidebar-sub-item-btn {
    padding-left: 1rem !important;
}

.fi-sidebar-sub-item-btn:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    transform: translateX(4px) !important;
    color: #FFFFFF !important;
}

.fi-sidebar-sub-item-btn:hover .fi-sidebar-sub-item-label {
    color: #FFFFFF !important;
}

/* Submenu Active Style */
.fi-sidebar-sub-item.fi-active > .fi-sidebar-sub-item-btn {
    background-color: rgba(99, 102, 241, 0.15) !important;
    border-radius: 8px !important;
}

.fi-sidebar-sub-item.fi-active > .fi-sidebar-sub-item-btn .fi-sidebar-sub-item-label {
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

/* Hover effects for main items */
.fi-sidebar-item-btn:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}
.fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.fi-sidebar-item-btn:hover .fi-sidebar-item-icon {
    color: #FFFFFF !important;
}

/* Remove dot overlap */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before,
.fi-sidebar-sub-item.fi-active > .fi-sidebar-sub-item-btn::before {
    display: none !important;
}

/* Sidebar Footer (Help Section) */
.custom-sidebar-footer {
    padding: 1.25rem 1rem;
    border-top: 1px solid #1e293b;
    background-color: #0F172A;
    margin-top: auto; /* Pushes it to the bottom */
}
.help-card {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(99, 102, 241, 0.05));
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: left;
}
.help-card h4 {
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.help-card p {
    color: #94a3b8;
    font-size: 12px;
    margin-bottom: 0.75rem;
}
.help-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #6366F1;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    text-decoration: none;
    transition: background-color 200ms ease;
    width: 100%;
}
.help-card a svg {
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px !important;
    flex-shrink: 0;
}
.help-card a:hover {
    background-color: #4F46E5;
}

/* Table Empty State Styling */
.fi-ta-empty-state {
    padding: 3rem 2rem !important;
    text-align: center;
}

.fi-ta-empty-state .fi-icon {
    color: #6366F1 !important; /* Primary color */
    width: 3rem !important;
    height: 3rem !important;
    margin-left: auto;
    margin-right: auto;
}

.fi-ta-empty-state-heading {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #0F172A !important;
    margin-top: 1rem !important;
}

.fi-ta-empty-state-description {
    color: #64748b !important;
    margin-top: 0.5rem !important;
    font-size: 0.875rem !important;
}

/* Skeleton Loaders for Data Tables (deferLoading) */
.fi-ta-content .animate-pulse > div,
.fi-ta-content .animate-pulse td > div {
    background-color: #e2e8f0 !important;
    border-radius: 0.375rem !important;
}


/* Empty State Polish */
.fi-ta-empty-state {
    padding: 3rem 1.5rem !important;
    background-color: #fafafa !important;
    border-radius: 12px !important;
    border: 1px dashed #e2e8f0 !important;
}

.fi-ta-empty-state-icon {
    color: #94a3b8 !important;
    height: 48px !important;
    width: 48px !important;
}

.fi-ta-empty-state-heading {
    color: #334155 !important;
    font-weight: 600 !important;
    font-size: 1.125rem !important;
}

.fi-ta-empty-state-description {
    color: #64748b !important;
    font-size: 0.875rem !important;
}