/*
 * Algeria Certify — Unified Theme CSS v8
 * Clean Professional White + Emerald — Light Mode Only
 * Dark mode fully removed.
 */

/* Force Western digits (0-9) across the entire platform — override Arabic-Indic (٠-٩) */
@font-face {
    font-family: 'WesternDigits';
    src: local('Inter'), local('Segoe UI'), local('Arial');
    unicode-range: U+0660-0669, U+06F0-06F9;
}
body, body * {
    font-variant-numeric: lining-nums tabular-nums;
}

/* =============================================
   1. CSS VARIABLES (Brand Tokens)
   ============================================= */
:root {
    --ac-primary: #10b981;
    --ac-primary-hover: #059669;
    --ac-primary-light: rgba(16, 185, 129, 0.08);
    --ac-secondary: #10b981;
    --ac-secondary-hover: #059669;
    --ac-font-ar: 'Cairo', ui-sans-serif, system-ui, sans-serif;
    --ac-font-en: 'Inter', 'Cairo', ui-sans-serif, system-ui, sans-serif;
    --ac-gradient: linear-gradient(160deg, #064e3b 0%, #10b981 50%, #34d399 100%);

    --ac-bg: #ffffff;
    --ac-surface: #ffffff;
    --ac-surface-hover: #f8fafc;
    --ac-border: #f1f5f9;
    --ac-border-strong: #e2e8f0;
    --ac-text: #0f172a;
    --ac-text-muted: #64748b;
    --ac-card-bg: #ffffff;
    --ac-card-border: #f1f5f9;
    --ac-card-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.04);
    --ac-sidebar-bg: #ffffff;
    --ac-sidebar-border: #e2e8f0;
    --ac-topbar-bg: #ffffff;
    --ac-topbar-border: #e2e8f0;
    --ac-nav-color: #475569;
    --ac-nav-hover-bg: #f1f5f9;
    --ac-nav-hover-color: #10b981;
    --ac-nav-active-bg: rgba(16, 185, 129, 0.08);
    --ac-nav-active-color: #10b981;
    --ac-nav-icon-color: #94a3b8;
    --ac-focus-ring: 0 0 0 3px rgba(16, 185, 129, 0.12);
    --ac-focus-border: rgba(16, 185, 129, 0.4);
}


/* =============================================
   2. BODY & MAIN CONTENT — Pure White
   ============================================= */
body,
.fi-body {
    background: var(--ac-bg) !important;
}

/* Main content area — light gray base */
.fi-main {
    background-color: #f8fafc !important;
}
.fi-main-ctn,
.fi-page,
.fi-layout,
.fi-app-layout {
    background: transparent !important;
}


/* =============================================
   3. GLOBAL FONT ENFORCEMENT
   ============================================= */
body, body * {
    font-family: 'Cairo', ui-sans-serif, system-ui, sans-serif !important;
}
[dir="ltr"] body, [dir="ltr"] body * {
    font-family: 'Inter', 'Cairo', ui-sans-serif, system-ui, sans-serif !important;
}
:lang(ar),
[dir="rtl"],
[dir="rtl"] * {
    font-family: var(--ac-font-ar) !important;
}
:lang(en),
[dir="ltr"],
[dir="ltr"] * {
    font-family: var(--ac-font-en) !important;
}
.fi-sidebar, .fi-sidebar *,
.fi-topbar, .fi-topbar *,
.fi-header, .fi-header * {
    font-family: var(--ac-font-ar) !important;
}
[dir="ltr"] .fi-sidebar *,
[dir="ltr"] .fi-topbar *,
[dir="ltr"] .fi-header * {
    font-family: var(--ac-font-en) !important;
}

/* =============================================
   4. SIDEBAR — White with Navy Text
   ============================================= */

.fi-sidebar.fi-main-sidebar {
    background: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
    box-shadow: 1px 0 8px rgba(0,0,0,.03) !important;
    transition: all .3s ease;
}
[dir="rtl"] .fi-sidebar.fi-main-sidebar {
    border-right: none !important;
    border-left: 1px solid #e2e8f0 !important;
    box-shadow: -1px 0 8px rgba(0,0,0,.03) !important;
}

/* Sidebar header — hidden (we use custom brand via renderHook) */
.fi-sidebar-header {
    display: none !important;
}

/* Custom brand widget injected via renderHook — compact 52px */
.ac-sidebar-brand {
    padding: 8px 12px;
    margin-bottom: 0;
    max-height: 52px;
    border-bottom: 1px solid #f1f5f9;
}
.ac-sidebar-brand-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
    transition: opacity .2s ease;
}
.ac-sidebar-brand-link:hover { opacity: .85; }
.ac-sidebar-brand-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(16,185,129,.2));
}
.ac-shield-svg { width: 100%; height: 100%; }
.ac-sidebar-brand-name {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .03em;
    line-height: 1.15;
    color: #0f172a;
}
.ac-sidebar-brand-sub {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #10b981;
    line-height: 1.2;
}

/* Language toggle — inline micro pills */
.ac-lang-switch {
    padding: 2px 12px 4px;
    display: flex;
    gap: 2px;
}
.ac-lang-switch a {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 800;
    text-decoration: none;
    transition: all .15s;
    line-height: 1.4;
}

/* Sidebar nav groups — zero-waste spacing */
.fi-sidebar-nav-groups {
    padding: 2px 0 0;
}
.fi-sidebar-nav {
    padding: 0 6px !important;
}

/* Sidebar group — tight 16px top margin */
.fi-sidebar-group {
    margin-top: 16px !important;
}
.fi-sidebar-group:first-child {
    margin-top: 4px !important;
}

/* Sidebar group label — 11px uppercase muted */
.fi-sidebar-group > button > span,
.fi-sidebar-group-label {
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    color: #94a3b8 !important;
    padding: 0 10px !important;
}
.fi-sidebar-group > button {
    padding: 2px 0 !important;
    min-height: auto !important;
}
/* Group collapse icon — tiny */
.fi-sidebar-group > button svg {
    width: 12px !important;
    height: 12px !important;
}

