/* ==========================================================================
   Recad TCMS - Master Dual-Mode Theme & Iride Architecture Design System
   Matches Iride-Laravel Sidebar & Full Shell Structure with RECAD Brand Tokens
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Cairo:wght@400;500;600;700;800&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

/* ==========================================================================
   1. Design Tokens & Dual-Mode Variables (Light & Dark)
   ========================================================================== */

:root {
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --font-arabic: 'Cairo', 'Inter', system-ui, sans-serif;

    /* Light Mode Tokens (Crisp Enterprise Academic) */
    --ground: #F8F9FF;
    --surface-chrome: #FFFFFF;
    --surface-card: #FFFFFF;
    --surface-container-lowest: #FFFFFF;
    --surface-container-low: #F1F3FD;
    --surface-container: #EBEEF7;
    --surface-container-high: #E5E8F1;
    --surface-container-highest: #DFE2EC;
    --border-hairline: #DFE2EC;

    /* RECAD Official Brand Palette */
    --brand-teal: #006768;
    --brand-teal-hover: #008284;
    --brand-teal-dark: #004F51;
    --brand-accent: #1AC98A;
    --brand-green: #12A855;
    --brand-orange: #914D00;
    --brand-orange-light: #FC9430;
    --brand-orange-bg: #FFDCC3;

    --text-primary: #080C10;
    --text-secondary: #52606D;
    --text-muted: #6D7979;

    --status-gray: #6D7979;
    --status-info: #0284C7;
    --status-warning: #D97706;
    --status-success: #12A855;
    --status-danger: #E11D48;

    --sidebar-bg: #FFFFFF;
    --sidebar-border: #DFE2EC;
    --sidebar-text: #0F172A;
    --sidebar-icon: #334155;
    --sidebar-hover-bg: #F1F5F9;
    --sidebar-hover-text: #006768;
    --sidebar-active-bg: #006768;
    --sidebar-active-border: #004F51;
    --sidebar-active-shadow: rgba(0, 103, 104, 0.35);

    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.dark,
[data-theme="dark"],
html.dark {
    /* Dark Mode Tokens (Obsidian Recad) */
    --ground: #080C10;
    --surface-chrome: #141417;
    --surface-card: #1D1E22;
    --surface-container-lowest: #1D1E22;
    --surface-container-low: #141417;
    --surface-container: #201F21;
    --surface-container-high: #2A2A2C;
    --surface-container-highest: #30363D;
    --border-hairline: #2A2B30;

    --brand-teal: #008284;
    --brand-teal-hover: #1AC98A;
    --brand-teal-dark: #006768;
    --brand-accent: #1AC98A;
    --brand-green: #1AC98A;
    --brand-orange: #FB923C;
    --brand-orange-light: #F97316;
    --brand-orange-bg: #381A0E;

    --text-primary: #FFFFFF;
    --text-secondary: #A6A8AE;
    --text-muted: #8B949E;

    --status-gray: #8B949E;
    --status-info: #38BDF8;
    --status-warning: #FBBF24;
    --status-success: #1AC98A;
    --status-danger: #FB7185;

    --sidebar-bg: #141417;
    --sidebar-border: #2A2B30;
    --sidebar-text: #D1D5DB;
    --sidebar-icon: #94A3B8;
    --sidebar-hover-bg: #1D1E22;
    --sidebar-hover-text: #FFFFFF;
    --sidebar-active-bg: #008284;
    --sidebar-active-border: #1AC98A;
    --sidebar-active-shadow: rgba(0, 130, 132, 0.45);

    --card-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   2. Base App Shell & Layout Styling
   ========================================================================== */

body,
.fi-body,
.fi-layout,
.fi-main-ctn,
main {
    background-color: var(--ground) !important;
    color: var(--text-primary);
    font-family: var(--font-sans);
    letter-spacing: -0.01em;
}

[dir="rtl"] body,
[dir="rtl"] .fi-body,
[dir="rtl"] .fi-layout,
[dir="rtl"] main {
    font-family: var(--font-arabic) !important;
}

/* Material Symbols Outlined Font Support */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr !important;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--ground);
}
::-webkit-scrollbar-thumb {
    background: var(--border-hairline);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ==========================================================================
   3. SIDEBAR & NAVIGATION (EXACT IRIDE ARCHITECTURE & DUAL MODE)
   ========================================================================== */

.fi-sidebar {
    background-color: var(--sidebar-bg) !important;
    border-inline-end: 1px solid var(--sidebar-border) !important;
    border-inline-start: none !important;
    box-shadow: none !important;
    transition: width 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s ease !important;
}

html:not(.dark) .fi-sidebar {
    background-color: #FFFFFF !important;
    border-inline-end: 1px solid #DFE2EC !important;
}

.dark .fi-sidebar,
[data-theme="dark"] .fi-sidebar {
    background-color: #141417 !important;
    border-inline-end: 1px solid #2A2B30 !important;
}

.fi-sidebar-header {
    height: 4rem !important;
    padding: 0 1rem !important;
    border-bottom: 1px solid var(--border-hairline) !important;
    background-color: var(--surface-chrome) !important;
}

.fi-sidebar-nav {
    padding: 0.75rem 0.5rem !important;
    background-color: transparent !important;
}

/* Group Headers & Accordion Bar (Volt Tactical Architecture) */
.fi-sidebar-group-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.625rem !important;
    padding: 0.5rem 0.75rem !important;
    margin-bottom: 0.25rem !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    background-color: rgba(241, 245, 249, 0.6) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    color: #475569 !important;
}