/* Sidebar nav items — tight 6px vertical, 14px font */
.fi-sidebar-item > a,
.fi-sidebar-item > button {
    border-radius: 6px !important;
    transition: all .15s ease !important;
    border: none !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 6px 10px !important;
    min-height: auto !important;
    gap: 8px !important;
    margin: 1px 0 !important;
}

/* Hover */
.fi-sidebar-item > a:hover,
.fi-sidebar-item > button:hover {
    background: #f8fafc !important;
    color: #10b981 !important;
}

/* Active sidebar item — blue left/right border 3px */
.fi-sidebar-item-active > a,
.fi-sidebar-item-active > button {
    background: rgba(16,185,129,.06) !important;
    color: #10b981 !important;
    font-weight: 600 !important;
    border: none !important;
    box-shadow: none !important;
    border-right: 3px solid #10b981 !important;
}
[dir="ltr"] .fi-sidebar-item-active > a,
[dir="ltr"] .fi-sidebar-item-active > button {
    border-right: none !important;
    border-left: 3px solid #10b981 !important;
}

/* Sidebar item icons — 16px */
.fi-sidebar-item-icon {
    color: #94a3b8 !important;
    transition: color .15s ease !important;
    width: 16px !important;
    height: 16px !important;
}
.fi-sidebar-item > a:hover .fi-sidebar-item-icon,
.fi-sidebar-item > button:hover .fi-sidebar-item-icon {
    color: #10b981 !important;
}
.fi-sidebar-item-active > a .fi-sidebar-item-icon,
.fi-sidebar-item-active > button .fi-sidebar-item-icon {
    color: #10b981 !important;
}

/* Sidebar badge — 18px blue pill white text */
.fi-sidebar-item .fi-badge {
    border: none !important;
    background: #10b981 !important;
    color: #ffffff !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    border-radius: 99px !important;
    line-height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* Warning badge override */
.fi-sidebar-item .fi-badge[class*="warning"] {
    background: #f59e0b !important;
    color: #ffffff !important;
}
/* Danger badge override */
.fi-sidebar-item .fi-badge[class*="danger"] {
    background: #ef4444 !important;
    color: #ffffff !important;
}

/* Sidebar footer — minimal */
.fi-sidebar-footer {
    border-top: 1px solid #f1f5f9 !important;
    padding: 4px 8px !important;
}

/* Sidebar collapse button */
.fi-sidebar-close-btn,
.fi-sidebar [class*="collapse"] button {
    color: #94a3b8 !important;
}
.fi-sidebar-close-btn:hover,
.fi-sidebar [class*="collapse"] button:hover {
    color: #10b981 !important;
    background: #f1f5f9 !important;
}

/* Logout link — small muted text at bottom */
.ac-logout-link {
    padding: 4px 12px 6px;
    text-align: center;
}
.ac-logout-link button {
    background: none !important;
    border: none !important;
    color: #94a3b8 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: color .15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
}
.ac-logout-link button:hover {
    color: #ef4444 !important;
}


/* =============================================
   5. TOPBAR — White with Navy text
   ============================================= */
.fi-topbar {
    background: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    position: relative;
}
.fi-topbar-ctn {
    background: transparent !important;
}

/* Topbar text — navy color */
.fi-topbar,
.fi-topbar *:not(svg):not(path) {
    color: #0f172a;
}
.fi-topbar .fi-icon-btn {
    color: #0f172a !important;
}
.fi-topbar .fi-icon-btn:hover {
    color: #10b981 !important;
    background: rgba(16,185,129,.06) !important;
}

/* Topbar nav items */
.fi-topbar-item {
    color: #1e293b !important;
    transition: all .2s ease !important;
    border-radius: .5rem !important;
}
.fi-topbar-item:hover {
    color: #0f172a !important;
    background: #f8fafc !important;
}
.fi-topbar-item-active {
    color: #10b981 !important;
    background: rgba(16,185,129,.08) !important;
}

/* Global search input in topbar */
.fi-topbar .fi-input-wrp {
    background: var(--ac-surface-hover) !important;
    border-color: var(--ac-border-strong) !important;
    border-radius: .5rem !important;
}
.fi-topbar .fi-input-wrp input {
    color: var(--ac-text) !important;
}
.fi-topbar .fi-input-wrp input::placeholder {
    color: var(--ac-nav-icon-color) !important;
}


/* =============================================
   6. LOGIN / AUTH PAGES — Dark gradient bg + White card
   ============================================= */
.fi-simple-main {
    background: linear-gradient(135deg, #0A0F1E 0%, #064e3b 60%, #10b981 100%) !important;
    min-height: 100dvh;
}
.fi-simple-layout {
    background: transparent !important;
}
.fi-simple-main-ctn {
    background: #ffffff !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 80px -15px rgba(0,0,0,.4), 0 8px 30px rgba(0,0,0,.15) !important;
}
/* Labels — dark slate on white card */
.fi-simple-main-ctn .fi-form-component-decorator-label,
.fi-simple-main-ctn label,
.fi-simple-page label,
.fi-simple-page .fi-input-wrp label,
.fi-simple-page .fi-fo-field-wrp > label,
.fi-simple-page .fi-field-wrp > label {
    color: #1e293b !important;
}
/* Inputs — white bg, dark text, clean borders */
.fi-simple-main-ctn .fi-input-wrp,
.fi-simple-page .fi-input-wrp {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
}
.fi-simple-main-ctn .fi-input-wrp:focus-within,
.fi-simple-page .fi-input-wrp:focus-within {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .1) !important;
}
.fi-simple-main-ctn input,
.fi-simple-main-ctn select,
.fi-simple-page input,
.fi-simple-page select,
.fi-simple-page textarea {
    color: #0f172a !important;
    background: transparent !important;
}
.fi-simple-main-ctn input::placeholder,
.fi-simple-page input::placeholder,
.fi-simple-page textarea::placeholder {
    color: #94a3b8 !important;
}
.fi-simple-main-ctn select option,
.fi-simple-page select option {
    background: #ffffff !important;
    color: #0f172a !important;
}
/* Links — blue on white */
.fi-simple-main-ctn a,
.fi-simple-page a:not(.fi-btn) {
    color: #10b981 !important;
}
.fi-simple-main-ctn a:hover,
.fi-simple-page a:not(.fi-btn):hover {
    color: #059669 !important;
}
/* Headings — dark on white */
.fi-simple-main-ctn h1,
.fi-simple-main-ctn .fi-simple-header-heading,
.fi-simple-page .fi-simple-header-heading {
    color: #0f172a !important;
}
.fi-simple-main-ctn .fi-simple-header-subheading,
.fi-simple-page .fi-simple-header-subheading {
    color: #64748b !important;
}
/* Checkbox / toggle labels */
.fi-simple-main-ctn .fi-checkbox-label,
.fi-simple-page .fi-checkbox-label,
.fi-simple-main-ctn .fi-fo-field-wrp p,
.fi-simple-page .fi-fo-field-wrp p {
    color: #475569 !important;
}
/* Helper / description text */
.fi-simple-main-ctn .fi-fo-field-wrp .fi-input-wrp + p,
.fi-simple-page .fi-fo-field-wrp .fi-input-wrp + p,
.fi-simple-main-ctn .fi-form-component-decorator-description,
.fi-simple-page .fi-form-component-decorator-description {
    color: #94a3b8 !important;
}
/* Validation error text */
.fi-simple-main-ctn .fi-fo-field-wrp-error-message,
.fi-simple-page .fi-fo-field-wrp-error-message {
    color: #dc2626 !important;
}
/* Fieldset / Section headings on auth pages */
.fi-simple-main-ctn .fi-fieldset-label,
.fi-simple-page .fi-fieldset-label,
.fi-simple-main-ctn .fi-section-header-heading,
.fi-simple-page .fi-section-header-heading {
    color: #0f172a !important;
}
.fi-simple-main-ctn .fi-fieldset-description,
.fi-simple-page .fi-fieldset-description,
.fi-simple-main-ctn .fi-section-header-description,
.fi-simple-page .fi-section-header-description {
    color: #64748b !important;
}
/* Toggle / checkbox accent */
.fi-simple-main-ctn .fi-toggle,
.fi-simple-page .fi-toggle {
    accent-color: #10b981;
}


/* =============================================
   7. PANEL-SPECIFIC LOGIN BUTTON COLORS
   ============================================= */
[data-panel-id="admin"] .fi-simple-main-ctn .fi-btn-color-primary,
[data-panel-id="user"] .fi-simple-main-ctn .fi-btn-color-primary,
[data-panel-id="student"] .fi-simple-main-ctn .fi-btn-color-primary,
[data-panel-id="client"] .fi-simple-main-ctn .fi-btn-color-primary,
[data-panel-id="recruiter"] .fi-simple-main-ctn .fi-btn-color-primary {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(16,185,129,.25) !important;
}


/* =============================================
   7B. SPLIT-SCREEN REGISTRATION LAYOUT
   ============================================= */

/* Register pages: widen the container and go split-screen */
.fi-simple-layout:has(.ac-register-brand) .fi-simple-main-ctn {
    max-width: 1100px !important;
    width: 95vw !important;
    display: flex !important;
    flex-direction: row !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Left branded panel — stays dark navy for contrast */
.fi-simple-layout:has(.ac-register-brand) .ac-register-brand {
    display: flex !important;
    width: 400px;
    min-width: 400px;
    background: linear-gradient(160deg, #0b1220 0%, #0f1d3d 60%, #064e3b 100%);
    border-right: 1px solid #e2e8f0;
    border-radius: 24px 0 0 24px;
    position: relative;
    overflow: hidden;
}
[dir="rtl"] .fi-simple-layout:has(.ac-register-brand) .ac-register-brand {
    border-radius: 0 24px 24px 0;
}
[dir="rtl"] .fi-simple-layout:has(.ac-register-brand) .ac-register-brand {
    border-right: none;
    border-left: 1px solid rgba(255,255,255,.06);
}
.ac-register-brand::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                       linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, #000 20%, transparent 100%);
    pointer-events: none;
}
.ac-register-brand::after {
    content: '';
    position: absolute;
    bottom: -20%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: rgba(16, 185, 129, .12);
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}
.ac-register-brand-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 3rem 2.5rem;
    min-height: 100%;
}

/* Right form side — takes remaining space */
.fi-simple-layout:has(.ac-register-brand) .fi-simple-main {
    flex: 1;
    padding: 2.5rem 2.5rem !important;
    max-width: none !important;
    overflow-y: auto;
    max-height: 95vh;
}

/* Terms checkbox link styling for auth pages */
.fi-simple-main-ctn .fi-checkbox-label a {
    color: #10b981 !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
}
.fi-simple-main-ctn .fi-checkbox-label a:hover {
    color: #059669 !important;
}

/* Mobile: stack vertically, hide brand panel */
@media (max-width: 900px) {
    .fi-simple-layout:has(.ac-register-brand) .fi-simple-main-ctn {
        flex-direction: column !important;
        width: 95vw !important;
        max-width: 560px !important;
    }
    .fi-simple-layout:has(.ac-register-brand) .ac-register-brand {
        display: none !important;
    }
    .fi-simple-layout:has(.ac-register-brand) .fi-simple-main {
        max-height: none;
        padding: 2rem 1.5rem !important;
    }
}


/* =============================================
   8. DASHBOARD WIDGET CARDS — Gradient Style
   ============================================= */

/* Stat cards — gradient backgrounds */
.fi-wi-stats-overview-stat {
    border-radius: 1rem !important;
    border: 1px solid var(--ac-card-border) !important;
    box-shadow: var(--ac-card-shadow) !important;
    transition: all .25s cubic-bezier(.4,0,.2,1) !important;
    overflow: hidden;
    position: relative;
}
.fi-wi-stats-overview-stat::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .25s ease;
    border-radius: inherit;
    pointer-events: none;
}
.fi-wi-stats-overview-stat:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.12) !important;
}
.fi-wi-stats-overview-stat:hover::before {
    opacity: 1;
}