.fi-sidebar-group-btn:hover {
    background-color: rgba(241, 245, 249, 0.95) !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

.fi-sidebar-group-btn > i,
.fi-sidebar-group-btn > .fi-icon,
.fi-sidebar-group-btn > svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    font-size: 17px !important;
    flex-shrink: 0 !important;
    color: #006768 !important;
    transition: all 0.2s ease !important;
}

.dark .fi-sidebar-group-btn,
html.dark .fi-sidebar-group-btn {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #cbd5e1 !important;
}

.dark .fi-sidebar-group-btn:hover,
html.dark .fi-sidebar-group-btn:hover {
    background-color: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(26, 201, 138, 0.3) !important;
    color: #ffffff !important;
}

.dark .fi-sidebar-group-btn > i,
.dark .fi-sidebar-group-btn > .fi-icon,
.dark .fi-sidebar-group-btn > svg,
html.dark .fi-sidebar-group-btn > i,
html.dark .fi-sidebar-group-btn > .fi-icon,
html.dark .fi-sidebar-group-btn > svg {
    color: #1AC98A !important;
    filter: drop-shadow(0 0 6px rgba(26, 201, 138, 0.5)) !important;
}

.fi-sidebar-group-label {
    flex: 1 1 auto !important;
    font-family: var(--font-sans) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    line-height: 1.25 !important;
    padding: 0 !important;
}

[dir="rtl"] .fi-sidebar-group-label {
    letter-spacing: normal !important;
}

html:not(.dark) .fi-sidebar-group-label {
    color: #0F172A !important;
}

.dark .fi-sidebar-group-label {
    color: #E2E8F0 !important;
}

/* Inactive Sidebar Buttons - Base */
.fi-sidebar-item-btn {
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 0.5rem 0.75rem !important;
    transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
}

/* Item Icons */
.fi-sidebar-item-btn i,
.fi-sidebar-item-btn .fi-icon,
.fi-sidebar-item-btn svg {
    width: 1.15rem !important;
    height: 1.15rem !important;
    font-size: 15px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Inactive Text in Light Mode - Crisp, High-Contrast */
html:not(.dark) .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn,
html:not(.dark) .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-label,
html:not(.dark) .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: #0F172A !important;
    font-weight: 600 !important;
}

/* Inactive Icons in Light Mode */
html:not(.dark) .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn .fi-icon,
html:not(.dark) .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn svg {
    color: #334155 !important;
    transition: transform 0.15s ease, color 0.15s ease !important;
}

/* Inactive Hover State in Light Mode */
html:not(.dark) .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover {
    background-color: #F1F5F9 !important;
}

html:not(.dark) .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover .fi-sidebar-item-label {
    color: #006768 !important;
    font-weight: 700 !important;
}

html:not(.dark) .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover .fi-icon,
html:not(.dark) .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover svg {
    color: #006768 !important;
    transform: scale(1.12);
}

/* Inactive Text & Icons in Dark Mode */
.dark .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn,
.dark .fi-sidebar-item:not(.fi-active) .fi-sidebar-item-label {
    color: #D1D5DB !important;
}

.dark .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn .fi-icon,
.dark .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn svg {
    color: #94A3B8 !important;
    transition: transform 0.15s ease, color 0.15s ease !important;
}

.dark .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover {
    background-color: #1D1E22 !important;
}

.dark .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover .fi-sidebar-item-label {
    color: #FFFFFF !important;
}

.dark .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover .fi-icon,
.dark .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover svg {
    color: #1AC98A !important;
    transform: scale(1.12);
}