/* Subtle gradient tint per color */
.fi-wi-stats-overview-stat[class*="success"] { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important; }
.fi-wi-stats-overview-stat[class*="info"] { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important; }
.fi-wi-stats-overview-stat[class*="warning"] { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important; }
.fi-wi-stats-overview-stat[class*="danger"] { background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%) !important; }
.fi-wi-stats-overview-stat[class*="primary"] { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important; }

/* Chart widgets */
.fi-wi-chart {
    border-radius: .75rem !important;
    background: var(--ac-card-bg) !important;
    border: 1px solid var(--ac-card-border) !important;
    box-shadow: var(--ac-card-shadow) !important;
}

/* General Filament sections */
.fi-section {
    border-radius: .75rem !important;
    border: 1px solid var(--ac-card-border) !important;
    box-shadow: var(--ac-card-shadow) !important;
}

/* Tables */
.fi-ta {
    border: 1px solid var(--ac-card-border) !important;
    box-shadow: var(--ac-card-shadow) !important;
}
.fi-ta-header-cell {
    border-color: var(--ac-border) !important;
}

/* Table container */
.fi-ta-ctn {
    background: var(--ac-card-bg) !important;
    border: 1px solid var(--ac-card-border) !important;
    border-radius: .75rem !important;
    box-shadow: var(--ac-card-shadow) !important;
}


/* =============================================
   9. BRAND LOGO SIZING
   ============================================= */
.fi-sidebar-header img,
.fi-sidebar-header-logo-ctn img,
.fi-topbar img[src*="logo"] {
    height: 2.5rem !important;
    width: auto !important;
    object-fit: contain !important;
}
.fi-simple-main-ctn img[src*="logo"] {
    height: 3rem !important;
    width: auto !important;
    object-fit: contain !important;
}


/* =============================================
   10. SUBTLE ANIMATIONS
   ============================================= */
.fi-sidebar-item > a,
.fi-sidebar-item > button,
.fi-topbar-item,
.fi-btn {
    transition: all .2s ease !important;
}

/* Smooth page transitions for SPA mode */
.fi-main-ctn {
    animation: acFadeIn .25s ease;
}
@keyframes acFadeIn {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}


/* =============================================
   11. GLOBAL INTERACTIVE DELIGHT
   ============================================= */

/* Primary buttons — Blue with glow */
.fi-btn-color-primary {
    background: #10b981 !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
    box-shadow: 0 8px 20px -6px rgba(16, 185, 129, 0.5) !important;
}
.fi-btn-color-primary:hover {
    background: #059669 !important;
    box-shadow: 0 12px 28px -6px rgba(16, 185, 129, 0.6) !important;
    transform: translateY(-1px) !important;
}
.fi-btn-color-primary:active {
    background: #059669 !important;
    transform: translateY(0) !important;
    box-shadow: 0 4px 12px -4px rgba(16, 185, 129, 0.4) !important;
}

/* Success buttons — Blue glow */
.fi-btn-color-success {
    box-shadow: 0 8px 20px -6px rgba(16, 185, 129, 0.4) !important;
}
.fi-btn-color-success:hover {
    box-shadow: 0 12px 28px -6px rgba(16, 185, 129, 0.5) !important;
    transform: translateY(-1px) !important;
}

/* Danger buttons — Rose glow */
.fi-btn-color-danger {
    box-shadow: 0 8px 20px -6px rgba(225, 29, 72, 0.4) !important;
}
.fi-btn-color-danger:hover {
    box-shadow: 0 12px 28px -6px rgba(225, 29, 72, 0.5) !important;
    transform: translateY(-1px) !important;
}

/* All buttons — base transition */
.fi-btn {
    transition: all .2s ease !important;
}
.fi-btn:hover {
    transform: translateY(-1px) !important;
}
.fi-btn:active {
    transform: translateY(0) !important;
}

/* Stat card entry animation */
@keyframes acStatFadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.fi-wi-stats-overview-stat {
    animation: acStatFadeUp .4s ease both !important;
}
.fi-wi-stats-overview-stat:nth-child(1) { animation-delay: 0s !important; }
.fi-wi-stats-overview-stat:nth-child(2) { animation-delay: .06s !important; }
.fi-wi-stats-overview-stat:nth-child(3) { animation-delay: .12s !important; }
.fi-wi-stats-overview-stat:nth-child(4) { animation-delay: .18s !important; }
.fi-wi-stats-overview-stat:nth-child(5) { animation-delay: .24s !important; }

/* Stat icon — constrain size & hover */
.fi-wi-stats-overview-stat-icon {
    width: 2.5rem !important;
    height: 2.5rem !important;
    max-width: 2.5rem !important;
    max-height: 2.5rem !important;
    min-width: 2.5rem !important;
    min-height: 2.5rem !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    transition: transform .2s ease !important;
}
.fi-wi-stats-overview-stat-icon svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 2.5rem !important;
    max-height: 2.5rem !important;
}
.fi-wi-stats-overview-stat:hover .fi-wi-stats-overview-stat-icon {
    transform: scale(1.1) !important;
}

/* Global icon safety — prevent raw SVGs from overflowing containers.
   Scoped to stat widgets only (not custom widget SVGs like VTI circle). */
.fi-wi-stats-overview-stat svg:not(.fi-wi-stats-overview-stat-icon svg) {
    max-width: 2.5rem !important;
    max-height: 2.5rem !important;
}
.fi-page-header svg,
.fi-section-header svg {
    max-width: 3rem !important;
    max-height: 3rem !important;
}

/* Table row hover */
.fi-ta-row {
    transition: background .15s ease !important;
    border-color: var(--ac-border) !important;
}

/* Section hover */
.fi-section:hover {
    box-shadow: 0 14px 44px -10px rgba(0, 0, 0, 0.07) !important;
}


/* =============================================
   12. SPA PROGRESS BAR
   ============================================= */
@keyframes acProgressSlide {
    0%   { width: 0; }
    20%  { width: 30%; }
    60%  { width: 70%; }
    100% { width: 100%; }
}
@keyframes acProgressFade {
    to { opacity: 0; }
}
.fi-topbar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, var(--ac-primary), var(--ac-secondary));
    border-radius: 0 1px 1px 0;
    opacity: 0;
    pointer-events: none;
    z-index: 100;
    transition: opacity .2s ease;
}
.fi-topbar.fi-loading::after {
    animation: acProgressSlide .8s cubic-bezier(.4,0,.2,1) forwards,
               acProgressFade .3s .8s ease forwards;
    opacity: 1;
}

/* Skeleton shimmer */
@keyframes acShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.fi-skeleton,
.fi-wi-stats-overview-stat[wire\:loading] {
    background: linear-gradient(90deg,
        #f8fafc 25%, #f1f5f9 50%, #f8fafc 75%
    ) !important;
    background-size: 200% 100% !important;
    animation: acShimmer 1.5s ease-in-out infinite !important;
}


/* =============================================
   13. FORM INPUTS & FOCUS
   ============================================= */
.fi-sidebar-nav a,
.fi-sidebar-nav button,
.fi-header-nav-item,
a[class*="fi-tabs-item"] {
    transition: all .2s ease !important;
}

/* Form input focus — blue ring */
.fi-input-wrp {
    border-color: var(--ac-border-strong) !important;
    transition: all .15s ease !important;
}
.fi-input-wrp:focus-within {
    border-color: var(--ac-focus-border) !important;
    box-shadow: var(--ac-focus-ring) !important;
}

/* Modal animation */
.fi-modal-window {
    animation: acFadeIn .2s ease !important;
}


/* =============================================
   14. REFINED GLOBAL BORDERS
   ============================================= */

/* Page header */
.fi-page-header {
    border-color: var(--ac-border) !important;
}

/* Breadcrumbs */
.fi-breadcrumbs {
    color: var(--ac-nav-icon-color) !important;
}

/* Tabs */
.fi-tabs {
    border-color: var(--ac-border) !important;
}
.fi-tabs-item {
    border-color: transparent !important;
    transition: all .2s ease !important;
}
.fi-tabs-item-active {
    border-color: var(--ac-primary) !important;
    color: var(--ac-primary) !important;
}

/* Notifications */
.fi-notification {
    border: 1px solid var(--ac-card-border) !important;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08) !important;
}

/* Dropdown menus */
.fi-dropdown-panel {
    border: 1px solid var(--ac-card-border) !important;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08) !important;
    border-radius: .5rem !important;
}

/* User avatar ring */
.fi-avatar {
    box-shadow: 0 0 0 2px var(--ac-border-strong) !important;
}

/* Badge */
.fi-badge {
    border: 1px solid var(--ac-border) !important;
}

/* Modal overlay */
.fi-modal-close-overlay {
    background: rgba(15, 23, 42, .2) !important;
    backdrop-filter: blur(4px) !important;
}

/* Action groups */
.fi-ac-group-btn {
    border-color: var(--ac-border) !important;
}

/* Pagination */
.fi-pagination-item {
    border-color: var(--ac-border) !important;
}

/* Infolist entries */
.fi-in-entry-wrp {
    border-color: var(--ac-border) !important;
}

/* Form sections */
.fi-fo-component-ctn {
    border-color: var(--ac-border) !important;
}

/* Widget containers */
.fi-wi {
    border-color: var(--ac-border) !important;
}


/* =============================================
   15. WELCOME WIDGET THEMING
   ============================================= */
:root {
    --ac-welcome-from: #ecfdf5;
    --ac-welcome-to: #d1fae5;
    --ac-welcome-card-bg: #ffffff;
    --ac-welcome-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    --ac-welcome-title: #0f172a;
    --ac-welcome-desc: #64748b;
    --ac-welcome-text: #1e293b;
    --ac-welcome-text-sub: #64748b;
    --ac-welcome-arrow: #cbd5e1;
    --ac-welcome-btn-bg: linear-gradient(135deg, #10b981, #059669);
    --ac-welcome-btn-color: #ffffff;
    --ac-welcome-btn-shadow: 0 4px 14px rgba(16, 185, 129, .2);
}


/* =============================================
   16. FONT AWESOME OVERRIDE — Prevent Cairo from
       clobbering FA icon glyphs (Section 3 uses
       `body *` with !important which kills FA).
   ============================================= */
.fas, .far, .fa-solid, .fa-regular, .fa, i[class*="fa-"],
.fas::before, .far::before, .fa-solid::before, .fa-regular::before, .fa::before, i[class*="fa-"]::before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}
.fab, .fa-brands, .fab::before, .fa-brands::before {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}


/* =============================================
   17. LIGHT MODE HARDENING — All Panels
   Ensures white + blue professional look across
   every Filament panel.
   ============================================= */

/* All form labels — always dark text */
.fi-form-component-decorator-label,
.fi-fo-field-wrp > label,
.fi-field-wrp > label,
label {
    color: #1e293b !important;
}

/* Section & fieldset headings — always dark */
.fi-section-header-heading,
.fi-fieldset-label {
    color: #0f172a !important;
}
.fi-section-header-description,
.fi-fieldset-description {
    color: #64748b !important;
}

/* Input text — always dark on white */
.fi-input-wrp input,
.fi-input-wrp select,
.fi-input-wrp textarea {
    color: #0f172a !important;
}
.fi-input-wrp input::placeholder,
.fi-input-wrp textarea::placeholder {
    color: #94a3b8 !important;
}