/* ==========================================================================
   ACTIVE SIDEBAR ITEM - RECAD TEAL WITH EXACT IRIDE ACCENT BORDER & SHADOW
   ========================================================================== */

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-btn,
.fi-sidebar-item-btn.fi-active,
.fi-sidebar-item-btn[aria-current="page"] {
    background-color: var(--sidebar-active-bg) !important;
    color: #FFFFFF !important;
    border-inline-start: 3px solid var(--sidebar-active-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 14px var(--sidebar-active-shadow) !important;
    font-weight: 700 !important;
}

/* Force all text, spans, icons inside active sidebar button to be pure white */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn *,
.fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-btn *,
.fi-sidebar-item-btn.fi-active *,
.fi-sidebar-item-btn[aria-current="page"] * {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar-item-btn.fi-active .fi-sidebar-item-label,
.fi-sidebar-item-btn[aria-current="page"] .fi-sidebar-item-label {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-icon,
.fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-btn .fi-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn svg,
.fi-sidebar-item-btn.fi-active svg {
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
    transform: scale(1.05);
}

/* Active item hover maintains pure white */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn:hover {
    background-color: var(--brand-teal-hover) !important;
}

/* ==========================================================================
   RESPONSIVE COLLAPSED / CLOSED SIDEBAR & VOLT MINI-DOCK ARCHITECTURE
   ========================================================================== */

/* 1. DESKTOP RAIL & COLLAPSED DOCK (>= 1024px) */
@media (min-width: 1024px) {
    /* Rail Base Dimensions (72px / 4.5rem) */
    .fi-sidebar:not(.fi-sidebar-open) {
        width: 4.5rem !important;
        min-width: 4.5rem !important;
        max-width: 4.5rem !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-shadow: none !important;
        transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    /* Rail Header Container: Stack Brand Monogram + Prominent Expand Toggle Vertically */
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header {
        height: auto !important;
        min-height: 4.5rem !important;
        padding-inline: 0.25rem !important;
        padding-block: 0.5rem !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.35rem !important;
        overflow: visible !important;
    }

    .fi-sidebar:not(.fi-sidebar-open) .overflow-x-clip {
        overflow: visible !important;
    }

    /* In Collapsed Header: Strictly Show Expand Button & Brand Monogram, Hide Collapse Button & Full Logo */
    .fi-sidebar:not(.fi-sidebar-open) .recad-sidebar-header-toggle-btn {
        display: none !important;
    }

    .fi-sidebar:not(.fi-sidebar-open) .recad-sidebar-header-expand-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .fi-sidebar:not(.fi-sidebar-open) .recad-sidebar-collapsed-brand {
        display: flex !important;
    }

    /* Rail Nav Items Container */
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
        padding: 0.75rem 0.35rem !important;
        align-items: center !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* Group & Navigation Visibility Toggling */
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-btn,
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-button,
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-items {
        display: none !important;
    }
}

/* In Expanded Sidebar (Both Desktop & Mobile Drawer): Strictly Hide Collapsed Controls */
.fi-sidebar.fi-sidebar-open .recad-collapsed-dropdown-container,
.fi-sidebar.fi-sidebar-open .fi-sidebar-group-dropdown-trigger-btn,
.fi-sidebar.fi-sidebar-open .recad-sidebar-collapsed-brand,
.fi-sidebar.fi-sidebar-open .recad-sidebar-header-expand-btn {
    display: none !important;
}

.fi-sidebar.fi-sidebar-open .recad-sidebar-header-toggle-btn {
    display: flex !important;
}

/* 2. Collapsed Rail Group Trigger Squircle Button (44px) - Base / Light Mode */
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-dropdown-trigger-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 3px auto !important;
    padding: 0 !important;
    border-radius: 12px !important;
    background: #F1F5F9 !important;
    border: 1px solid #E2E8F0 !important;
    color: #475569 !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
}

.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-dropdown-trigger-btn svg,
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-dropdown-trigger-btn i,
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-dropdown-trigger-btn .fi-icon {
    width: 22px !important;
    height: 22px !important;
    font-size: 21px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-dropdown-trigger-btn:hover {
    background: #FFFFFF !important;
    border-color: #006768 !important;
    color: #006768 !important;
    transform: scale(1.06) !important;
    box-shadow: 0 4px 14px rgba(0, 103, 104, 0.16) !important;
}

.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group.fi-active .fi-sidebar-group-dropdown-trigger-btn {
    border: 1.5px solid #006768 !important;
    background: linear-gradient(135deg, rgba(0, 103, 104, 0.14) 0%, rgba(26, 201, 138, 0.08) 100%) !important;
    color: #006768 !important;
    box-shadow: 0 2px 12px rgba(0, 103, 104, 0.22) !important;
}

/* 3. Collapsed Rail Group Trigger Squircle Button - Dark Mode */
.dark .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-dropdown-trigger-btn,
html.dark .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-dropdown-trigger-btn {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    color: #94A3B8 !important;
}

.dark .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-dropdown-trigger-btn:hover,
html.dark .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group-dropdown-trigger-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: #1AC98A !important;
    color: #FFFFFF !important;
    transform: scale(1.06) !important;
    box-shadow: 0 0 16px rgba(26, 201, 138, 0.35) !important;
}

.dark .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group.fi-active .fi-sidebar-group-dropdown-trigger-btn,
html.dark .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group.fi-active .fi-sidebar-group-dropdown-trigger-btn {
    border: 1.5px solid #1AC98A !important;
    background: linear-gradient(135deg, rgba(26, 201, 138, 0.25) 0%, rgba(0, 103, 104, 0.15) 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 18px rgba(26, 201, 138, 0.45) !important;
}

.dark .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group.fi-active .fi-sidebar-group-dropdown-trigger-btn i,
.dark .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group.fi-active .fi-sidebar-group-dropdown-trigger-btn svg,
html.dark .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group.fi-active .fi-sidebar-group-dropdown-trigger-btn i,
html.dark .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group.fi-active .fi-sidebar-group-dropdown-trigger-btn svg {
    color: #1AC98A !important;
    filter: drop-shadow(0 0 6px rgba(26, 201, 138, 0.8)) !important;
}

/* 4. Standalone Items in Collapsed Mode (e.g., Dashboard Overview) */
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    margin: 3px auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    position: relative !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-label {
    display: none !important;
}

.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn svg,
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn i,
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn .fi-icon {
    width: 22px !important;
    height: 22px !important;
    font-size: 21px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s ease !important;
}

.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn:hover {
    transform: scale(1.06) !important;
}

.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    border: 1.5px solid #006768 !important;
    background: linear-gradient(135deg, rgba(0, 103, 104, 0.14) 0%, rgba(26, 201, 138, 0.08) 100%) !important;
    color: #006768 !important;
    box-shadow: 0 2px 12px rgba(0, 103, 104, 0.22) !important;
}

.dark .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
html.dark .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    border: 1.5px solid #1AC98A !important;
    background: linear-gradient(135deg, rgba(26, 201, 138, 0.25) 0%, rgba(0, 103, 104, 0.15) 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 18px rgba(26, 201, 138, 0.45) !important;
}

/* 5. Subtle Separator between Groups on Collapsed Rail */
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group:not(:last-child)::after {
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    background: rgba(15, 23, 42, 0.08);
    margin: 0.35rem auto;
}

.dark .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group:not(:last-child)::after,
html.dark .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group:not(:last-child)::after {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* 6. RECAD TELEPORTED SIDEBAR FLYOUT PANEL (100% SOLID OPAQUE DUAL-THEME) */
.recad-sidebar-flyout-panel {
    border-radius: 16px !important;
    z-index: 999999 !important;
    background-color: #FFFFFF !important;
    border: 1px solid #DFE2EC !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25), 0 2px 10px rgba(0, 103, 104, 0.12) !important;
    min-width: 15rem !important;
    max-width: 17rem !important;
    opacity: 1 !important;
}

.dark .recad-sidebar-flyout-panel,
html.dark .recad-sidebar-flyout-panel {
    background-color: #141519 !important;
    border: 1px solid #2A2B30 !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.95), 0 0 25px rgba(26, 201, 138, 0.2) !important;
    opacity: 1 !important;
}

/* 7. ADAPTIVE SIDEBAR FOOTER SWITCHING (VOLT ARCHITECTURE) */
.fi-sidebar-close .recad-footer-expanded,
.fi-sidebar:not(.fi-sidebar-open) .recad-footer-expanded {
    display: none;
}

.fi-sidebar.fi-sidebar-open .recad-footer-collapsed {
    display: none;
}

/* ==========================================================================
   8. MOBILE & TABLET RESPONSIVE OVERHAUL (< 1024px)
   ========================================================================== */
@media (max-width: 1023px) {
    /* Glass Blur Backdrop Overlay */
    .fi-sidebar-close-overlay {
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        background-color: rgba(8, 8, 10, 0.75) !important;
        transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        z-index: 45 !important;
    }

    /* Mobile Off-Canvas Drawer Shell */
    .fi-sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100dvh !important;
        width: 290px !important;
        max-width: 85vw !important;
        z-index: 50 !important;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    }

    /* Mobile Drawer Shell (Dark Mode) */
    .dark .fi-sidebar,
    html.dark .fi-sidebar {
        background-color: #111114 !important;
        background-image: linear-gradient(180deg, #161619 0%, #0e0e11 100%) !important;
    }

    /* Drawer Corner Radii */
    [dir="ltr"] .fi-sidebar {
        border-top-right-radius: 16px !important;
        border-bottom-right-radius: 16px !important;
    }

    [dir="rtl"] .fi-sidebar {
        border-top-left-radius: 16px !important;
        border-bottom-left-radius: 16px !important;
    }

    /* Force expanded footer on mobile drawer */
    .fi-sidebar .recad-footer-expanded {
        display: flex !important;
        flex-direction: column !important;
    }

    .fi-sidebar .recad-footer-collapsed {
        display: none !important;
    }

    /* Hide mini collapsed triggers on mobile */
    .recad-collapsed-dropdown-container,
    .fi-sidebar-group-dropdown-trigger-btn,
    .recad-sidebar-collapsed-brand,
    .recad-sidebar-header-expand-btn {
        display: none !important;
    }

    /* Show normal group buttons on mobile */
    .fi-sidebar-group-btn {
        display: flex !important;
        min-height: 44px !important;
    }

    /* Mobile Touch Targets */
    .fi-sidebar-item-btn {
        min-height: 44px !important;
        padding-inline: 0.75rem !important;
    }

    .fi-sidebar-item-label {
        display: block !important;
    }

    /* Mobile Safe Area insets */
    .fi-sidebar-nav {
        padding-bottom: max(2rem, env(safe-area-inset-bottom)) !important;
    }
}

/* Flyout Custom Thin Scrollbar */
.recad-sidebar-flyout-panel::-webkit-scrollbar {
    width: 4px;
}

.recad-sidebar-flyout-panel::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 9999px;
}

.dark .recad-sidebar-flyout-panel::-webkit-scrollbar-thumb,
html.dark .recad-sidebar-flyout-panel::-webkit-scrollbar-thumb {
    background: #2A2A2E !important;
}

/* Enable topbar hamburger button on desktop when sidebar is collapsed */
@media (min-width: 1024px) {
    .fi-topbar-open-sidebar-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.2s ease !important;
    }
    .fi-topbar-open-sidebar-btn:hover {
        color: #006768 !important;
    }
    .dark .fi-topbar-open-sidebar-btn:hover {
        color: #1AC98A !important;
    }
}

/* ==========================================================================
   4. TOPBAR & HEADER (EXACT IRIDE SLEEK PROFILE & TEAL HAIRLINE)
   ========================================================================== */

.fi-topbar-ctn {
    position: sticky;
    top: 0;
    z-index: 35;
}

.fi-topbar {
    background-color: var(--surface-chrome) !important;
    border-bottom: 1px solid var(--border-hairline) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02) !important;
    height: 4rem !important;
    position: relative;
}

/* Aerodynamic Recad Laser Hairline (Bottom Hairline) */
.fi-topbar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.5px;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 103, 104, 0.6) 50%, transparent 100%);
    pointer-events: none;
}