/* Page headings — always navy */
.fi-page-header-heading,
.fi-header-heading {
    color: #0f172a !important;
}
.fi-page-header-subheading {
    color: #64748b !important;
}

/* Table text — always dark */
.fi-ta-cell,
.fi-ta-row {
    color: #1e293b !important;
}
.fi-ta-header-cell {
    color: #475569 !important;
}

/* Infolist text — always dark */
.fi-in-text-item-value {
    color: #0f172a !important;
}
.fi-in-entry-wrp-label {
    color: #64748b !important;
}

/* Widget text */
.fi-wi-stats-overview-stat-label {
    color: #64748b !important;
}
.fi-wi-stats-overview-stat-value {
    color: #0f172a !important;
}
.fi-wi-stats-overview-stat-description {
    color: #64748b !important;
}

/* Checkbox / toggle labels */
.fi-checkbox-label,
.fi-fo-field-wrp p {
    color: #475569 !important;
}

/* Helper / description text */
.fi-form-component-decorator-description {
    color: #94a3b8 !important;
}

/* Validation error text */
.fi-fo-field-wrp-error-message {
    color: #dc2626 !important;
}


/* =============================================
   18. GLOBAL HARDENING
   ============================================= */

/* Stat cards — universal white base */
.fi-wi-stats-overview-stat-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

/* SVG overflow guard — prevent any SVG from breaking layout */
svg {
    max-width: 100%;
    height: auto;
}

/* Giant icon glitch fix — force fixed SVG sizes in Filament widgets & icon buttons */
.fi-wi-stats-overview-stat-icon-ctn svg {
    width: 2.5rem !important;
    height: 2.5rem !important;
}
.fi-icon-btn svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
}

/* Global failsafe for custom widget SVGs — prevent any SVG from taking over the screen */
.fi-widget svg:not(.qr-img),
.fi-wi svg:not(.qr-img),
[class*="fi-wi-"] svg:not(.qr-img):not([style*="width:140px"]) {
    max-width: 4rem !important;
    max-height: 4rem !important;
}

/* Filament section/widget icon containers — hard constraint */
.fi-section svg:not(.qr-img):not([viewBox="0 0 120 120"]),
x-filament-widgets svg:not(.qr-img):not([viewBox="0 0 120 120"]) {
    max-width: 4rem !important;
    max-height: 4rem !important;
}


/* =============================================
   19. FORM CONTRAST FIX — "White-on-White" Bug
   Ensures all labels, inputs, and selects are
   always legible on white backgrounds.
   ============================================= */

/* Field wrapper labels — dark slate, semi-bold */
.fi-fo-field-wrp-label span {
    color: #1e293b !important;
    font-weight: 600 !important;
}

/* All Filament inputs — dark text, visible border */
.fi-input {
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

/* Select input text — dark */
.fi-select-input {
    color: #0f172a !important;
}

/* Select trigger / button text */
.fi-select-trigger,
.fi-select-option {
    color: #0f172a !important;
}

/* Ensure select dropdown options are legible */
.fi-select-option:hover {
    background: #ecfdf5 !important;
    color: #064e3b !important;
}

/* Rich select / searchable select — text visibility */
[class*="fi-select"] input,
[class*="fi-select"] input::placeholder {
    color: #0f172a !important;
}
[class*="fi-select"] input::placeholder {
    color: #94a3b8 !important;
}

/* Radio & checkbox label text */
.fi-radio-label,
.fi-checkbox-label {
    color: #1e293b !important;
}

/* Textarea text */
.fi-textarea {
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

/* Date/time picker text */
.fi-date-time-picker input {
    color: #0f172a !important;
}

/* Tags input text */
.fi-tags-input input {
    color: #0f172a !important;
}

/* =============================================
   20B. WIZARD BUTTONS — Prominent Submit
   ============================================= */

/* Wizard next/submit button — full width prominent */
.fi-wizard-footer .fi-btn-color-primary {
    width: 100% !important;
    padding: 14px 24px !important;
    font-weight: 800 !important;
    font-size: .95rem !important;
    border-radius: 12px !important;
    justify-content: center !important;
}

/* Wizard previous button — visible outline */
.fi-wizard-footer .fi-btn-color-gray {
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px 20px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    background: #ffffff !important;
}
.fi-wizard-footer .fi-btn-color-gray:hover {
    border-color: #10b981 !important;
    color: #10b981 !important;
    background: #f8fafc !important;
}


/* =============================================
   20. FILE UPLOAD DROPZONE — Prominent Style
   ============================================= */

.fi-fo-file-upload [data-field-wrapper] > div > div:first-child,
.fi-fo-file-upload .filepond--root,
.fi-fo-file-upload .filepond--panel-root {
    background: #f8fafc !important;
    border: 2px dashed #10b981 !important;
    border-radius: 16px !important;
    min-height: 120px !important;
    transition: all .2s ease !important;
}
.fi-fo-file-upload:hover .filepond--panel-root,
.fi-fo-file-upload:hover [data-field-wrapper] > div > div:first-child {
    background: #ecfdf5 !important;
    border-color: #059669 !important;
}
.fi-fo-file-upload .filepond--drop-label {
    color: #475569 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}
.fi-fo-file-upload .filepond--label-action {
    color: #10b981 !important;
    font-weight: 800 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}


/* =============================================
   21. PREMIUM DASHBOARD ANIMATIONS & UTILITIES
   ============================================= */

/* Animated mesh gradient rotation for hero widgets */
@keyframes acMeshShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Pulsing live indicator dot */
@keyframes acPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .5; transform: scale(1.6); }
}

/* Timeline entry slide-in */
@keyframes acSlideInTimeline {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}
[dir="rtl"] .ac-timeline-entry {
    animation-name: acSlideInTimeline;
}

/* Attention pulse ring (for pending approvals, alerts) */
@keyframes acAttentionRing {
    0%   { box-shadow: 0 0 0 0 rgba(239,68,68,.4); }
    70%  { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
    100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

/* Glassmorphism utility */
.ac-glass {
    background: rgba(255,255,255,.07);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.1);
}

/* Live pulsing dot */
.ac-live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #22c55e;
    animation: acPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

/* Sparkline SVG container */
.ac-sparkline {
    display: block;
    width: 100%;
    height: 32px;
    direction: ltr;
}

/* Premium stat card base */
.ac-stat-card {
    position: relative;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.04);
    padding: 20px;
    overflow: hidden;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    animation: acStatFadeUp .4s ease both;
}
.ac-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -12px rgba(16,185,129,.12);
}

/* Staggered entry for stat cards */
.ac-stat-card:nth-child(1) { animation-delay: 0s; }
.ac-stat-card:nth-child(2) { animation-delay: .08s; }
.ac-stat-card:nth-child(3) { animation-delay: .16s; }
.ac-stat-card:nth-child(4) { animation-delay: .24s; }
.ac-stat-card:nth-child(5) { animation-delay: .32s; }

/* Override SVG constraint inside custom dashboard widgets */
.ac-dashboard-widget svg {
    max-width: none !important;
    max-height: none !important;
}


/* =============================================
   22. PREMIUM TABLE & RESOURCE POLISH
   ============================================= */

/* Table container — premium card feel */
.fi-ta-ctn {
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
    overflow: hidden !important;
}

/* Table header — subtle emerald tint */
.fi-ta-header-ctn {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* Table header cells — uppercase, spaced */
.fi-ta-header-cell {
    font-size: .7rem !important;
    font-weight: 800 !important;
    letter-spacing: .03em !important;
    text-transform: uppercase !important;
    color: #64748b !important;
    padding: 12px 16px !important;
}

/* Table rows — clean borders + hover */
.fi-ta-row {
    border-color: #f1f5f9 !important;
    transition: all .15s ease !important;
}
.fi-ta-row:hover {
    background: #f8fafc !important;
}

/* Table cells — comfortable padding */
.fi-ta-cell {
    padding: 12px 16px !important;
    font-size: .82rem !important;
}

/* Table search/filter bar */
.fi-ta-header-toolbar {
    padding: 12px 16px !important;
    gap: 8px !important;
}

/* Table empty state — nicer */
.fi-ta-empty-state {
    padding: 3rem 1rem !important;
}
.fi-ta-empty-state-icon {
    color: #cbd5e1 !important;
}
.fi-ta-empty-state-heading {
    color: #1e293b !important;
    font-weight: 800 !important;
}
.fi-ta-empty-state-description {
    color: #94a3b8 !important;
}

/* Pagination — modern pills */
.fi-ta-pagination {
    padding: 12px 16px !important;
    border-top: 1px solid #f1f5f9 !important;
}

/* Action buttons in tables — consistent */
.fi-ta-actions .fi-btn {
    border-radius: 8px !important;
    font-size: .75rem !important;
    font-weight: 700 !important;
    padding: 6px 12px !important;
}

/* Resource page header — breathing room */
.fi-page-header {
    padding-bottom: 1rem !important;
    margin-bottom: .5rem !important;
}

/* Section cards — premium rounded */
.fi-section {
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
    transition: box-shadow .2s ease !important;
}
.fi-section:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.06) !important;
}

/* Section header — clean */
.fi-section-header {
    padding: 16px 20px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* Infolist — premium spacing */
.fi-in-entry-wrp {
    padding: 10px 0 !important;
    border-color: #f1f5f9 !important;
}

/* Badge polish */
.fi-badge {
    border-radius: 8px !important;
    font-size: .68rem !important;
    font-weight: 800 !important;
    padding: 3px 10px !important;
    letter-spacing: .02em !important;
}

/* Notification toast — premium */
.fi-notification {
    border-radius: 14px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.1) !important;
}

/* Modal — premium feel */
.fi-modal-window {
    border-radius: 20px !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.15) !important;
}

/* Dropdown — clean shadow */
.fi-dropdown-panel {
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.1) !important;
    border: 1px solid #e2e8f0 !important;
}

/* Checkbox & toggle — emerald accent */
input[type="checkbox"]:checked {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
}

/* Select option hover — emerald */
.fi-select-option:hover,
.fi-select-option[data-active] {
    background: #ecfdf5 !important;
    color: #059669 !important;
}


/* =============================================
   23. PREMIUM LOGIN PAGE
   ============================================= */

/* Login background — branded gradient */
.fi-simple-main {
    background: linear-gradient(160deg, #0b1220 0%, #064e3b 50%, #10b981 100%) !important;
    min-height: 100dvh;
    position: relative;
}
.fi-simple-main::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}
.fi-simple-main::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(16,185,129,.12);
    top: -100px;
    right: -50px;
    filter: blur(100px);
    pointer-events: none;
}

/* Login card — glass feel */
.fi-simple-main-ctn {
    background: rgba(255,255,255,.97) !important;
    border: 1px solid rgba(255,255,255,.3) !important;
    border-radius: 28px !important;
    box-shadow: 0 30px 80px -15px rgba(0,0,0,.35), 0 8px 30px rgba(0,0,0,.12) !important;
    backdrop-filter: blur(20px) !important;
    max-width: 430px !important;
    position: relative;
    z-index: 10;
}

/* Login primary button — emerald gradient */
.fi-simple-main-ctn .fi-btn-color-primary,
.fi-simple-page .fi-btn-color-primary {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3) !important;
    border-radius: 14px !important;
    font-weight: 900 !important;
    padding: 12px 24px !important;
    transition: all .25s !important;
}
.fi-simple-main-ctn .fi-btn-color-primary:hover,
.fi-simple-page .fi-btn-color-primary:hover {
    box-shadow: 0 8px 28px rgba(16, 185, 129, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Login inputs — rounded premium */
.fi-simple-main-ctn .fi-input-wrp,
.fi-simple-page .fi-input-wrp {
    border-radius: 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    transition: all .2s !important;
}
.fi-simple-main-ctn .fi-input-wrp:focus-within,
.fi-simple-page .fi-input-wrp:focus-within {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12) !important;
}


/* =============================================
   24. PREMIUM SIDEBAR ENHANCEMENTS
   ============================================= */

/* Sidebar — subtle gradient background */
.fi-sidebar.fi-main-sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}