.dark .fi-topbar::after {
    background: linear-gradient(90deg, transparent 0%, rgba(26, 201, 138, 0.7) 50%, transparent 100%);
}

.fi-topbar nav {
    height: 4rem !important;
}

.fi-topbar input[type="search"] {
    background-color: var(--surface-container-low) !important;
    border: 1px solid var(--border-hairline) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    color: var(--text-primary) !important;
    transition: all 0.15s ease-in-out !important;
}

.fi-topbar input[type="search"]:focus {
    border-color: var(--brand-teal) !important;
    box-shadow: 0 0 0 2px rgba(0, 103, 104, 0.2) !important;
    outline: none !important;
}

.dark .fi-topbar input[type="search"]:focus {
    border-color: var(--brand-accent) !important;
    box-shadow: 0 0 0 2px rgba(26, 201, 138, 0.25) !important;
}

/* ==========================================================================
   5. CARDS, SECTIONS & DUAL-MODE COMPONENT UTILITIES
   ========================================================================== */

.fi-section,
.fi-ta-ctn,
.fi-modal-window,
.fi-card,
.tcms-card {
    background-color: var(--surface-card) !important;
    border: 1px solid var(--border-hairline) !important;
    border-radius: 12px !important;
    box-shadow: var(--card-shadow) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.fi-section:hover,
.tcms-card:hover {
    border-color: rgba(0, 103, 104, 0.5) !important;
    box-shadow: 0 4px 16px -2px rgba(0, 103, 104, 0.08) !important;
}

.dark .fi-section:hover,
.dark .tcms-card:hover {
    border-color: rgba(26, 201, 138, 0.4) !important;
    box-shadow: 0 4px 16px -2px rgba(26, 201, 138, 0.15) !important;
}

/* Dual-Mode Background & Surface Class Bindings */
.bg-surface-container-lowest { background-color: var(--surface-container-lowest) !important; }
.bg-surface-container-low { background-color: var(--surface-container-low) !important; }
.bg-surface-container { background-color: var(--surface-container) !important; }
.bg-surface-container-high { background-color: var(--surface-container-high) !important; }
.bg-surface-container-highest { background-color: var(--surface-container-highest) !important; }
.bg-surface-variant { background-color: var(--surface-container) !important; }

/* Dual-Mode Text Color Bindings */
.text-on-surface { color: var(--text-primary) !important; }
.text-on-surface-variant { color: var(--text-secondary) !important; }
.text-outline { color: var(--text-muted) !important; }
.text-outline-variant { color: var(--text-muted) !important; }

/* Dual-Mode Brand Teal & Accent Orange Classes */
.text-primary { color: var(--brand-teal) !important; }
.bg-primary { background-color: var(--brand-teal) !important; }
.text-on-primary { color: #FFFFFF !important; }

.text-secondary { color: var(--brand-orange) !important; }
.bg-secondary { background-color: var(--brand-orange) !important; }
.bg-secondary-container { background-color: var(--brand-orange-light) !important; }
.bg-secondary-fixed { background-color: var(--brand-orange-bg) !important; }
.text-on-secondary-fixed { color: var(--brand-orange) !important; }

/* Collections & Dues Special KPI Classes */
.tcms-kpi-collections {
    background-color: var(--surface-container-low) !important;
    border: 1px solid rgba(0, 103, 104, 0.2) !important;
    color: var(--brand-teal) !important;
}

.tcms-kpi-dues {
    background-color: var(--brand-orange-bg) !important;
    border: 1px solid rgba(145, 77, 0, 0.25) !important;
    color: var(--brand-orange) !important;
}

/* ==========================================================================
   6. FILAMENT TABLES (EXECUTIVE BENTO DESIGN & STICKY ACTIONS)
   ========================================================================== */

.fi-ta-ctn {
    background-color: var(--surface-card) !important;
    border: 1px solid var(--border-hairline) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05) !important;
    overflow: clip !important;
}

.dark .fi-ta-ctn {
    background-color: #141417 !important;
    border: 1px solid #2A2B30 !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5) !important;
}

.fi-ta-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

/* High Contrast Header Cells */
.fi-ta-header-cell {
    background-color: #F8FAFC !important;
    border-bottom: 1px solid #DFE2EC !important;
    color: #64748B !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 0.75rem 1rem !important;
    white-space: nowrap;
}

.dark .fi-ta-header-cell {
    background-color: #0E0E10 !important;
    border-bottom: 1px solid #2A2A2E !important;
    color: #A1A1A8 !important;
}

/* Selection Checkbox (Sticky Start) */
.fi-ta-selection-cell {
    position: sticky !important;
    inset-inline-start: 0 !important;
    z-index: 25 !important;
    background-color: #FFFFFF !important;
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    text-align: center !important;
}

.dark .fi-ta-selection-cell {
    background-color: #141417 !important;
}

thead th.fi-ta-selection-cell {
    background-color: #F8FAFC !important;
    z-index: 30 !important;
}

.dark thead th.fi-ta-selection-cell {
    background-color: #0E0E10 !important;
}

/* Dedicated Action Header Cell Styling */
.fi-ta-actions-header-cell {
    min-width: 80px !important;
    width: 80px !important;
    text-align: center !important;
    z-index: 20 !important;
    background-color: #F8FAFC !important;
}

.dark .fi-ta-actions-header-cell {
    background-color: #0E0E10 !important;
}

.fi-ta-actions-header-cell:empty::before {
    font-weight: 800 !important;
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #64748B !important;
}

.dark .fi-ta-actions-header-cell:empty::before {
    color: #A1A1A8 !important;
}

[dir="rtl"] .fi-ta-actions-header-cell:empty::before {
    content: 'الإجراءات';
}

[dir="ltr"] .fi-ta-actions-header-cell:empty::before {
    content: 'ACTIONS';
}

/* Actions Column: Dedicated Clean Cell with Centered 3-Dots Button */
.fi-ta-cell.fi-ta-actions-cell {
    min-width: 80px !important;
    width: 80px !important;
    text-align: center !important;
    white-space: nowrap !important;
    z-index: 15 !important;
    background-color: #FFFFFF !important;
}

.dark .fi-ta-cell.fi-ta-actions-cell {
    background-color: #141417 !important;
}

.fi-ta-row:hover .fi-ta-cell.fi-ta-actions-cell {
    background-color: #F4F6F9 !important;
}

.dark .fi-ta-row:hover .fi-ta-cell.fi-ta-actions-cell {
    background-color: #1A1B20 !important;
}

/* Sticky Pinning for Actions placed BeforeColumns (Start of row) */
.fi-ta-table:has(.fi-ta-selection-cell) .fi-ta-actions-header-cell,
.fi-ta-table:has(.fi-ta-selection-cell) .fi-ta-cell.fi-ta-actions-cell {
    position: sticky !important;
    inset-inline-start: 48px !important;
}

.fi-ta-table:not(:has(.fi-ta-selection-cell)) .fi-ta-actions-header-cell,
.fi-ta-table:not(:has(.fi-ta-selection-cell)) .fi-ta-cell.fi-ta-actions-cell {
    position: sticky !important;
    inset-inline-start: 0 !important;
}

/* Fallback Sticky Pinning for Actions placed AfterColumns (Trailing edge) */
.fi-ta-table:has(.fi-ta-actions-header-cell:last-child) .fi-ta-actions-header-cell,
.fi-ta-table:has(.fi-ta-cell.fi-ta-actions-cell:last-child) .fi-ta-cell.fi-ta-actions-cell {
    position: sticky !important;
    inset-inline-start: auto !important;
    inset-inline-end: 0 !important;
}

/* Subtle separator line between sticky columns and scrolling data columns */
[dir="rtl"] .fi-ta-table:has(.fi-ta-selection-cell) .fi-ta-cell.fi-ta-actions-cell,
[dir="rtl"] .fi-ta-table:has(.fi-ta-selection-cell) .fi-ta-actions-header-cell {
    border-left: 1px solid #DFE2EC !important;
}

.dark [dir="rtl"] .fi-ta-table:has(.fi-ta-selection-cell) .fi-ta-cell.fi-ta-actions-cell,
.dark [dir="rtl"] .fi-ta-table:has(.fi-ta-selection-cell) .fi-ta-actions-header-cell {
    border-left: 1px solid #2A2B30 !important;
}

[dir="ltr"] .fi-ta-table:has(.fi-ta-selection-cell) .fi-ta-cell.fi-ta-actions-cell,
[dir="ltr"] .fi-ta-table:has(.fi-ta-selection-cell) .fi-ta-actions-header-cell {
    border-right: 1px solid #DFE2EC !important;
}

.dark [dir="ltr"] .fi-ta-table:has(.fi-ta-selection-cell) .fi-ta-cell.fi-ta-actions-cell,
.dark [dir="ltr"] .fi-ta-table:has(.fi-ta-selection-cell) .fi-ta-actions-header-cell {
    border-right: 1px solid #2A2B30 !important;
}

.fi-ta-actions {
    justify-content: center !important;
}

/* Above-Content Collapsible Filters Container (Recad Bento styling) */
.fi-ta-filters-above-content-ctn {
    background-color: var(--surface-card) !important;
    border: 1px solid var(--border-hairline) !important;
    border-radius: 14px !important;
    padding: 1.25rem !important;
    margin-bottom: 1.25rem !important;
    box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dark .fi-ta-filters-above-content-ctn {
    background-color: #141519 !important;
    border: 1px solid #2A2B30 !important;
    box-shadow: 0 10px 28px -4px rgba(0, 0, 0, 0.5) !important;
}

/* Elegant Table Rows & Hover Highlight */
.fi-ta-row {
    border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
    transition: background-color 0.15s ease !important;
}

.dark .fi-ta-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.fi-ta-row:hover {
    background-color: rgba(0, 103, 104, 0.035) !important;
}

.dark .fi-ta-row:hover {
    background-color: rgba(26, 201, 138, 0.04) !important;
}

.fi-ta-cell {
    color: var(--text-primary) !important;
    font-size: 13px !important;
    padding: 0.75rem 1rem !important;
}

/* Action Group 3-Dots Button (Squircle 32px with glowing teal hover) */
.fi-ta-actions .fi-dropdown-trigger > button,
.fi-ta-actions .fi-btn-color-primary,
.fi-ta-actions .fi-icon-btn {
    border-radius: 10px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fi-ta-actions .fi-dropdown-trigger > button:hover {
    border-color: #006768 !important;
    color: #006768 !important;
    transform: scale(1.05);
}

.dark .fi-ta-actions .fi-dropdown-trigger > button:hover {
    border-color: #1AC98A !important;
    color: #1AC98A !important;
    box-shadow: 0 0 10px rgba(26, 201, 138, 0.3) !important;
}

/* ==========================================================================
   7. FORM INPUTS & BUTTONS
   ========================================================================== */

.fi-input-wrp {
    background-color: var(--surface-card) !important;
    border: 1px solid var(--border-hairline) !important;
    border-radius: 10px !important;
    color: var(--text-primary) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.fi-input-wrp:focus-within {
    border-color: var(--brand-teal) !important;
    box-shadow: 0 0 0 2px rgba(0, 103, 104, 0.2) !important;
}

.dark .fi-input-wrp:focus-within {
    border-color: var(--brand-accent) !important;
    box-shadow: 0 0 0 2px rgba(26, 201, 138, 0.25) !important;
}

.fi-input-wrp input, 
.fi-input-wrp select, 
.fi-input-wrp textarea {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

/* Choices.js Select & Dropdowns (Dual Theme) */
.choices__inner {
    background-color: #FFFFFF !important;
    border: 1px solid #DFE2EC !important;
    border-radius: 10px !important;
    color: #080C10 !important;
    min-height: 42px !important;
    padding: 0.375rem 0.75rem !important;
    transition: all 0.2s ease !important;
}

.dark .choices__inner {
    background-color: #191B20 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
}

.choices.is-focused .choices__inner {
    border-color: #006768 !important;
    box-shadow: 0 0 0 2px rgba(0, 103, 104, 0.2) !important;
}

.dark .choices.is-focused .choices__inner {
    border-color: #1AC98A !important;
    box-shadow: 0 0 0 2px rgba(26, 201, 138, 0.25) !important;
}

.choices__list--dropdown {
    background-color: #FFFFFF !important;
    border: 1px solid #DFE2EC !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12) !important;
    z-index: 50 !important;
    overflow: hidden !important;
    margin-top: 4px !important;
}

.dark .choices__list--dropdown {
    background-color: #141417 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.8), 0 0 20px rgba(26, 201, 138, 0.15) !important;
}

.choices__list--dropdown .choices__input {
    background-color: #F8FAFC !important;
    border: 1px solid #DFE2EC !important;
    border-radius: 8px !important;
    color: #080C10 !important;
    margin: 6px !important;
    width: calc(100% - 12px) !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
}

.dark .choices__list--dropdown .choices__input {
    background-color: #1E1F24 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: rgba(0, 103, 104, 0.08) !important;
    color: #006768 !important;
    font-weight: 600 !important;
}

.dark .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: rgba(26, 201, 138, 0.12) !important;
    color: #1AC98A !important;
    font-weight: 600 !important;
}

/* Filament Buttons */
.fi-btn-color-primary {
    background-color: var(--brand-teal) !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.15s ease-in-out !important;
}

.fi-btn-color-primary:hover {
    background-color: var(--brand-teal-hover) !important;
}

.fi-btn-color-gray {
    background-color: var(--surface-container-low) !important;
    border: 1px solid var(--border-hairline) !important;
    color: var(--text-primary) !important;
}

.fi-btn-color-gray:hover {
    background-color: var(--surface-container-high) !important;
}

/* Modals & Dropdown Panels */
.fi-modal-window {
    background-color: var(--surface-card) !important;
    border: 1px solid var(--border-hairline) !important;
    color: var(--text-primary) !important;
    border-radius: 14px !important;
}

.fi-modal-header {
    border-bottom: 1px solid var(--border-hairline) !important;
}

.fi-modal-footer {
    border-top: 1px solid var(--border-hairline) !important;
    background-color: var(--surface-container-low) !important;
}

/* Filament Dropdown Panels (Top-tier z-index to always render above tables, sticky columns and headers) */
.fi-dropdown-panel {
    z-index: 99999 !important;
    background-color: #FFFFFF !important;
    border: 1px solid #DFE2EC !important;
    box-shadow: 0 20px 45px -5px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 103, 104, 0.1) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.dark .fi-dropdown-panel {
    background-color: #141519 !important;
    border: 1px solid #2A2B30 !important;
    box-shadow: 0 25px 60px -5px rgba(0, 0, 0, 0.9), 0 0 25px rgba(26, 201, 138, 0.25) !important;
}

.fi-dropdown-list {
    background-color: transparent !important;
    position: relative !important;
    z-index: 99999 !important;
}

.fi-dropdown-list-item {
    transition: all 0.15s ease !important;
    position: relative !important;
    z-index: 99999 !important;
}

.fi-dropdown-list-item:hover {
    background-color: rgba(0, 103, 104, 0.08) !important;
    color: #006768 !important;
}

.dark .fi-dropdown-list-item:hover {
    background-color: rgba(26, 201, 138, 0.12) !important;
    color: #1AC98A !important;
}

/* Ensure active table row and cell with an open menu stays completely on top of ALL adjacent rows */
.fi-ta-row:has(.fi-dropdown-open),
.fi-ta-row:has([data-dropdown-open="true"]),
.fi-ta-row:has([aria-expanded="true"]),
.fi-ta-row:has(.fi-dropdown-panel:not([style*="display: none"])),
.fi-ta-row:focus-within {
    position: relative !important;
    z-index: 9999 !important;
}

.fi-ta-cell:has(.fi-dropdown-open),
.fi-ta-cell:has([data-dropdown-open="true"]),
.fi-ta-cell:has([aria-expanded="true"]),
.fi-ta-cell:has(.fi-dropdown-panel:not([style*="display: none"])),
.fi-ta-cell:focus-within {
    position: relative !important;
    z-index: 9999 !important;
}

.fi-ta-cell.fi-ta-actions-cell:has(.fi-dropdown-open),
.fi-ta-cell.fi-ta-actions-cell:has([data-dropdown-open="true"]),
.fi-ta-cell.fi-ta-actions-cell:has([aria-expanded="true"]),
.fi-ta-cell.fi-ta-actions-cell:has(.fi-dropdown-panel:not([style*="display: none"])) {
    position: sticky !important;
    z-index: 9999 !important;
}

.fi-dropdown.fi-dropdown-open,
.fi-dropdown[data-dropdown-open="true"],
.fi-dropdown:has([aria-expanded="true"]),
.fi-dropdown:has(.fi-dropdown-panel:not([style*="display: none"])) {
    position: relative !important;
    z-index: 99999 !important;
}

/* ==========================================================================
   9. RECAD LOGIN PAGE & HIGH-PERFORMANCE INFINITY ANIMATION SYSTEM
   ========================================================================== */

/* 1. Subtle Dot Matrix Tech Grid */
.recad-auth-grid-pattern {
    background-image: radial-gradient(rgba(0, 103, 104, 0.12) 1.2px, transparent 1.2px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 80%);
}

.dark .recad-auth-grid-pattern {
    background-image: radial-gradient(rgba(26, 201, 138, 0.10) 1.2px, transparent 1.2px);
}

/* 2. Hardware-Accelerated Ambient Aurora Drift (0% CPU, 60fps) */
@keyframes auroraFloat1 {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(30px, 40px, 0) scale(1.1); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes auroraFloat2 {
    0% { transform: translate3d(0, 0, 0) scale(1.1); }
    50% { transform: translate3d(-35px, -30px, 0) scale(0.95); }
    100% { transform: translate3d(0, 0, 0) scale(1.1); }
}

.recad-ambient-aurora-1 {
    animation: auroraFloat1 16s ease-in-out infinite;
    will-change: transform;
}

.recad-ambient-aurora-2 {
    animation: auroraFloat2 20s ease-in-out infinite;
    will-change: transform;
}

/* 3. Infinite Rotating Conic Aura Ring (Around Brand Logo) */
@keyframes infinityConicSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.recad-infinity-aura {
    background: conic-gradient(from 0deg, transparent 0%, #006768 25%, #1AC98A 50%, #12A855 75%, transparent 100%);
    filter: blur(8px);
    opacity: 0.65;
    animation: infinityConicSpin 6s linear infinite;
    will-change: transform;
}

.dark .recad-infinity-aura {
    background: conic-gradient(from 0deg, transparent 0%, #008284 25%, #1AC98A 50%, #12A855 75%, transparent 100%);
    filter: blur(10px);
    opacity: 0.8;
}

/* 4. High-Performance SVG Infinity (∞) Loop Beam Flow */
@keyframes infinityDashFlow {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -260;
    }
}

.recad-infinity-flow {
    stroke-dasharray: 45 180;
    stroke-dashoffset: 0;
    animation: infinityDashFlow 3.5s linear infinite;
    filter: drop-shadow(0 0 4px #1AC98A);
}

/* 5. Infinite Subtle Perimeter Border Glow for Login Card */
@keyframes infinityCardBorderGlow {
    0%, 100% {
        box-shadow: 0 10px 40px -10px rgba(0, 103, 104, 0.12), 0 0 0 1px rgba(0, 103, 104, 0.18);
    }
    50% {
        box-shadow: 0 15px 50px -5px rgba(26, 201, 138, 0.22), 0 0 0 1.5px rgba(26, 201, 138, 0.4);
    }
}

.dark .recad-auth-card {
    animation: infinityCardBorderGlow 5s ease-in-out infinite;
}

/* 6. Form Button Shimmer & Tactile Response */
.recad-auth-card .fi-btn-primary {
    background: linear-gradient(135deg, #006768 0%, #008284 100%) !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(0, 103, 104, 0.3) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    min-height: 44px !important;
    border-radius: 12px !important;
}

.recad-auth-card .fi-btn-primary:hover {
    transform: translateY(-1.5px) !important;
    box-shadow: 0 6px 22px rgba(0, 103, 104, 0.45) !important;
    background: linear-gradient(135deg, #008284 0%, #1AC98A 100%) !important;
}

.dark .recad-auth-card .fi-btn-primary {
    background: linear-gradient(135deg, #008284 0%, #1AC98A 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 18px rgba(26, 201, 138, 0.35) !important;
}

.dark .recad-auth-card .fi-btn-primary:hover {
    box-shadow: 0 6px 26px rgba(26, 201, 138, 0.55) !important;
    background: linear-gradient(135deg, #0F8B8D 0%, #12A855 100%) !important;
}

/* 7. Input Fields Precision Styling in Auth Card */
.recad-auth-card input[type="email"],
.recad-auth-card input[type="password"],
.recad-auth-card input[type="text"] {
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
}

.dark .recad-auth-card input[type="email"],
.dark .recad-auth-card input[type="password"],
.dark .recad-auth-card input[type="text"] {
    background-color: #191B20 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
}

.dark .recad-auth-card input[type="email"]:focus,
.dark .recad-auth-card input[type="password"]:focus,
.dark .recad-auth-card input[type="text"]:focus {
    border-color: #1AC98A !important;
    box-shadow: 0 0 0 2px rgba(26, 201, 138, 0.25) !important;
}

/* Hide Default Duplicate Filament Simple Header in Auth Card */
.recad-auth-card .fi-simple-header {
    display: none !important;
}

/* ==========================================================================
   8. PRINT CSS
   ========================================================================== */

@media print {
    .fi-sidebar, .fi-topbar, aside, header {
        display: none !important;
    }
}