/* Sidebar profile card */
.ac-sidebar-profile {
    margin: 12px 12px 4px;
    padding: 14px;
    background: linear-gradient(135deg, #0b1220, #064e3b);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
}
.ac-sidebar-profile::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(16,185,129,.15);
    pointer-events: none;
}
.ac-sidebar-profile-row {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}
.ac-sidebar-profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(16,185,129,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid rgba(110,231,183,.3);
}
.ac-sidebar-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ac-sidebar-profile-avatar span {
    font-size: .85rem;
    font-weight: 900;
    color: #6ee7b7;
}
.ac-sidebar-profile-name {
    font-size: .72rem;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.ac-sidebar-profile-sub {
    font-size: .55rem;
    font-weight: 600;
    color: rgba(255,255,255,.45);
    display: flex;
    align-items: center;
    gap: 4px;
}
.ac-sidebar-profile-vti {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: .5rem;
    font-weight: 800;
    color: #6ee7b7;
    background: rgba(16,185,129,.15);
    padding: 2px 6px;
    border-radius: 6px;
    margin-top: 2px;
}

/* Sidebar nav items — premium rounded */
.fi-sidebar-item > a,
.fi-sidebar-item > button {
    border-radius: 10px !important;
    margin: 2px 8px !important;
    transition: all .2s cubic-bezier(.4,0,.2,1) !important;
    position: relative !important;
}

/* Active item — emerald accent */
.fi-sidebar-item-active > a,
.fi-sidebar-item-active > button {
    background: rgba(16, 185, 129, 0.08) !important;
    color: #059669 !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(16,185,129,.06) !important;
}
[dir="rtl"] .fi-sidebar-item-active > a,
[dir="rtl"] .fi-sidebar-item-active > button {
    border-right: 3px solid #10b981 !important;
}
[dir="ltr"] .fi-sidebar-item-active > a,
[dir="ltr"] .fi-sidebar-item-active > button {
    border-left: 3px solid #10b981 !important;
}

/* Active item icon */
.fi-sidebar-item-active > a .fi-sidebar-item-icon,
.fi-sidebar-item-active > button .fi-sidebar-item-icon {
    color: #10b981 !important;
}

/* Hover — subtle lift */
.fi-sidebar-item > a:hover,
.fi-sidebar-item > button:hover {
    background: rgba(16, 185, 129, 0.05) !important;
    color: #059669 !important;
    transform: translateX(-2px);
}
[dir="ltr"] .fi-sidebar-item > a:hover,
[dir="ltr"] .fi-sidebar-item > button:hover {
    transform: translateX(2px);
}

/* Group labels — premium with dot */
.fi-sidebar-group > button > span,
.fi-sidebar-group-label {
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
    padding: 0 12px !important;
}

/* Sidebar badges — emerald pills with glow */
.fi-sidebar-item .fi-badge {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    font-size: 0.58rem !important;
    min-width: 20px !important;
    padding: 0 6px !important;
    box-shadow: 0 2px 6px rgba(16,185,129,.2) !important;
}
.fi-sidebar-item .fi-badge[class*="warning"] {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    box-shadow: 0 2px 6px rgba(245,158,11,.2) !important;
}
.fi-sidebar-item .fi-badge[class*="danger"] {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    box-shadow: 0 2px 6px rgba(239,68,68,.2) !important;
}

/* Sidebar footer — clean */
.ac-logout-link {
    padding: 8px 12px 10px !important;
}
.ac-logout-link button {
    width: 100% !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    background: rgba(239,68,68,.04) !important;
    color: #94a3b8 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    transition: all .2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}
.ac-logout-link button:hover {
    background: rgba(239,68,68,.08) !important;
    color: #ef4444 !important;
}


/* =============================================
   25. PREMIUM TOPBAR
   ============================================= */

.fi-topbar {
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.03) !important;
}

/* User avatar — emerald ring */
.fi-avatar {
    border: 2px solid #10b981 !important;
    box-shadow: 0 0 0 2px rgba(16,185,129,.15) !important;
}

/* Notification badge */
.fi-icon-btn-badge {
    background: #10b981 !important;
}

/* Topbar buttons hover */
.fi-topbar .fi-icon-btn:hover {
    color: #10b981 !important;
    background: rgba(16,185,129,.06) !important;
}


/* =============================================
   26. PREMIUM TABLE ROWS
   ============================================= */

/* Row hover — light emerald */
.fi-ta-row:hover {
    background: #f0fdf4 !important;
}

/* Alternate row striping */
.fi-ta-row:nth-child(even) {
    background: #fafbfc !important;
}
.fi-ta-row:nth-child(even):hover {
    background: #f0fdf4 !important;
}


/* =============================================
   27. LOADING ANIMATION
   ============================================= */

.fi-topbar::after {
    background: linear-gradient(90deg, #10b981, #059669, #10b981) !important;
}

@keyframes acShimmerV2 {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}
.fi-topbar.fi-loading::after {
    background-size: 200% !important;
    animation: acShimmerV2 1.5s infinite linear, acProgressSlide .8s cubic-bezier(.4,0,.2,1) forwards !important;
}


/* =============================================
   28. MODAL & NOTIFICATION POLISH
   ============================================= */

.fi-modal-window {
    border-radius: 24px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.12) !important;
}

.fi-modal-close-overlay {
    background: rgba(11, 18, 32, .3) !important;
    backdrop-filter: blur(6px) !important;
}

.fi-notification {
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.08) !important;
}

/* =============================================
   29. STAT CARDS — PREMIUM HOVER
   ============================================= */
.fi-wi-stats-overview-stat {
    border-radius: 16px !important;
    transition: all .25s !important;
}
.fi-wi-stats-overview-stat:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.06) !important;
}