/* Universal Design Tokens & Scrollbar Hiding Across All Browsers & Controls */
:root,
.fl-theme-light {
    --fl-topbar-h: 72px;
    --fl-navy: #061B55;
    --fl-royal: #1565FF;
    --fl-sky: #23A8FF;
    --fl-teal: #16D3D1;
    --fl-slate: #6B7A99;
    --fl-border: #CBD5E1;
    --fl-border-soft: #E2E8F0;
    --fl-bg-app: #F8FAFC;
    --fl-bg-sidebar: #061B55;
    --fl-bg-surface: #FFFFFF;
    --fl-bg-surface-2: #F1F5F9;
    --fl-bg-topbar: #FFFFFF;
    --fl-font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --fl-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --fl-text-primary: #0F172A;
    --fl-text-secondary: #475569;
    --fl-text-muted: #94A3B8;
    --fl-sidebar-border: rgba(255, 255, 255, 0.08);
    /* Syncfusion SfProgressBar */
    --fl-progress-track: #E2E8F0;
    --fl-color-green: #16A34A;
    --fl-color-amber: #D97706;
    --fl-color-red: #DC2626;
    --fl-color-teal: #0D9488;
    --fl-color-blue: #1565FF;
    --fl-color-purple: #7C3AED;
}

html.fl-theme-dark,
html.fl-theme-dark body,
html.fl-theme-dark .fl-shell,
html.fl-theme-dark #fl-app-shell,
.fl-theme-dark {
    color-scheme: dark;
    --fl-topbar-h: 72px;
    --fl-bg-app: #080F20;
    --fl-bg-sidebar: #040C1C;
    --fl-bg-surface: #0F1B32;
    --fl-bg-surface-2: #142037;
    --fl-bg-topbar: #0F1B32;
    --fl-text-primary: #E2E8F0;
    --fl-text-secondary: #94A3B8;
    --fl-text-muted: #475569;
    --fl-border: #1C2D4A;
    --fl-border-soft: #152035;
    --fl-sidebar-border: rgba(255, 255, 255, 0.08);
    /* Syncfusion SfProgressBar */
    --fl-progress-track: #1C2D4A;
    --fl-color-green: #22C55E;
    --fl-color-amber: #F59E0B;
    --fl-color-red: #EF4444;
    --fl-color-teal: #14B8A6;
    --fl-color-blue: #60A5FA;
    --fl-color-purple: #A78BFA;
}

html.fl-theme-dark,
html.fl-theme-dark body,
html.fl-theme-dark .fl-shell,
html.fl-theme-dark #fl-app-shell {
    background-color: #080F20 !important;
    color: #E2E8F0 !important;
}

html.fl-theme-light,
html.fl-theme-light body,
html.fl-theme-light .fl-shell,
html.fl-theme-light #fl-app-shell {
    background-color: #F8FAFC !important;
    color: #0F172A !important;
}

/* ─── Syncfusion Icon Font Aliases & Fallbacks ────────────────── */
.e-icons.e-shield:before {
    content: "\e7ff" !important;
    /* Security Lock / Role Authorization Glyph */
}

.e-icons.e-key:before {
    content: "\e753" !important;
    /* Key Glyph */
}

/* ─── Global HTML / Body ──────────────────────────────────────── */
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ─── DESKTOP (≥ 857px) ───────────────────────────────────────── */
@media (min-width: 857px) {
    .fl-sidebar {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        z-index: 100 !important;
        transform: translateX(0) !important;
        visibility: visible !important;
    }

    .fl-sidebar--expanded {
        width: 220px !important;
    }

    .fl-sidebar--collapsed {
        width: 64px !important;
    }

    .fl-main-wrapper--expanded {
        margin-left: 220px !important;
        width: calc(100% - 220px) !important;
    }

    .fl-main-wrapper--collapsed {
        margin-left: 64px !important;
        width: calc(100% - 64px) !important;
    }

    .fl-mobile-bottom-nav,
    .fl-sidebar-backdrop {
        display: none !important;
    }
}

/* ─── MOBILE (≤ 856px) ────────────────────────────────────────── */
@media (max-width: 856px) {

    /* Hide sidebar completely by default on mobile */
    .fl-sidebar,
    .fl-sidebar--collapsed,
    .fl-sidebar--expanded {
        width: 0px !important;
        min-width: 0px !important;
        max-width: 0px !important;
        transform: translateX(-100%) !important;
        visibility: hidden !important;
        display: none !important;
    }

    /* Open overlay drawer on mobile ONLY when fl-mobile-open is applied */
    .fl-sidebar.fl-mobile-open {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        height: auto !important;
        max-height: 100% !important;
        width: 255px !important;
        min-width: 255px !important;
        max-width: 255px !important;
        transform: translateX(0) !important;
        visibility: visible !important;
        z-index: 100000 !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
    }

    .fl-sidebar.fl-mobile-open .fl-nav {
        flex: 1 1 0px !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        padding: 4px 8px 0 8px !important;
        box-sizing: border-box !important;
    }

    .fl-sidebar.fl-mobile-open .fl-nav__scroll-body {
        flex: 1 1 0px !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 6px !important;
    }

    .fl-sidebar.fl-mobile-open .fl-nav__profile-container {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        margin-top: auto !important;
        padding-top: 8px !important;
        padding-bottom: 4px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
        background: var(--fl-bg-sidebar, #061B55) !important;
        z-index: 10 !important;
    }

    .fl-sidebar-backdrop {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        backdrop-filter: blur(2px) !important;
        z-index: 99999 !important;
    }

    .fl-main-wrapper,
    .fl-main-wrapper--expanded,
    .fl-main-wrapper--collapsed {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .fl-mobile-bottom-nav {
        display: flex !important;
    }
}

* {
    scrollbar-width: thin;
    scrollbar-color: #64748B #E2E8F0;
}

.fl-theme-dark,
.fl-theme-dark * {
    scrollbar-width: thin;
    scrollbar-color: #60A5FA #142037;
}

html,
body {
    min-height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--fl-font-ui);
    overflow-x: hidden;
    scrollbar-width: thin;
}

a,
.btn-link {
    color: #1565FF;
}

.btn-primary {
    color: #fff;
    background-color: #1565FF;
    border-color: #1565FF;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #1565FF;
}

/* ═══════════════════════════════════════════════
   SYNCFUSION COMPONENT OVERRIDES
═══════════════════════════════════════════════ */

/* SfCard */
.e-card.fl-highlight-card,
.e-card.fl-kpi-card,
.e-card.fl-empty-state {
    border-radius: 14px;
    background: var(--fl-bg-surface);
    border: 1px solid var(--fl-border-soft);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    overflow: visible;
}

.fl-theme-dark .e-card.fl-highlight-card,
.fl-theme-dark .e-card.fl-kpi-card,
.fl-theme-dark .e-card.fl-empty-state {
    background: var(--fl-bg-surface);
    border-color: var(--fl-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.e-card.fl-highlight-card .e-card-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.e-card.fl-kpi-card .e-card-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    padding: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.e-card.fl-empty-state .e-card-content {
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

/* SfProgressBar — class is on wrapper div, so use descendant selectors */
.fl-sf-progressbar {
    margin: 6px 0 0 0;
    width: 100%;
}

.fl-sf-progressbar .e-progressbar {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.fl-sf-progressbar .e-progressbar-linear-track {
    background: var(--fl-progress-track) !important;
    border-radius: 99px;
    height: 6px !important;
}

.fl-sf-progressbar .e-progressbar-linear-progress {
    border-radius: 99px;
    height: 6px !important;
    transition: width 0.6s ease;
}

/* SfChip */
.fl-chip-tag .e-chip-list,
.fl-chip-period .e-chip-list,
.fl-att-chip .e-chip-list {
    padding: 0;
    background: transparent !important;
}

.fl-chip-tag .e-chip {
    height: 22px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 99px;
    padding: 0 10px;
    border: none;
    cursor: default;
}

.fl-att-chip .e-chip {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    padding: 0 !important;
    border: none !important;
    cursor: default;
}

.fl-chip-period .e-chip {
    height: 26px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 99px;
    padding: 0 12px;
    background: var(--fl-bg-surface-2);
    color: var(--fl-text-secondary);
    border: 1px solid var(--fl-border);
    cursor: pointer;
}

.e-chip.fl-trend-badge--up,
.fl-chip-tag .fl-trend-badge--up {
    background: #DCFCE7 !important;
    color: #16A34A !important;
}

.e-chip.fl-trend-badge--down,
.fl-chip-tag .fl-trend-badge--down {
    background: #E2E8F0 !important;
    color: #475569 !important;
}

.e-chip.fl-trend-badge--danger,
.fl-chip-tag .fl-trend-badge--danger {
    background: #FEE2E2 !important;
    color: #DC2626 !important;
}

.fl-theme-dark .e-chip.fl-trend-badge--up,
.fl-theme-dark .fl-chip-tag .fl-trend-badge--up {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #22C55E !important;
}

.fl-theme-dark .e-chip.fl-trend-badge--down,
.fl-theme-dark .fl-chip-tag .fl-trend-badge--down {
    background: rgba(148, 163, 184, 0.2) !important;
    color: #94A3B8 !important;
}

.fl-theme-dark .e-chip.fl-trend-badge--danger,
.fl-theme-dark .fl-chip-tag .fl-trend-badge--danger {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #EF4444 !important;
}

.fl-chip-tag .fl-chip--warning {
    background: #FEF3C7 !important;
    color: #D97706 !important;
}

.fl-chip-tag .fl-chip--success {
    background: #DCFCE7 !important;
    color: #16A34A !important;
}

.fl-chip-tag .fl-chip--info {
    background: #DBEAFE !important;
    color: #1565FF !important;
}

.fl-theme-dark .fl-chip-tag .fl-chip--warning {
    background: rgba(217, 119, 6, 0.2) !important;
    color: #F59E0B !important;
}

.fl-theme-dark .fl-chip-tag .fl-chip--success {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #22C55E !important;
}

.fl-theme-dark .fl-chip-tag .fl-chip--info {
    background: rgba(96, 165, 250, 0.2) !important;
    color: #60A5FA !important;
}

.fl-att-chip .fl-att-chip--red {
    background: #FEE2E2 !important;
    color: #DC2626 !important;
}

.fl-att-chip .fl-att-chip--amber {
    background: #FEF3C7 !important;
    color: #D97706 !important;
}

.fl-att-chip .fl-att-chip--teal {
    background: #CCFBF1 !important;
    color: #0D9488 !important;
}

.fl-theme-dark .fl-att-chip .fl-att-chip--red {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #EF4444 !important;
}

.fl-theme-dark .fl-att-chip .fl-att-chip--amber {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #F59E0B !important;
}

.fl-theme-dark .fl-att-chip .fl-att-chip--teal {
    background: rgba(20, 184, 166, 0.2) !important;
    color: #14B8A6 !important;
}

/* SfListView */
.fl-attention-listview.e-listview,
.fl-activity-listview.e-listview {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden
}

.fl-attention-listview .e-list-item,
.fl-activity-listview .e-list-item {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    height: auto !important;
    min-height: unset !important
}

.fl-attention-listview .e-list-item:hover,
.fl-activity-listview .e-list-item:hover {
    background: var(--fl-bg-surface-2) !important;
    border-radius: 10px
}

.fl-attention-listview .e-list-item .e-text-content,
.fl-activity-listview .e-list-item .e-text-content {
    padding: 0 !important
}

/* SfTextBox search blend */
.fl-search-input-sf.e-control-wrapper.e-input-group,
.fl-search-input-sf.e-input-group {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    flex: 1;
    min-width: 0
}

.fl-search-input-sf .e-input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--fl-text-primary);
    font-size: 14px;
    font-family: var(--fl-font-ui);
    padding: 0 !important
}

.fl-search-input-sf .e-input::placeholder {
    color: var(--fl-text-muted)
}

.fl-search-input-sf.e-input-group::before,
.fl-search-input-sf.e-input-group::after {
    display: none !important
}

/* SfButton Quick Create Tile */
.e-btn.fl-qc-tile {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 8px !important;
    border-radius: 12px !important;
    background: var(--fl-bg-surface-2) !important;
    border: 1px solid var(--fl-border-soft) !important;
    color: var(--fl-text-primary) !important;
    font-size: 12px;
    font-weight: 600;
    width: 100%;
    height: auto !important;
    min-height: 72px;
    box-shadow: none !important;
    transition: all 0.18s ease
}

.e-btn.fl-qc-tile:hover {
    background: var(--fl-bg-surface) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-2px)
}

.fl-theme-dark .e-btn.fl-qc-tile {
    background: var(--fl-bg-surface-2) !important;
    border-color: var(--fl-border) !important
}

.fl-theme-dark .e-btn.fl-qc-tile:hover {
    background: var(--fl-bg-surface) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important
}

/* SfButton Date Range */
.e-btn.fl-dash-date-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 18px !important;
    border-radius: 10px !important;
    background: var(--fl-bg-surface) !important;
    border: 1px solid var(--fl-border) !important;
    color: var(--fl-text-primary) !important;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    height: auto !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
    align-self: flex-end !important;
    margin-top: auto !important
}

.fl-theme-dark .e-btn.fl-dash-date-btn {
    background: var(--fl-bg-surface) !important;
    border-color: var(--fl-border) !important
}

.fl-date-caret {
    font-size: 10px;
    opacity: 0.6;
    margin-left: 2px
}

/* SfBreadcrumb */
.fl-breadcrumb.e-breadcrumb {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 4px 0 !important
}

.fl-breadcrumb .e-breadcrumb-item .e-breadcrumb-text {
    color: var(--fl-text-muted);
    font-size: 12px
}

.fl-breadcrumb .e-breadcrumb-item:last-child .e-breadcrumb-text {
    color: var(--fl-text-secondary);
    font-weight: 500
}

.fl-breadcrumb .e-breadcrumb-separator {
    color: var(--fl-text-muted);
    font-size: 11px
}

/* SfListView NavMenu overrides */
.fl-sf-nav-listview.e-listview {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.fl-sf-nav-listview .e-list-item {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    height: auto !important;
    min-height: unset !important;
}

.fl-sf-nav-listview .e-list-item .e-text-content {
    padding: 0 !important;
}

.fl-sf-nav-listview .e-icons,
.fl-sf-nav-listview .fl-nav__icon {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

/* Shortcuts Section Container Box */
.fl-nav__shortcuts {
    margin: 16px 4px 8px !important;
    padding: 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}

.fl-nav__shortcuts-label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    color: rgba(255, 255, 255, 0.65) !important;
    text-transform: uppercase !important;
    padding: 2px 8px 6px 8px !important;
}

/* SfButton Shortcuts */
.e-btn.fl-shortcut-sf-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 7px 10px !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    text-transform: none !important;
    text-align: left !important;
    cursor: pointer !important;
}

.e-btn.fl-shortcut-sf-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
}

.e-btn.fl-shortcut-sf-btn .fl-shortcut-plus {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
}

.e-btn.fl-shortcut-sf-btn .fl-shortcut-label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.e-btn.fl-shortcut-sf-btn:hover .fl-shortcut-label {
    color: #FFFFFF !important;
}

/* SfButton Nav Profile */
.fl-nav__profile-container {
    position: sticky !important;
    bottom: 0 !important;
    margin-top: auto !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: var(--fl-bg-sidebar, #061946) !important;
    z-index: 10 !important;
}

.fl-avatar {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #1565FF 0%, #23A8FF 100%) !important;
    color: #FFFFFF !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 8px rgba(21, 101, 255, 0.35) !important;
}

.fl-avatar--sm {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    font-size: 11.5px !important;
}

/* ─── Global FL Sidebar & NavMenu Structure ────────────────── */
.fl-sidebar {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    box-sizing: border-box !important;
}

.fl-brand {
    flex: 0 0 var(--fl-topbar-h, 72px) !important;
    height: var(--fl-topbar-h, 72px) !important;
    box-sizing: border-box !important;
}

.fl-nav {
    flex: 1 1 0px !important;
    min-height: 0 !important;
    height: calc(100% - var(--fl-topbar-h, 72px)) !important;
    max-height: calc(100% - var(--fl-topbar-h, 72px)) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 8px 10px 10px !important;
    box-sizing: border-box !important;
}

.fl-nav__scroll-body {
    flex: 1 1 0px !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 8px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch !important;
}

.fl-nav__scroll-body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.fl-nav__profile-container {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding-top: 8px !important;
    padding-bottom: 6px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: var(--fl-bg-sidebar, #061B55) !important;
    z-index: 10 !important;
}

.fl-nav-profile-sf-btn,
.e-btn.fl-nav-profile-sf-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 8px 10px !important;
    background: transparent !important;
    border: none !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    text-transform: none !important;
    text-align: left !important;
    cursor: pointer !important;
}

.fl-nav-profile-sf-btn:hover,
.e-btn.fl-nav-profile-sf-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.fl-nav__profile-info {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.2 !important;
    flex: 1 !important;
    overflow: hidden !important;
    text-align: left !important;
}

.fl-nav__profile-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.fl-nav__profile-role {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ─── Topbar Notification Badge ────────────────────────────────── */
.fl-icon-btn-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.fl-badge,
.fl-badge--danger {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    border-radius: 9999px !important;
    background-color: #F43F5E !important;
    color: #FFFFFF !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #FFFFFF !important;
    box-shadow: 0 2px 6px rgba(244, 63, 94, 0.4) !important;
    line-height: 1 !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

.fl-theme-dark .fl-badge,
body.fl-theme-dark .fl-badge,
.fl-theme-dark .fl-badge--danger,
body.fl-theme-dark .fl-badge--danger {
    background-color: #F43F5E !important;
    color: #FFFFFF !important;
    border-color: #07122D !important;
    box-shadow: 0 2px 8px rgba(244, 63, 94, 0.5) !important;
}

/* ═════════════════════════════════════════════════════════════════
   BRAND KIT COMPONENT 9: TOAST MESSAGE (Exact Brandkit Spec)
   ═════════════════════════════════════════════════════════════════ */
/*.e-toast-container {
    z-index: 999999 !important;
    top: 20px !important;
    right: 20px !important;
}
*/
.e-toast-container .e-toast.fl-sf-toast,
.e-toast-container .e-toast.e-toast-success,
.e-toast-container .e-toast {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-left: 4.5px solid #1FB874 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.12), 0 4px 12px -2px rgba(0, 0, 0, 0.06) !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    max-width: 440px !important;
}

/* Icon Container — Round green circle with white checkmark */
.e-toast-container .e-toast.fl-sf-toast .e-toast-icon-container,
.e-toast-container .e-toast.e-toast-success .e-toast-icon-container,
.e-toast-container .e-toast .e-toast-icon-container {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 50% !important;
    background: #1FB874 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.e-toast-container .e-toast.fl-sf-toast .e-toast-icon.e-check,
.e-toast-container .e-toast.e-toast-success .e-toast-icon.e-check,
.e-toast-container .e-toast .e-toast-icon {
    color: #FFFFFF !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

/* Message Text Block */
.e-toast-container .e-toast.fl-sf-toast .e-toast-message,
.e-toast-container .e-toast.e-toast-success .e-toast-message,
.e-toast-container .e-toast .e-toast-message {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
}

/* Title */
.e-toast-container .e-toast.fl-sf-toast .e-toast-title,
.e-toast-container .e-toast.e-toast-success .e-toast-title,
.e-toast-container .e-toast .e-toast-title {
    color: #0F172A !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Content / Subtitle */
.e-toast-container .e-toast.fl-sf-toast .e-toast-content,
.e-toast-container .e-toast.e-toast-success .e-toast-content,
.e-toast-container .e-toast .e-toast-content {
    color: #64748B !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Close Icon */
.e-toast-container .e-toast.fl-sf-toast .e-toast-close-icon,
.e-toast-container .e-toast.e-toast-success .e-toast-close-icon,
.e-toast-container .e-toast .e-toast-close-icon {
    color: #94A3B8 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    margin-left: auto !important;
    transition: color 150ms ease !important;
}

.e-toast-container .e-toast.fl-sf-toast .e-toast-close-icon:hover,
.e-toast-container .e-toast.e-toast-success .e-toast-close-icon:hover,
.e-toast-container .e-toast .e-toast-close-icon:hover {
    color: #0F172A !important;
}

/* ─── DARK THEME OVERRIDE (Brand Kit Dark Variant) ───────────── */
.fl-theme-dark .e-toast-container .e-toast,
body.fl-theme-dark .e-toast-container .e-toast,
.e-toast-container.fl-theme-dark .e-toast {
    background: #07122D !important;
    border-color: #101E42 !important;
    border-left: 4.5px solid #1FB874 !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(31, 184, 116, 0.15) !important;
}

.fl-theme-dark .e-toast-container .e-toast .e-toast-title,
body.fl-theme-dark .e-toast-container .e-toast .e-toast-title {
    color: #FFFFFF !important;
}

.fl-theme-dark .e-toast-container .e-toast .e-toast-content,
body.fl-theme-dark .e-toast-container .e-toast .e-toast-content {
    color: #94A3B8 !important;
}

.fl-theme-dark .e-toast-container .e-toast .e-toast-close-icon:hover,
body.fl-theme-dark .e-toast-container .e-toast .e-toast-close-icon:hover {
    color: #FFFFFF !important;
}

/* ─── Login Screen Dark Theme Mode (#01071B) ──────────────────── */
.fl-empty-layout.fl-theme-dark,
.fl-auth-screen.fl-theme-dark,
.fl-theme-dark .fl-auth-screen,
.fl-theme-dark .fl-auth-form-wrap {
    background: #01071B !important;
}

/* ─── Circular Round Loading Spinner ───────────────────────────── */
.fl-round-spinner {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    border: 2.2px solid rgba(255, 255, 255, 0.35) !important;
    border-top-color: #FFFFFF !important;
    border-radius: 50% !important;
    animation: fl-spin-smooth 0.75s linear infinite !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

@keyframes fl-spin-smooth {
    to {
        transform: rotate(360deg);
    }
}

/* ─── Syncfusion DataGrid & Form Control Dark Theme Support ─────── */
.fl-theme-dark .e-grid,
body.fl-theme-dark .e-grid {
    background-color: #0F1B32 !important;
    border-color: #1C2D4A !important;
    color: #E2E8F0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.fl-theme-dark .e-grid .e-gridheader,
body.fl-theme-dark .e-grid .e-gridheader {
    background-color: #142037 !important;
    border-bottom: 1px solid #1C2D4A !important;
}

.fl-theme-dark .e-grid .e-headercell,
.fl-theme-dark .e-grid .e-headercell .e-headertext,
body.fl-theme-dark .e-grid .e-headercell .e-headertext {
    background-color: #142037 !important;
    color: #94A3B8 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-color: #1C2D4A !important;
}

.fl-theme-dark .e-grid .e-rowcell,
body.fl-theme-dark .e-grid .e-rowcell {
    background-color: #0F1B32 !important;
    border-color: #1C2D4A !important;
    color: #FFFFFF !important;
    font-size: 13.5px !important;
}

.fl-theme-dark .e-grid .e-row:hover .e-rowcell,
body.fl-theme-dark .e-grid .e-row:hover .e-rowcell {
    background-color: #16243F !important;
}

.fl-theme-dark .e-grid .e-gridpager,
.fl-theme-dark .e-grid .e-pager,
body.fl-theme-dark .e-grid .e-pager,
.fl-theme-dark .e-pager {
    background-color: #0F1B32 !important;
    border-top: 1px solid #1C2D4A !important;
    color: #94A3B8 !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.fl-theme-dark .e-pager .e-pagercontainer,
body.fl-theme-dark .e-pager .e-pagercontainer,
.e-pager .e-pagercontainer {
    background-color: transparent !important;
    border: none !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

/* Numeric container must strictly keep items in a horizontal row */
.fl-theme-dark .e-pager .e-numericcontainer,
body.fl-theme-dark .e-pager .e-numericcontainer,
.e-pager .e-numericcontainer {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    width: auto !important;
    min-width: unset !important;
    margin: 0 4px !important;
}

/* Base button and item styles */
.fl-theme-dark .e-pager .e-numericitem,
.fl-theme-dark .e-pager a.e-link,
.fl-theme-dark .e-pager .e-firstpage,
.fl-theme-dark .e-pager .e-prevpage,
.fl-theme-dark .e-pager .e-nextpage,
.fl-theme-dark .e-pager .e-lastpage,
.fl-theme-dark .e-pager .e-pager-default,
.fl-theme-dark .e-pager .e-spacing,
body.fl-theme-dark .e-pager .e-numericitem,
body.fl-theme-dark .e-pager a.e-link,
body.fl-theme-dark .e-pager .e-firstpage,
body.fl-theme-dark .e-pager .e-prevpage,
body.fl-theme-dark .e-pager .e-nextpage,
body.fl-theme-dark .e-pager .e-lastpage,
body.fl-theme-dark .e-pager .e-pager-default,
body.fl-theme-dark .e-pager .e-spacing {
    background-color: #142037 !important;
    color: #E2E8F0 !important;
    border: 1px solid #1C2D4A !important;
    border-radius: 6px !important;
    min-width: 32px !important;
    width: 32px !important;
    height: 32px !important;
    line-height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* Hover state on clickable buttons */
.fl-theme-dark .e-pager .e-numericitem:hover:not(.e-currentitem),
.fl-theme-dark .e-pager a.e-link:hover:not(.e-currentitem),
.fl-theme-dark .e-pager .e-firstpage:hover:not(.e-disable):not(.e-firstpagedisabled),
.fl-theme-dark .e-pager .e-prevpage:hover:not(.e-disable):not(.e-prevpagedisabled),
.fl-theme-dark .e-pager .e-nextpage:hover:not(.e-disable):not(.e-nextpagedisabled),
.fl-theme-dark .e-pager .e-lastpage:hover:not(.e-disable):not(.e-lastpagedisabled),
body.fl-theme-dark .e-pager .e-numericitem:hover:not(.e-currentitem),
body.fl-theme-dark .e-pager a.e-link:hover:not(.e-currentitem) {
    background-color: #1E2D4A !important;
    color: #FFFFFF !important;
    border-color: #2D4370 !important;
}

/* Active current page item */
.fl-theme-dark .e-pager .e-currentitem,
.fl-theme-dark .e-pager .e-numericitem.e-currentitem,
body.fl-theme-dark .e-pager .e-currentitem,
body.fl-theme-dark .e-pager .e-numericitem.e-currentitem {
    background: linear-gradient(135deg, #1565FF 0%, #0052CC 100%) !important;
    color: #FFFFFF !important;
    border-color: #1565FF !important;
    font-weight: 700 !important;
    box-shadow: 0 0 10px rgba(21, 101, 255, 0.45) !important;
}

/* Icons inside navigation arrows */
.fl-theme-dark .e-pager .e-icons,
body.fl-theme-dark .e-pager .e-icons {
    color: #94A3B8 !important;
    font-size: 12px !important;
}

/* Disabled arrows state */
.fl-theme-dark .e-pager .e-firstpagedisabled,
.fl-theme-dark .e-pager .e-prevpagedisabled,
.fl-theme-dark .e-pager .e-nextpagedisabled,
.fl-theme-dark .e-pager .e-lastpagedisabled,
.fl-theme-dark .e-pager .e-disable,
body.fl-theme-dark .e-pager .e-firstpagedisabled,
body.fl-theme-dark .e-pager .e-prevpagedisabled,
body.fl-theme-dark .e-pager .e-nextpagedisabled,
body.fl-theme-dark .e-pager .e-lastpagedisabled,
body.fl-theme-dark .e-pager .e-disable {
    background-color: #0A1329 !important;
    border-color: #152035 !important;
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

.fl-theme-dark .e-pager .e-firstpagedisabled .e-icons,
.fl-theme-dark .e-pager .e-prevpagedisabled .e-icons,
.fl-theme-dark .e-pager .e-nextpagedisabled .e-icons,
.fl-theme-dark .e-pager .e-lastpagedisabled .e-icons,
body.fl-theme-dark .e-pager .e-firstpagedisabled .e-icons,
body.fl-theme-dark .e-pager .e-prevpagedisabled .e-icons,
body.fl-theme-dark .e-pager .e-nextpagedisabled .e-icons,
body.fl-theme-dark .e-pager .e-lastpagedisabled .e-icons {
    color: #475569 !important;
}

/* Page Size dropdown inside pager */
.fl-theme-dark .e-pager .e-pagesizes,
body.fl-theme-dark .e-pager .e-pagesizes {
    display: inline-flex !important;
    align-items: center !important;
}

.fl-theme-dark .e-pager .e-pagesizes .e-input-group,
body.fl-theme-dark .e-pager .e-pagesizes .e-input-group {
    background-color: #0A1329 !important;
    border: 1px solid #1C2D4A !important;
    border-radius: 6px !important;
    height: 32px !important;
    color: #E2E8F0 !important;
}

.fl-theme-dark .e-pager .e-pagesizes .e-input,
body.fl-theme-dark .e-pager .e-pagesizes .e-input {
    color: #E2E8F0 !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
}

/* Pager right message bar text */
.fl-theme-dark .e-pager .e-parentmsgbar,
body.fl-theme-dark .e-pager .e-parentmsgbar {
    color: #94A3B8 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
}

/* ─── Syncfusion Inputs & Dropdowns in Dark Theme ──────────────── */
.fl-theme-dark .e-input-group,
.fl-theme-dark .e-input-group.e-control-wrapper,
.fl-theme-dark .e-float-input,
.fl-theme-dark .e-float-input.e-control-wrapper,
.fl-theme-dark .e-textbox,
.fl-theme-dark .e-numerictextbox,
.fl-theme-dark .e-dropdownlist,
body.fl-theme-dark .e-input-group,
body.fl-theme-dark .e-input-group.e-control-wrapper {
    background-color: #0A1329 !important;
    border: 1px solid #1C2D4A !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
}

.fl-theme-dark .e-input-group:hover,
.fl-theme-dark .e-input-group.e-input-focus,
.fl-theme-dark .e-input-group.e-control-wrapper:hover,
.fl-theme-dark .e-input-group.e-control-wrapper.e-input-focus,
body.fl-theme-dark .e-input-group.e-input-focus {
    border-color: #1565FF !important;
    box-shadow: 0 0 0 1px #1565FF !important;
}

.fl-theme-dark .e-input-group input.e-input,
.fl-theme-dark .e-input-group textarea.e-input,
.fl-theme-dark .e-input,
body.fl-theme-dark .e-input-group input.e-input,
body.fl-theme-dark .e-input-group textarea.e-input {
    color: #FFFFFF !important;
    background: transparent !important;
    font-size: 13.5px !important;
}

.fl-theme-dark .e-input::placeholder,
.fl-theme-dark .e-input-group input::placeholder,
body.fl-theme-dark .e-input::placeholder {
    color: #64748B !important;
}

.fl-theme-dark .e-input-group-icon,
.fl-theme-dark .e-ddl-icon,
.fl-theme-dark .e-spin-up,
.fl-theme-dark .e-spin-down,
body.fl-theme-dark .e-input-group-icon,
body.fl-theme-dark .e-ddl-icon {
    color: #94A3B8 !important;
}

/* ─── Syncfusion DropDown Popup Lists in Dark Theme ────────────── */
.fl-theme-dark .e-dropdownbase,
.fl-theme-dark .e-popup,
.fl-theme-dark .e-popup.e-ddl,
.fl-theme-dark .e-ddl.e-popup,
.fl-theme-dark .e-popup .e-list-parent,
.fl-theme-dark .e-popup .e-list-item,
.fl-theme-dark .e-dropdownbase .e-list-item,
body.fl-theme-dark .e-popup,
body.fl-theme-dark .e-dropdownbase,
body.fl-theme-dark .e-dropdownbase .e-list-item,
body.fl-theme-dark .e-popup .e-list-item {
    background-color: #0F1B32 !important;
    color: #E2E8F0 !important;
    border-color: #1C2D4A !important;
}

.fl-theme-dark .e-dropdownbase .e-list-item:hover,
.fl-theme-dark .e-dropdownbase .e-list-item.e-hover,
.fl-theme-dark .e-dropdownbase .e-list-item.e-active,
body.fl-theme-dark .e-dropdownbase .e-list-item:hover,
body.fl-theme-dark .e-dropdownbase .e-list-item.e-hover,
body.fl-theme-dark .e-dropdownbase .e-list-item.e-active {
    background-color: #1565FF !important;
    color: #FFFFFF !important;
}

.fl-theme-dark .e-popup .e-input-group,
body.fl-theme-dark .e-popup .e-input-group {
    background-color: #0A1329 !important;
    border-color: #1C2D4A !important;
}

/* ─── Syncfusion Checkbox, Switch & Buttons ─────────────────────── */
.fl-theme-dark .e-checkbox-wrapper .e-label,
body.fl-theme-dark .e-checkbox-wrapper .e-label {
    color: #E2E8F0 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
}

.fl-theme-dark .e-checkbox-wrapper .e-frame,
body.fl-theme-dark .e-checkbox-wrapper .e-frame {
    background-color: #0A1329 !important;
    border-color: #1C2D4A !important;
}

.fl-theme-dark .e-checkbox-wrapper .e-check,
body.fl-theme-dark .e-checkbox-wrapper .e-check {
    background-color: #1565FF !important;
    border-color: #1565FF !important;
    color: #FFFFFF !important;
}

.fl-theme-dark .e-btn.e-outline,
body.fl-theme-dark .e-btn.e-outline {
    background-color: #0F1B32 !important;
    border: 1px solid #1C2D4A !important;
    color: #E2E8F0 !important;
}

.fl-theme-dark .e-btn.e-outline .e-btn-icon,
.fl-theme-dark .e-btn.e-outline .e-icons,
body.fl-theme-dark .e-btn.e-outline .e-btn-icon,
body.fl-theme-dark .e-btn.e-outline .e-icons {
    color: #60A5FA !important;
}

.fl-theme-dark .e-btn.e-outline:hover,
body.fl-theme-dark .e-btn.e-outline:hover {
    background-color: #16243F !important;
    border-color: #1565FF !important;
    color: #FFFFFF !important;
}

.fl-theme-dark .e-btn.e-flat,
body.fl-theme-dark .e-btn.e-flat {
    color: #E2E8F0 !important;
}

.fl-theme-dark .e-btn.e-flat .e-btn-icon,
.fl-theme-dark .e-btn.e-flat .e-icons,
body.fl-theme-dark .e-btn.e-flat .e-btn-icon,
body.fl-theme-dark .e-btn.e-flat .e-icons {
    color: #E2E8F0 !important;
}

/* ─── FL Audit Tabs (Dark Mode & Light Mode Theme Support) ─────── */
.fl-tabs-card {
    background: #0F1B32;
    border: 1px solid #1C2D4A;
    border-radius: 10px;
    overflow: hidden;
}

.fl-theme-dark .fl-tabs-card,
body.fl-theme-dark .fl-tabs-card,
[data-theme="dark"] .fl-tabs-card {
    background: #0F1B32 !important;
    border-color: #1C2D4A !important;
}

.e-tab.fl-audit-tabs,
.fl-audit-tabs {
    border: none !important;
    background: transparent !important;
}

.e-tab.fl-audit-tabs .e-tab-header,
.fl-audit-tabs .e-tab-header {
    background: #142037 !important;
    border-bottom: 1px solid #1C2D4A !important;
    padding: 0 1rem !important;
    min-height: 52px !important;
    display: flex !important;
    align-items: center !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item,
.fl-audit-tabs .e-tab-header .e-toolbar-item {
    background: transparent !important;
}

/* Inactive Tab Wrap (Default Dark Mode) */
.e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item .e-tab-wrap,
.fl-audit-tabs .e-tab-header .e-toolbar-item .e-tab-wrap {
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 1.25rem !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    color: #94A3B8 !important;
    font-weight: 600 !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

/* Inactive Tab Children */
.e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item .e-tab-wrap *,
.fl-audit-tabs .e-tab-header .e-toolbar-item .e-tab-wrap *,
.fl-audit-tabs .fl-tab-header,
.fl-audit-tabs .fl-tab-icon,
.fl-audit-tabs .fl-tab-text {
    color: #94A3B8 !important;
    fill: #94A3B8 !important;
}

/* Inactive Tab Hover & Focus State */
.e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item:hover,
.e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item.e-hover,
.fl-audit-tabs .e-tab-header .e-toolbar-item:hover,
.fl-audit-tabs .e-tab-header .e-toolbar-item.e-hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

.e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item:hover .e-tab-wrap,
.e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item.e-hover .e-tab-wrap,
.e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item .e-tab-wrap:hover,
.fl-audit-tabs .e-tab-header .e-toolbar-item:hover .e-tab-wrap,
.fl-audit-tabs .e-tab-header .e-toolbar-item.e-hover .e-tab-wrap,
.fl-audit-tabs .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item:hover .e-tab-wrap *,
.e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item.e-hover .e-tab-wrap *,
.e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item .e-tab-wrap:hover *,
.fl-audit-tabs .e-tab-header .e-toolbar-item:hover .e-tab-wrap *,
.fl-audit-tabs .e-tab-header .e-toolbar-item.e-hover .e-tab-wrap *,
.fl-audit-tabs .e-tab-header .e-toolbar-item .e-tab-wrap:hover * {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

/* Active Tab State (Dark Mode) */
.e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item.e-active,
.fl-audit-tabs .e-tab-header .e-toolbar-item.e-active {
    background: transparent !important;
}

.e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item.e-active .e-tab-wrap,
.fl-audit-tabs .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
    color: #38BDF8 !important;
    border-bottom: 2px solid #38BDF8 !important;
    background: transparent !important;
}

.e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item.e-active .e-tab-wrap *,
.fl-audit-tabs .e-tab-header .e-toolbar-item.e-active .e-tab-wrap *,
.fl-audit-tabs .e-toolbar-item.e-active .fl-tab-icon,
.fl-audit-tabs .e-toolbar-item.e-active .fl-tab-text {
    color: #38BDF8 !important;
    fill: #38BDF8 !important;
}

.e-tab.fl-audit-tabs .e-tab-header .e-indicator,
.fl-audit-tabs .e-tab-header .e-indicator {
    background: #38BDF8 !important;
    border-color: #38BDF8 !important;
    height: 2px !important;
}

/* ── Light Mode Tab Theme ────────────────────────────────────────── */
.fl-theme-light .fl-tabs-card,
body.fl-theme-light .fl-tabs-card,
body.light-theme .fl-tabs-card,
[data-theme="light"] .fl-tabs-card {
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
}

.fl-theme-light .e-tab.fl-audit-tabs .e-tab-header,
body.fl-theme-light .e-tab.fl-audit-tabs .e-tab-header,
body.light-theme .e-tab.fl-audit-tabs .e-tab-header,
[data-theme="light"] .e-tab.fl-audit-tabs .e-tab-header {
    background: #F8FAFC !important;
    border-bottom-color: #E2E8F0 !important;
}

.fl-theme-light .e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item .e-tab-wrap,
body.fl-theme-light .e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item .e-tab-wrap,
body.light-theme .e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item .e-tab-wrap,
[data-theme="light"] .e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item .e-tab-wrap {
    color: #64748B !important;
}

.fl-theme-light .e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item .e-tab-wrap *,
body.fl-theme-light .e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item .e-tab-wrap *,
body.light-theme .e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item .e-tab-wrap *,
[data-theme="light"] .e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item .e-tab-wrap * {
    color: #64748B !important;
}

.fl-theme-light .e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item:hover .e-tab-wrap,
.fl-theme-light .e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item.e-hover .e-tab-wrap,
body.fl-theme-light .e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item:hover .e-tab-wrap,
body.light-theme .e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item:hover .e-tab-wrap,
[data-theme="light"] .e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item:hover .e-tab-wrap {
    color: #0F172A !important;
    background: rgba(0, 0, 0, 0.03) !important;
}

.fl-theme-light .e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item:hover .e-tab-wrap *,
.fl-theme-light .e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item.e-hover .e-tab-wrap *,
body.fl-theme-light .e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item:hover .e-tab-wrap *,
body.light-theme .e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item:hover .e-tab-wrap *,
[data-theme="light"] .e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item:hover .e-tab-wrap * {
    color: #0F172A !important;
}

.fl-theme-light .e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item.e-active .e-tab-wrap,
body.fl-theme-light .e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item.e-active .e-tab-wrap,
body.light-theme .e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item.e-active .e-tab-wrap,
[data-theme="light"] .e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
    color: #2563EB !important;
    border-bottom-color: #2563EB !important;
}

.fl-theme-light .e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item.e-active .e-tab-wrap *,
body.fl-theme-light .e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item.e-active .e-tab-wrap *,
body.light-theme .e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item.e-active .e-tab-wrap *,
[data-theme="light"] .e-tab.fl-audit-tabs .e-tab-header .e-toolbar-item.e-active .e-tab-wrap * {
    color: #2563EB !important;
}

.fl-theme-light .e-tab.fl-audit-tabs .e-tab-header .e-indicator,
body.light-theme .e-tab.fl-audit-tabs .e-tab-header .e-indicator {
    background: #2563EB !important;
    border-color: #2563EB !important;
}

/* ─── Global FL Action Buttons (View, Edit, Delete) ─────────────── */
.fl-action-btns {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.e-btn.fl-action-btn,
button.e-btn.fl-action-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 8px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    box-shadow: none !important;
    transition: all 0.18s ease !important;
}

/* View Button: Cyan Accent */
.e-btn.fl-action-btn.fl-btn-view,
button.e-btn.fl-action-btn.fl-btn-view {
    background: rgba(56, 189, 248, 0.12) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    color: #38BDF8 !important;
}

.e-btn.fl-action-btn.fl-btn-view .e-btn-icon,
.e-btn.fl-action-btn.fl-btn-view .e-icons,
button.e-btn.fl-action-btn.fl-btn-view .e-btn-icon,
button.e-btn.fl-action-btn.fl-btn-view .e-icons {
    color: #38BDF8 !important;
    font-size: 14px !important;
}

.e-btn.fl-action-btn.fl-btn-view:hover,
button.e-btn.fl-action-btn.fl-btn-view:hover {
    background: #0284C7 !important;
    border-color: #0284C7 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 12px rgba(2, 132, 199, 0.4) !important;
}

.e-btn.fl-action-btn.fl-btn-view:hover .e-btn-icon,
.e-btn.fl-action-btn.fl-btn-view:hover .e-icons,
button.e-btn.fl-action-btn.fl-btn-view:hover .e-btn-icon,
button.e-btn.fl-action-btn.fl-btn-view:hover .e-icons {
    color: #FFFFFF !important;
}

/* Edit Button: Amber Accent */
.e-btn.fl-action-btn.fl-btn-edit,
button.e-btn.fl-action-btn.fl-btn-edit {
    background: rgba(245, 158, 11, 0.12) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    color: #FBBF24 !important;
}

.e-btn.fl-action-btn.fl-btn-edit .e-btn-icon,
.e-btn.fl-action-btn.fl-btn-edit .e-icons,
button.e-btn.fl-action-btn.fl-btn-edit .e-btn-icon,
button.e-btn.fl-action-btn.fl-btn-edit .e-icons {
    color: #FBBF24 !important;
    font-size: 14px !important;
}

.e-btn.fl-action-btn.fl-btn-edit:hover,
button.e-btn.fl-action-btn.fl-btn-edit:hover {
    background: #D97706 !important;
    border-color: #D97706 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 12px rgba(217, 119, 6, 0.4) !important;
}

.e-btn.fl-action-btn.fl-btn-edit:hover .e-btn-icon,
.e-btn.fl-action-btn.fl-btn-edit:hover .e-icons,
button.e-btn.fl-action-btn.fl-btn-edit:hover .e-btn-icon,
button.e-btn.fl-action-btn.fl-btn-edit:hover .e-icons {
    color: #FFFFFF !important;
}

/* Status/Workflow Button: Purple/Violet Accent */
.e-btn.fl-action-btn.fl-btn-status,
button.e-btn.fl-action-btn.fl-btn-status {
    background: rgba(168, 85, 247, 0.12) !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
    color: #C084FC !important;
}

.e-btn.fl-action-btn.fl-btn-status .e-btn-icon,
.e-btn.fl-action-btn.fl-btn-status .e-icons,
button.e-btn.fl-action-btn.fl-btn-status .e-btn-icon,
button.e-btn.fl-action-btn.fl-btn-status .e-icons {
    color: #C084FC !important;
    font-size: 14px !important;
}

.e-btn.fl-action-btn.fl-btn-status:hover,
button.e-btn.fl-action-btn.fl-btn-status:hover {
    background: #9333EA !important;
    border-color: #9333EA !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 12px rgba(147, 51, 234, 0.4) !important;
}

.e-btn.fl-action-btn.fl-btn-status:hover .e-btn-icon,
.e-btn.fl-action-btn.fl-btn-status:hover .e-icons,
button.e-btn.fl-action-btn.fl-btn-status:hover .e-btn-icon,
button.e-btn.fl-action-btn.fl-btn-status:hover .e-icons {
    color: #FFFFFF !important;
}

/* Delete Button: Rose/Red Accent */
.e-btn.fl-action-btn.fl-btn-delete,
button.e-btn.fl-action-btn.fl-btn-delete {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: #F87171 !important;
}

.e-btn.fl-action-btn.fl-btn-delete .e-btn-icon,
.e-btn.fl-action-btn.fl-btn-delete .e-icons,
button.e-btn.fl-action-btn.fl-btn-delete .e-btn-icon,
button.e-btn.fl-action-btn.fl-btn-delete .e-icons {
    color: #F87171 !important;
    font-size: 14px !important;
}

.e-btn.fl-action-btn.fl-btn-delete:hover,
button.e-btn.fl-action-btn.fl-btn-delete:hover {
    background: #DC2626 !important;
    border-color: #DC2626 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.4) !important;
}

.e-btn.fl-action-btn.fl-btn-delete:hover .e-btn-icon,
.e-btn.fl-action-btn.fl-btn-delete:hover .e-icons,
button.e-btn.fl-action-btn.fl-btn-delete:hover .e-btn-icon,
button.e-btn.fl-action-btn.fl-btn-delete:hover .e-icons {
    color: #FFFFFF !important;
}

/* Disabled Action Button Rule */
.e-btn.fl-action-btn:disabled,
.e-btn.fl-action-btn.e-disabled,
button.e-btn.fl-action-btn:disabled,
button.e-btn.fl-action-btn.e-disabled {
    opacity: 0.38 !important;
    cursor: not-allowed !important;
    background: rgba(148, 163, 184, 0.1) !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
    color: var(--fl-text-secondary, #94A3B8) !important;
    transform: none !important;
    box-shadow: none !important;
}

.e-btn.fl-action-btn:disabled .e-btn-icon,
.e-btn.fl-action-btn:disabled .e-icons,
.e-btn.fl-action-btn.e-disabled .e-btn-icon,
.e-btn.fl-action-btn.e-disabled .e-icons,
button.e-btn.fl-action-btn:disabled .e-btn-icon,
button.e-btn.fl-action-btn:disabled .e-icons,
button.e-btn.fl-action-btn.e-disabled .e-btn-icon,
button.e-btn.fl-action-btn.e-disabled .e-icons {
    color: var(--fl-text-secondary, #94A3B8) !important;
}

.e-btn.fl-action-btn:disabled:hover,
.e-btn.fl-action-btn.e-disabled:hover,
button.e-btn.fl-action-btn:disabled:hover,
button.e-btn.fl-action-btn.e-disabled:hover {
    background: rgba(148, 163, 184, 0.1) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
    color: var(--fl-text-secondary, #94A3B8) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   FLBILL GLOBAL DESIGN SYSTEM & UNIVERSAL TYPOGRAPHY TOKENS
   ══════════════════════════════════════════════════════════════════════ */

/* ── Typography Hierarchy ────────────────────────────────────────── */
.fl-page-title {
    font-family: var(--fl-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--fl-text-primary);
    margin-bottom: 0.25rem;
    line-height: 1.25;
}

.fl-page-subtitle {
    font-family: var(--fl-font-ui, 'Inter', sans-serif);
    font-size: 0.9rem;
    color: var(--fl-text-secondary);
    margin-bottom: 0;
}

.fl-card-title {
    font-family: var(--fl-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--fl-text-primary);
    margin: 0;
}

.fl-card-subtitle {
    font-family: var(--fl-font-ui, 'Inter', sans-serif);
    font-size: 0.82rem;
    color: var(--fl-text-secondary);
}

.fl-form-label {
    display: block;
    font-family: var(--fl-font-ui, 'Inter', sans-serif);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--fl-text-secondary);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.fl-form-label.required-field::after,
.required-field::after {
    content: " *";
    color: var(--fl-color-red, #DC2626);
}

.fl-field-hint {
    display: block;
    font-family: var(--fl-font-ui, 'Inter', sans-serif);
    font-size: 0.76rem;
    color: var(--fl-text-muted);
    margin-top: 0.3rem;
}

/* ── Global Grid & Table Cell Typography ─────────────────────────── */
.fl-name-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
    text-align: left !important;
}

.fl-name-main,
.fl-item-name,
.fl-cell-primary {
    font-family: var(--fl-font-ui, 'Inter', sans-serif);
    font-weight: 600;
    color: var(--fl-text-primary);
    font-size: 0.92rem;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important;
    text-align: left !important;
}

.fl-cell-text,
.fl-phone-cell,
.fl-cell-phone,
.fl-email-cell,
.fl-cell-email,
.fl-location-text,
.fl-cell-location {
    font-family: var(--fl-font-ui, 'Inter', sans-serif);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--fl-text-primary);
    line-height: 1.4;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
    display: block !important;
    text-align: left !important;
}

.fl-empty-text {
    color: var(--fl-text-muted);
}

.fl-code-link {
    font-family: 'JetBrains Mono', var(--fl-font-ui, 'Inter', sans-serif);
    font-weight: 700;
    color: var(--fl-color-blue, #1565FF);
    text-decoration: none;
    font-size: 0.92rem;
    transition: color 0.15s ease;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
    max-width: 100% !important;
    text-align: left !important;
}

.fl-code-link:hover {
    color: var(--fl-sky, #23A8FF);
    text-decoration: underline;
}

.fl-gstin-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--fl-text-muted);
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

/* ── Syncfusion DataGrid Adaptive & Vertical Mode Alignment & Ellipsis ── */
.e-grid .e-rowcell {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* On mobile / vertical layout: force start alignment on all column headers and cell values */
@media (max-width: 768px) {

    .e-grid .e-rowcell,
    .e-grid .e-rowcell .e-headertext,
    .e-grid .e-headercell,
    .e-grid .e-headercell .e-headertext,
    .e-grid .e-columnheader,
    .e-grid .e-vertical-header,
    .e-grid th.e-headercell,
    .e-grid td.e-rowcell {
        text-align: left !important;
        text-align: start !important;
        justify-content: flex-start !important;
    }

    .e-grid .fl-action-btns {
        justify-content: flex-start !important;
    }

    .e-grid .fl-status-active,
    .e-grid .fl-status-blocked,
    .e-grid .fl-status-inactive {
        margin: 0 !important;
        align-self: flex-start !important;
    }

    /* Hide the group drag area on mobile */
    .e-grid .e-groupdroparea {
        display: none !important;
    }
}

/* ─── Syncfusion Filter Popups & Menus Boundary Constraints ───────── */
.e-grid .e-filter-popup,
.e-filter-popup,
.e-excelfilter,
.e-menu-popup,
.e-dropdown-popup,
.e-ddl.e-popup {
    max-height: 380px !important;
    max-width: min(340px, 92vw) !important;
    overflow-y: auto !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
    z-index: 10000 !important;
}

/* ─── Syncfusion Adaptive Mobile Dialog (Compact Floating Modal on Mobile Only) ──── */
@media (max-width: 768px) {

    .e-dialog.e-adaptive,
    .e-responsive-dialog,
    .e-adaptivedialog,
    .e-bigger .e-responsive-dialog,
    .e-bigger.e-responsive-dialog {
        position: fixed !important;
        top: auto !important;
        bottom: calc(68px + env(safe-area-inset-bottom, 14px)) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 20px) !important;
        max-width: 480px !important;
        height: auto !important;
        max-height: calc(100vh - 160px) !important;
        box-sizing: border-box !important;
        background: var(--fl-bg-surface, #FFFFFF) !important;
        color: var(--fl-text-primary, #0F172A) !important;
        border-radius: 14px !important;
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35) !important;
        border: 1px solid var(--fl-border, #E2E8F0) !important;
        overflow: hidden !important;
        z-index: 100000 !important;
        transition: transform 0.2s ease, opacity 0.2s ease !important;
    }

    .e-dialog.e-adaptive .e-dlg-content,
    .e-responsive-dialog .e-dlg-content,
    .e-adaptivedialog .e-dlg-content {
        padding-bottom: 28px !important;
        max-height: calc(100vh - 230px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .e-bigger .e-responsive-dialog .e-dlg-header-content,
    .e-bigger.e-responsive-dialog .e-dlg-header-content,
    .e-dialog.e-adaptive .e-dlg-header-content,
    .e-responsive-dialog .e-dlg-header-content,
    .e-adaptivedialog .e-dlg-header-content {
        background: var(--fl-bg-surface-2, #F8FAFC) !important;
        border-bottom: 1px solid var(--fl-border, #E2E8F0) !important;
        padding: 10px 14px !important;
        border-radius: 14px 14px 0 0 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        min-height: 48px !important;
        box-sizing: border-box !important;
        position: relative !important;
    }

    .e-bigger .e-responsive-dialog .e-dlg-header-content .e-dlg-header,
    .e-bigger.e-responsive-dialog .e-dlg-header-content .e-dlg-header,
    .e-dialog.e-adaptive .e-dlg-header,
    .e-responsive-dialog .e-dlg-header,
    .e-adaptivedialog .e-dlg-header {
        order: 1 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        overflow: visible !important;
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        color: var(--fl-text-primary, #0F172A) !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        line-height: 1 !important;
        gap: 8px !important;
        position: static !important;
    }

    .e-bigger .e-responsive-dialog .e-dlg-header-content .e-dlg-header .e-res-custom-element,
    .e-bigger.e-responsive-dialog .e-dlg-header-content .e-dlg-header .e-res-custom-element,
    .e-responsive-dialog .e-dlg-header .e-res-custom-element,
    .e-dialog.e-adaptive .e-dlg-header .e-res-custom-element,
    .e-adaptivedialog .e-dlg-header .e-res-custom-element {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .e-bigger .e-responsive-dialog .e-dlg-header-content .e-dlg-header .e-btn,
    .e-bigger.e-responsive-dialog .e-dlg-header-content .e-dlg-header .e-btn,
    .e-dialog.e-adaptive .e-dlg-header button,
    .e-responsive-dialog .e-dlg-header button,
    .e-adaptivedialog .e-dlg-header button,
    .e-dialog.e-adaptive .e-dlg-header a,
    .e-responsive-dialog .e-dlg-header a,
    .e-adaptivedialog .e-dlg-header a,
    .e-dialog.e-adaptive .e-dlg-header .e-btn,
    .e-responsive-dialog .e-dlg-header .e-btn,
    .e-adaptivedialog .e-dlg-header .e-btn,
    /* Sort Dialog Clear Button with Clean Border */
    .e-dialog.e-adaptive .e-dlg-header .e-clear-btn,
    .e-responsive-dialog .e-dlg-header .e-clear-btn,
    .e-dialog.e-adaptive .e-dlg-header .e-res-clear,
    .e-responsive-dialog .e-dlg-header .e-res-clear,
    .e-sortdialog .e-dlg-header .e-clear-btn,
    .e-sortdialog .e-dlg-header .e-res-clear,
    .e-responsive-dialog.e-sortdialog .e-dlg-header .e-clear-btn,
    .e-responsive-dialog.e-sortdialog .e-dlg-header .e-res-clear {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        color: var(--fl-text-secondary, #475569) !important;
        background: var(--fl-bg-surface, #FFFFFF) !important;
        border: 1px solid var(--fl-border, #CBD5E1) !important;
        border-radius: 6px !important;
        padding: 3px 10px !important;
        margin: 0 !important;
        cursor: pointer !important;
        text-decoration: none !important;
        line-height: 1.2 !important;
        height: 28px !important;
        min-height: 28px !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
        box-sizing: border-box !important;
        transition: all 150ms ease !important;
    }

    .e-dialog.e-adaptive .e-dlg-header .e-clear-btn:active,
    .e-responsive-dialog .e-dlg-header .e-clear-btn:active {
        background: var(--fl-bg-surface-2, #F1F5F9) !important;
        transform: scale(0.96) !important;
    }

    .fl-theme-dark .e-dialog.e-adaptive .e-dlg-header .e-clear-btn,
    .fl-theme-dark .e-responsive-dialog .e-dlg-header .e-clear-btn {
        background: var(--fl-bg-surface-2, #1E293B) !important;
        border-color: #334155 !important;
        color: #94A3B8 !important;
    }

    /* Sort Dialog OK Button with Primary Border */
    .e-dialog.e-adaptive .e-dlg-header .e-apply-btn,
    .e-responsive-dialog .e-dlg-header .e-apply-btn,
    .e-dialog.e-adaptive .e-dlg-header .e-res-ok,
    .e-responsive-dialog .e-dlg-header .e-res-ok,
    .e-sortdialog .e-dlg-header .e-apply-btn,
    .e-sortdialog .e-dlg-header .e-res-ok,
    .e-responsive-dialog.e-sortdialog .e-dlg-header .e-apply-btn,
    .e-responsive-dialog.e-sortdialog .e-dlg-header .e-res-ok {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        color: #FFFFFF !important;
        background: var(--fl-royal, #2563EB) !important;
        border: 1px solid var(--fl-royal, #2563EB) !important;
        border-radius: 6px !important;
        padding: 3px 12px !important;
        margin: 0 !important;
        cursor: pointer !important;
        text-decoration: none !important;
        line-height: 1.2 !important;
        height: 28px !important;
        min-height: 28px !important;
        box-shadow: 0 1px 3px rgba(37, 99, 235, 0.25) !important;
        box-sizing: border-box !important;
        transition: all 150ms ease !important;
    }

    .e-dialog.e-adaptive .e-dlg-header .e-apply-btn:active,
    .e-responsive-dialog .e-dlg-header .e-apply-btn:active {
        background: #1D4ED8 !important;
        border-color: #1D4ED8 !important;
        transform: scale(0.96) !important;
    }

    /* Filter Dialog Header Custom Action Element (Hide when empty, show crisp icon when populated) */
    .e-filterdialog .e-dlg-header .e-res-custom-element:empty,
    .e-filterdialog .e-dlg-header .e-res-custom-element .e-btn:empty,
    .e-responsive-dialog.e-filterdialog .e-dlg-header .e-res-custom-element:empty,
    .e-responsive-dialog.e-filterdialog .e-dlg-header .e-res-custom-element .e-btn:empty,
    .e-dialog.e-adaptive .e-dlg-header .e-res-custom-element:empty,
    .e-dialog.e-adaptive .e-dlg-header .e-res-custom-element .e-btn:empty {
        display: none !important;
        border: none !important;
        background: transparent !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .e-dialog.e-adaptive .e-dlg-header .e-filter-icon,
    .e-responsive-dialog .e-dlg-header .e-filter-icon,
    .e-dialog.e-adaptive .e-dlg-header .e-resfilter,
    .e-responsive-dialog .e-dlg-header .e-resfilter,
    .e-filterdialog .e-dlg-header .e-filter-icon,
    .e-filterdialog .e-dlg-header .e-resfilter,
    .e-responsive-dialog.e-filterdialog .e-dlg-header .e-res-custom-element .e-btn:not(:empty),
    .e-dialog.e-adaptive.e-filterdialog .e-dlg-header .e-res-custom-element .e-btn:not(:empty),
    .e-filterdialog .e-dlg-header .e-res-custom-element .e-btn:not(:empty) {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        transform: none !important;
        vertical-align: middle !important;
        position: static !important;
        float: none !important;
        height: 28px !important;
        min-height: 28px !important;
        width: 32px !important;
        min-width: 32px !important;
        padding: 0 !important;
        border-radius: 6px !important;
        background: var(--fl-bg-surface-2, #F8FAFC) !important;
        border: 1px solid var(--fl-border, #CBD5E1) !important;
        color: var(--fl-royal, #2563EB) !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
        box-sizing: border-box !important;
        line-height: 1 !important;
        cursor: pointer !important;
    }

    .e-filterdialog .e-dlg-header .e-filter-icon *,
    .e-filterdialog .e-dlg-header .e-resfilter *,
    .e-filterdialog .e-dlg-header .e-res-custom-element .e-btn *,
    .e-filterdialog .e-dlg-header .e-icons,
    .e-filterdialog .e-dlg-header .e-btn-icon,
    .e-responsive-dialog.e-filterdialog .e-dlg-header .e-icons,
    .e-responsive-dialog.e-filterdialog .e-dlg-header .e-btn-icon {
        color: var(--fl-royal, #2563EB) !important;
        font-size: 15px !important;
        display: inline-block !important;
        line-height: 1 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .fl-theme-dark .e-filterdialog .e-dlg-header .e-filter-icon,
    .fl-theme-dark .e-filterdialog .e-dlg-header .e-resfilter,
    .fl-theme-dark .e-filterdialog .e-dlg-header .e-res-custom-element .e-btn,
    .fl-theme-dark .e-responsive-dialog.e-filterdialog .e-dlg-header .e-res-custom-element .e-btn {
        background: var(--fl-bg-surface-2, #1E293B) !important;
        border-color: #334155 !important;
        color: #38BDF8 !important;
    }

    .fl-theme-dark .e-filterdialog .e-dlg-header .e-icons,
    .fl-theme-dark .e-filterdialog .e-dlg-header .e-btn-icon,
    .fl-theme-dark .e-responsive-dialog.e-filterdialog .e-dlg-header .e-icons,
    .fl-theme-dark .e-responsive-dialog.e-filterdialog .e-dlg-header .e-btn-icon {
        color: #38BDF8 !important;
    }

    .e-bigger .e-responsive-dialog .e-dlg-header-content .e-dlg-closeicon-btn,
    .e-bigger.e-responsive-dialog .e-dlg-header-content .e-dlg-closeicon-btn,
    .e-dialog.e-adaptive .e-dlg-closeicon-btn,
    .e-responsive-dialog .e-dlg-closeicon-btn,
    .e-adaptivedialog .e-dlg-closeicon-btn,
    .e-dialog.e-adaptive .e-btn-icon.e-icon-dlg-close,
    .e-responsive-dialog .e-btn-icon.e-icon-dlg-close {
        order: 2 !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
        cursor: pointer !important;
        padding: 0 !important;
        margin: 0 0 0 auto !important;
        position: static !important;
        float: none !important;
        background: transparent !important;
        border: none !important;
        color: var(--fl-text-secondary, #64748B) !important;
        flex-shrink: 0 !important;
        flex: 0 0 auto !important;
    }

    .e-dialog.e-adaptive .e-dlg-content,
    .e-responsive-dialog .e-dlg-content,
    .e-adaptivedialog .e-dlg-content {
        padding: 10px 14px !important;
        max-height: calc(48vh - 54px) !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    .e-dialog.e-adaptive .e-dlg-content .e-list-item,
    .e-responsive-dialog .e-dlg-content .e-list-item,
    .e-adaptivedialog .e-dlg-content .e-list-item,
    .e-dialog.e-adaptive .e-content,
    .e-responsive-dialog .e-content,
    .e-adaptivedialog .e-content {
        padding: 8px 10px !important;
        font-size: 0.88rem !important;
        font-weight: 500 !important;
        color: var(--fl-text-primary, #0F172A) !important;
        border-radius: 6px !important;
    }

    .fl-theme-dark .e-dialog.e-adaptive,
    .fl-theme-dark .e-responsive-dialog,
    .fl-theme-dark .e-adaptivedialog {
        background: var(--fl-bg-surface, #0F1B32) !important;
        color: var(--fl-text-primary, #E2E8F0) !important;
        border-color: var(--fl-border, #1C2D4A) !important;
    }

    .fl-theme-dark .e-dialog.e-adaptive .e-dlg-header-content,
    .fl-theme-dark .e-responsive-dialog .e-dlg-header-content,
    .fl-theme-dark .e-adaptivedialog .e-dlg-header-content {
        background: var(--fl-bg-surface-2, #142037) !important;
        border-bottom-color: var(--fl-border, #1C2D4A) !important;
    }

    .fl-theme-dark .e-dialog.e-adaptive .e-dlg-header,
    .fl-theme-dark .e-responsive-dialog .e-dlg-header,
    .fl-theme-dark .e-adaptivedialog .e-dlg-header {
        color: var(--fl-text-primary, #FFFFFF) !important;
    }

    .fl-theme-dark .e-dialog.e-adaptive .e-dlg-content .e-list-item,
    .fl-theme-dark .e-responsive-dialog .e-dlg-content .e-list-item,
    .fl-theme-dark .e-adaptivedialog .e-dlg-content .e-list-item {
        color: var(--fl-text-primary, #E2E8F0) !important;
    }
}

/* ── Universal Badges & Status Indicators ────────────────────────── */
.fl-badge {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    font-family: var(--fl-font-ui, 'Inter', sans-serif);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-align: center;
}

.fl-status-active {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    background: rgba(22, 163, 74, 0.12);
    color: var(--fl-color-green, #16A34A);
    border: 1px solid rgba(22, 163, 74, 0.28);
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.8rem;
}

.fl-status-inactive {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    background: rgba(245, 165, 36, 0.15) !important;
    color: var(--fl-color-amber, #D97706) !important;
    border: 1px solid rgba(245, 165, 36, 0.32) !important;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.8rem;
}

.fl-theme-dark .fl-status-inactive {
    background: rgba(245, 158, 11, 0.18) !important;
    color: #FBBF24 !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

.fl-status-blocked {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    background: rgba(220, 38, 38, 0.12);
    color: var(--fl-color-red, #DC2626);
    border: 1px solid rgba(220, 38, 38, 0.28);
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.8rem;
}

/* ── Universal Container & Card Classes ──────────────────────────── */
.fl-page-container {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.fl-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.fl-card {
    background: var(--fl-bg-surface);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--fl-border);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.fl-toolbar-card {
    padding: 1rem 1.25rem;
}

.fl-toolbar-grid {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1.2fr auto;
    gap: 1rem;
    align-items: center;
}

@media (max-width: 992px) {
    .fl-toolbar-grid {
        grid-template-columns: 1fr;
    }
}

.fl-grid-card {
    padding: 1.25rem;
    overflow-x: auto;
}

/* ── Global Card Headers & Icon Highlights ────────────────────────── */
.fl-card-header {
    padding: 1rem 1.25rem;
    background: var(--fl-bg-surface-2, #F8FAFC);
    border-bottom: 1px solid var(--fl-border, #E2E8F0);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

.fl-header-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fl-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fl-text-primary, #0F172A);
    margin: 0;
}

.fl-hl-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.fl-hl-bg--blue {
    background: rgba(37, 99, 235, 0.15);
    color: var(--fl-color-blue, #1565FF);
}

.fl-hl-bg--teal {
    background: rgba(13, 148, 136, 0.15);
    color: var(--fl-color-teal, #0D9488);
}

.fl-hl-bg--green {
    background: rgba(34, 197, 94, 0.15);
    color: var(--fl-color-green, #16A34A);
}

.fl-hl-bg--amber {
    background: rgba(245, 158, 11, 0.15);
    color: var(--fl-color-amber, #D97706);
}

/* ── FLDataGrid Responsive Container & Internal Scrollbars ── */
.fl-grid-responsive-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: block !important;
}

.fl-themed-grid.e-grid {
    width: 100% !important;
    max-width: 100% !important;
    font-family: var(--fl-font-ui, 'Inter', sans-serif);
    background-color: var(--fl-bg-surface, #FFFFFF);
    border: 1px solid var(--fl-border, #E2E8F0);
    border-radius: 12px;
    overflow: hidden !important;
}

/* ── Fixed Height & Permanently Visible Touch-Draggable X & Y Scrollbars ── */
.fl-themed-grid.e-grid .e-gridheader,
.fl-themed-grid.e-grid .e-gridheader .e-headercontent,
.fl-themed-grid.e-grid .e-gridcontent {
    overflow: hidden !important;
}

.fl-themed-grid.e-grid .e-gridcontent .e-content,
.fl-themed-grid.e-grid .e-content {
    overflow-x: scroll !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    scrollbar-gutter: stable both-edges !important;
    scrollbar-width: auto !important;
    scrollbar-color: #334155 #E2E8F0 !important;
}

.fl-theme-dark .fl-themed-grid.e-grid .e-gridcontent .e-content,
.fl-theme-dark .fl-themed-grid.e-grid .e-content {
    scrollbar-color: #38BDF8 #0F172A !important;
}

/* WebKit Scrollbar Styling (Permanently Visible, Touch-Draggable on all devices) */
.fl-themed-grid.e-grid .e-gridcontent .e-content::-webkit-scrollbar,
.fl-themed-grid.e-grid .e-content::-webkit-scrollbar {
    width: 14px !important;
    height: 14px !important;
    display: block !important;
    -webkit-appearance: none !important;
}

.fl-themed-grid.e-grid .e-gridcontent .e-content::-webkit-scrollbar-track,
.fl-themed-grid.e-grid .e-content::-webkit-scrollbar-track {
    background: #E2E8F0 !important;
    border-radius: 8px !important;
    border: 1px solid #CBD5E1 !important;
    -webkit-appearance: none !important;
}

.fl-theme-dark .fl-themed-grid.e-grid .e-gridcontent .e-content::-webkit-scrollbar-track,
.fl-theme-dark .fl-themed-grid.e-grid .e-content::-webkit-scrollbar-track {
    background: #0F172A !important;
    border-radius: 8px !important;
    border: 1px solid #1E293B !important;
    -webkit-appearance: none !important;
}

.fl-themed-grid.e-grid .e-gridcontent .e-content::-webkit-scrollbar-thumb,
.fl-themed-grid.e-grid .e-content::-webkit-scrollbar-thumb {
    background: #334155 !important;
    border-radius: 8px !important;
    border: 2px solid #E2E8F0 !important;
    min-width: 44px !important;
    min-height: 44px !important;
    -webkit-appearance: none !important;
}

.fl-themed-grid.e-grid .e-gridcontent .e-content::-webkit-scrollbar-thumb:hover,
.fl-themed-grid.e-grid .e-content::-webkit-scrollbar-thumb:active {
    background: #0F172A !important;
}

.fl-theme-dark .fl-themed-grid.e-grid .e-gridcontent .e-content::-webkit-scrollbar-thumb,
.fl-theme-dark .fl-themed-grid.e-grid .e-content::-webkit-scrollbar-thumb {
    background: #38BDF8 !important;
    border-radius: 8px !important;
    border: 2px solid #0F172A !important;
    min-width: 44px !important;
    min-height: 44px !important;
    -webkit-appearance: none !important;
}

.fl-theme-dark .fl-themed-grid.e-grid .e-gridcontent .e-content::-webkit-scrollbar-thumb:hover,
.fl-theme-dark .fl-themed-grid.e-grid .e-content::-webkit-scrollbar-thumb:active {
    background: #7DD3FC !important;
}

.fl-themed-grid.e-grid .e-gridcontent .e-content::-webkit-scrollbar-corner,
.fl-themed-grid.e-grid .e-content::-webkit-scrollbar-corner {
    background: transparent !important;
    -webkit-appearance: none !important;
}

.fl-theme-dark .fl-themed-grid.e-grid .e-gridcontent::-webkit-scrollbar-corner,
.fl-theme-dark .fl-themed-grid.e-grid .e-gridcontent .e-content::-webkit-scrollbar-corner {
    background: #0F172A !important;
    -webkit-appearance: none !important;
}

.fl-themed-grid.e-grid .e-groupdroparea {
    background-color: var(--fl-bg-surface-2, #F8FAFC);
    border-bottom: 1px solid var(--fl-border, #E2E8F0);
    color: var(--fl-text-secondary, #64748B);
}

.fl-themed-grid.e-grid .e-groupcaption,
.fl-themed-grid.e-grid tr.e-groupcaptionrow,
.fl-themed-grid.e-grid td.e-groupcaption,
.fl-themed-grid.e-grid .e-groupcaptioncell {
    background-color: var(--fl-bg-surface-2, #F8FAFC) !important;
    border-color: var(--fl-border, #E2E8F0) !important;
    color: var(--fl-text-primary, #0F172A) !important;
    font-weight: 600 !important;
}

.fl-themed-grid.e-grid .e-grouptopleftcell,
.fl-themed-grid.e-grid .e-headerindentcell,
.fl-themed-grid.e-grid .e-gridheader .e-rowdragheader,
.fl-themed-grid.e-grid .e-gridheader .e-dragindentheadercell {
    background-color: var(--fl-bg-surface-2, #F8FAFC) !important;
    border-color: var(--fl-border, #E2E8F0) !important;
}

.fl-themed-grid.e-grid .e-toolbar {
    background-color: var(--fl-bg-surface, #FFFFFF);
    border-bottom: 1px solid var(--fl-border, #E2E8F0);
}

.fl-themed-grid.e-grid .e-gridheader {
    border-bottom: 1px solid var(--fl-border-soft, #E2E8F0);
}

.fl-themed-grid.e-grid .e-headercell {
    font-family: var(--fl-font-ui, 'Inter', sans-serif) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--fl-text-secondary, #64748B) !important;
    padding: 0.85rem 1rem !important;
}

.fl-themed-grid.e-grid .e-headercell .e-headertext {
    font-family: var(--fl-font-ui, 'Inter', sans-serif) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--fl-text-secondary, #64748B) !important;
}

.fl-themed-grid.e-grid .e-rowcell {
    font-family: var(--fl-font-ui, 'Inter', sans-serif) !important;
    font-size: 0.9rem !important;
    color: var(--fl-text-primary, #0F172A) !important;
    padding: 0.85rem 1rem !important;
    vertical-align: middle !important;
}

.fl-themed-grid.e-grid .e-gridcontent .e-row:hover {
    background-color: var(--fl-bg-surface-2, rgba(241, 245, 249, 0.6)) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ── SYNCFUSION DATAGRID DARK MODE PALETTE INTEGRATION ──────────────
   ═══════════════════════════════════════════════════════════════════ */

.fl-theme-dark .fl-themed-grid.e-grid,
.fl-theme-dark .e-grid {
    background-color: var(--fl-bg-surface, #0F1B32) !important;
    border-color: var(--fl-border, #1C2D4A) !important;
    color: var(--fl-text-primary, #E2E8F0) !important;
}

/* 1. Grouping Drop Area, Group Caption Rows & Indents */
.fl-theme-dark .e-grid .e-groupdroparea {
    background-color: var(--fl-bg-surface-2, #142037) !important;
    border-color: var(--fl-border, #1C2D4A) !important;
    color: var(--fl-text-secondary, #94A3B8) !important;
}

.fl-theme-dark .e-grid .e-groupdroparea .e-groupheadertitle {
    color: var(--fl-text-secondary, #94A3B8) !important;
}

.fl-theme-dark .e-grid .e-groupdroparea .e-groupheadercell {
    background-color: var(--fl-bg-surface, #0F1B32) !important;
    border: 1px solid var(--fl-border, #1C2D4A) !important;
    color: var(--fl-text-primary, #E2E8F0) !important;
    border-radius: 6px !important;
}

/* Group Caption Row & Text */
.fl-theme-dark .e-grid .e-groupcaption,
.fl-theme-dark .e-grid tr.e-groupcaptionrow,
.fl-theme-dark .e-grid td.e-groupcaption,
.fl-theme-dark .e-grid .e-groupcaptioncell {
    background-color: var(--fl-bg-surface-2, #142037) !important;
    border-color: var(--fl-border, #1C2D4A) !important;
    color: var(--fl-text-primary, #E2E8F0) !important;
    font-weight: 600 !important;
}

/* Group & Drag Top-Left Header Indent Cells (Top-Left White Box Fix) */
.fl-theme-dark .e-grid .e-grouptopleftcell,
.fl-theme-dark .e-grid .e-headerindentcell,
.fl-theme-dark .e-grid .e-gridheader .e-rowdragheader,
.fl-theme-dark .e-grid .e-gridheader .e-dragindentheadercell {
    background-color: var(--fl-bg-surface-2, #142037) !important;
    border-color: var(--fl-border, #1C2D4A) !important;
}

/* Group Indent Cells and Chevron Expand/Collapse */
.fl-theme-dark .e-grid .e-indentcell,
.fl-theme-dark .e-grid .e-recordplusexpand,
.fl-theme-dark .e-grid .e-recordpluscollapse,
.fl-theme-dark .e-grid .e-groupcaption .e-recordplusexpand,
.fl-theme-dark .e-grid .e-groupcaption .e-recordpluscollapse {
    background-color: var(--fl-bg-surface-2, #142037) !important;
    border-color: var(--fl-border, #1C2D4A) !important;
    color: var(--fl-text-secondary, #94A3B8) !important;
}

.fl-theme-dark .e-grid .e-row .e-indentcell {
    background-color: var(--fl-bg-surface, #0F1B32) !important;
    border-color: var(--fl-border, #1C2D4A) !important;
}

.fl-theme-dark .e-grid .e-icon-grightarrow,
.fl-theme-dark .e-grid .e-icon-gdownarrow,
.fl-theme-dark .e-grid .e-icons {
    color: var(--fl-text-secondary, #94A3B8) !important;
}

/* 2. Toolbar & Search & Column Chooser */
.fl-theme-dark .e-grid .e-toolbar,
.fl-theme-dark .e-grid .e-toolbar-items {
    background-color: var(--fl-bg-surface, #0F1B32) !important;
    border-color: var(--fl-border, #1C2D4A) !important;
    color: var(--fl-text-primary, #E2E8F0) !important;
}

.fl-theme-dark .e-grid .e-toolbar .e-toolbar-item .e-tbar-btn,
.fl-theme-dark .e-grid .e-toolbar .e-tbar-btn {
    background: transparent !important;
    color: var(--fl-text-primary, #E2E8F0) !important;
    border-radius: 6px !important;
}

.fl-theme-dark .e-grid .e-toolbar .e-tbar-btn:hover {
    background-color: var(--fl-bg-surface-2, #142037) !important;
    color: #FFFFFF !important;
}

.fl-theme-dark .e-grid .e-toolbar .e-tbar-btn .e-tbar-btn-text,
.fl-theme-dark .e-grid .e-toolbar .e-tbar-btn .e-icons {
    color: var(--fl-text-primary, #E2E8F0) !important;
}

.fl-theme-dark .e-grid .e-toolbar .e-input-group,
.fl-theme-dark .e-grid .e-toolbar .e-input-group.e-control-wrapper {
    background-color: var(--fl-bg-surface-2, #142037) !important;
    border: 1px solid var(--fl-border, #1C2D4A) !important;
    color: var(--fl-text-primary, #E2E8F0) !important;
    border-radius: 8px !important;
}

.fl-theme-dark .e-grid .e-toolbar input.e-input,
.fl-theme-dark .e-grid .e-toolbar .e-input-group input.e-input {
    background-color: transparent !important;
    color: var(--fl-text-primary, #E2E8F0) !important;
}

.fl-theme-dark .e-grid .e-toolbar .e-input-group-icon {
    color: var(--fl-text-secondary, #94A3B8) !important;
}

/* 3. Row Drag & Drop Column and Handle Cells (Leftmost ⠿) */
.fl-theme-dark .e-grid .e-rowdragdrop,
.fl-theme-dark .e-grid .e-dragindentcell,
.fl-theme-dark .e-grid .e-rowdragdrop-header,
.fl-theme-dark .e-grid .e-dragindentheadercell,
.fl-theme-dark .e-grid .e-rowdragheader {
    background-color: var(--fl-bg-surface, #0F1B32) !important;
    border-color: var(--fl-border, #1C2D4A) !important;
    color: var(--fl-text-muted, #64748B) !important;
}

.fl-theme-dark .e-grid .e-gridheader .e-rowdragheader,
.fl-theme-dark .e-grid .e-gridheader .e-dragindentheadercell,
.fl-theme-dark .e-grid .e-gridheader .e-headercell {
    background-color: var(--fl-bg-surface-2, #142037) !important;
}

.fl-theme-dark .e-grid .e-rcursor {
    color: var(--fl-text-muted, #64748B) !important;
}

/* 4. Table Header Cells */
.fl-theme-dark .e-grid .e-gridheader,
.fl-theme-dark .e-grid .e-headercontent,
.fl-theme-dark .e-grid .e-headercell,
.fl-theme-dark .e-grid .e-columnheader {
    background-color: var(--fl-bg-surface-2, #142037) !important;
    border-color: var(--fl-border, #1C2D4A) !important;
    color: var(--fl-text-secondary, #94A3B8) !important;
}

.fl-theme-dark .e-grid .e-headercell .e-headertext {
    color: var(--fl-text-secondary, #94A3B8) !important;
}

.fl-theme-dark .e-grid .e-sortfilterdiv,
.fl-theme-dark .e-grid .e-filtericon,
.fl-theme-dark .e-grid .e-sortnumber {
    color: var(--fl-text-secondary, #94A3B8) !important;
}

/* 5. Table Rows & Cells */
.fl-theme-dark .e-grid .e-gridcontent,
.fl-theme-dark .e-grid .e-content,
.fl-theme-dark .e-grid .e-table,
.fl-theme-dark .e-grid .e-row {
    background-color: var(--fl-bg-surface, #0F1B32) !important;
    color: var(--fl-text-primary, #E2E8F0) !important;
}

.fl-theme-dark .e-grid .e-rowcell {
    background-color: var(--fl-bg-surface, #0F1B32) !important;
    border-bottom: 1px solid var(--fl-border, #1C2D4A) !important;
    border-color: var(--fl-border, #1C2D4A) !important;
    color: var(--fl-text-primary, #E2E8F0) !important;
}

.fl-theme-dark .e-grid .e-altrow,
.fl-theme-dark .e-grid .e-altrow .e-rowcell,
.fl-theme-dark .e-grid .e-altrow .e-rowdragdrop {
    background-color: rgba(20, 32, 55, 0.45) !important;
}

.fl-theme-dark .e-grid .e-gridcontent .e-row:hover,
.fl-theme-dark .e-grid .e-gridcontent .e-row:hover .e-rowcell,
.fl-theme-dark .e-grid .e-gridcontent .e-row:hover .e-rowdragdrop {
    background-color: var(--fl-bg-surface-2, #142037) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ── ALL SYNCFUSION POPUPS, DIALOGS & OVERLAYS IN DARK MODE ─────────
   ═══════════════════════════════════════════════════════════════════ */

/* 1. All Dialogs & Column Chooser Dialog */
body:has(.fl-theme-dark) .e-dialog,
html.fl-theme-dark .e-dialog,
body.fl-theme-dark .e-dialog,
.fl-theme-dark .e-dialog,
body:has(.fl-theme-dark) .e-ccdlg,
html.fl-theme-dark .e-ccdlg,
body.fl-theme-dark .e-ccdlg,
.fl-theme-dark .e-ccdlg {
    background-color: var(--fl-bg-surface, #0F1B32) !important;
    border: 1px solid var(--fl-border, #1C2D4A) !important;
    border-radius: 12px !important;
    color: var(--fl-text-primary, #E2E8F0) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
}

body:has(.fl-theme-dark) .e-dialog .e-dlg-header-content,
html.fl-theme-dark .e-dialog .e-dlg-header-content,
body.fl-theme-dark .e-dialog .e-dlg-header-content,
.fl-theme-dark .e-dialog .e-dlg-header-content {
    background-color: var(--fl-bg-surface-2, #142037) !important;
    border-bottom: 1px solid var(--fl-border, #1C2D4A) !important;
    padding: 1rem 1.25rem !important;
}

body:has(.fl-theme-dark) .e-dialog .e-dlg-header,
html.fl-theme-dark .e-dialog .e-dlg-header,
body.fl-theme-dark .e-dialog .e-dlg-header,
.fl-theme-dark .e-dialog .e-dlg-header,
body:has(.fl-theme-dark) .e-ccdlg .e-cc-title,
html.fl-theme-dark .e-ccdlg .e-cc-title,
body.fl-theme-dark .e-ccdlg .e-cc-title,
.fl-theme-dark .e-ccdlg .e-cc-title {
    color: var(--fl-text-primary, #E2E8F0) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
}

body:has(.fl-theme-dark) .e-dialog .e-dlg-content,
html.fl-theme-dark .e-dialog .e-dlg-content,
body.fl-theme-dark .e-dialog .e-dlg-content,
.fl-theme-dark .e-dialog .e-dlg-content,
body:has(.fl-theme-dark) .e-ccdlg .e-cc-contentdiv,
html.fl-theme-dark .e-ccdlg .e-cc-contentdiv,
body.fl-theme-dark .e-ccdlg .e-cc-contentdiv,
.fl-theme-dark .e-ccdlg .e-cc-contentdiv {
    background-color: var(--fl-bg-surface, #0F1B32) !important;
    color: var(--fl-text-primary, #E2E8F0) !important;
}

/* Column Chooser Search Box */
body:has(.fl-theme-dark) .e-ccdlg .e-cc-searchdiv,
html.fl-theme-dark .e-ccdlg .e-cc-searchdiv,
body.fl-theme-dark .e-ccdlg .e-cc-searchdiv,
.fl-theme-dark .e-ccdlg .e-cc-searchdiv {
    background-color: var(--fl-bg-surface, #0F1B32) !important;
    border-bottom: 1px solid var(--fl-border, #1C2D4A) !important;
    padding: 0.75rem 1rem !important;
}

body:has(.fl-theme-dark) .e-ccdlg .e-input-group,
html.fl-theme-dark .e-ccdlg .e-input-group,
body.fl-theme-dark .e-ccdlg .e-input-group,
.fl-theme-dark .e-ccdlg .e-input-group {
    background-color: var(--fl-bg-surface-2, #142037) !important;
    border: 1px solid var(--fl-border, #1C2D4A) !important;
    border-radius: 8px !important;
    color: var(--fl-text-primary, #E2E8F0) !important;
}

body:has(.fl-theme-dark) .e-ccdlg input.e-input,
html.fl-theme-dark .e-ccdlg input.e-input,
body.fl-theme-dark .e-ccdlg input.e-input,
.fl-theme-dark .e-ccdlg input.e-input {
    color: var(--fl-text-primary, #E2E8F0) !important;
    background: transparent !important;
}

body:has(.fl-theme-dark) .e-ccdlg .e-input-group-icon,
html.fl-theme-dark .e-ccdlg .e-input-group-icon,
body.fl-theme-dark .e-ccdlg .e-input-group-icon,
.fl-theme-dark .e-ccdlg .e-input-group-icon {
    color: var(--fl-text-secondary, #94A3B8) !important;
}

/* Column Chooser Checkbox Items & Treeview */
body:has(.fl-theme-dark) .e-ccdlg .e-cclist,
html.fl-theme-dark .e-ccdlg .e-cclist,
body.fl-theme-dark .e-ccdlg .e-cclist,
.fl-theme-dark .e-ccdlg .e-cclist,
body:has(.fl-theme-dark) .e-ccdlg .e-treeview,
html.fl-theme-dark .e-ccdlg .e-treeview,
body.fl-theme-dark .e-ccdlg .e-treeview,
.fl-theme-dark .e-ccdlg .e-treeview,
body:has(.fl-theme-dark) .e-ccdlg .e-list-parent,
html.fl-theme-dark .e-ccdlg .e-list-parent,
body.fl-theme-dark .e-ccdlg .e-list-parent,
.fl-theme-dark .e-ccdlg .e-list-parent {
    background-color: var(--fl-bg-surface, #0F1B32) !important;
    color: var(--fl-text-primary, #E2E8F0) !important;
}

body:has(.fl-theme-dark) .e-ccdlg .e-list-item,
html.fl-theme-dark .e-ccdlg .e-list-item,
body.fl-theme-dark .e-ccdlg .e-list-item,
.fl-theme-dark .e-ccdlg .e-list-item,
body:has(.fl-theme-dark) .e-ccdlg .e-text-content,
html.fl-theme-dark .e-ccdlg .e-text-content,
body.fl-theme-dark .e-ccdlg .e-text-content,
.fl-theme-dark .e-ccdlg .e-text-content {
    background-color: transparent !important;
    color: var(--fl-text-primary, #E2E8F0) !important;
}

body:has(.fl-theme-dark) .e-ccdlg .e-list-item:hover>.e-text-content,
html.fl-theme-dark .e-ccdlg .e-list-item:hover>.e-text-content,
body.fl-theme-dark .e-ccdlg .e-list-item:hover>.e-text-content,
.fl-theme-dark .e-ccdlg .e-list-item:hover>.e-text-content {
    background-color: var(--fl-bg-surface-2, #142037) !important;
    border-radius: 6px !important;
}

body:has(.fl-theme-dark) .e-ccdlg .e-list-text,
html.fl-theme-dark .e-ccdlg .e-list-text,
body.fl-theme-dark .e-ccdlg .e-list-text,
.fl-theme-dark .e-ccdlg .e-list-text,
body:has(.fl-theme-dark) .e-checkbox-wrapper .e-label,
html.fl-theme-dark .e-checkbox-wrapper .e-label,
body.fl-theme-dark .e-checkbox-wrapper .e-label,
.fl-theme-dark .e-checkbox-wrapper .e-label {
    color: var(--fl-text-primary, #E2E8F0) !important;
}

/* Checkbox Frame & Tick in Dark Mode */
body:has(.fl-theme-dark) .e-checkbox-wrapper .e-frame,
html.fl-theme-dark .e-checkbox-wrapper .e-frame,
body.fl-theme-dark .e-checkbox-wrapper .e-frame,
.fl-theme-dark .e-checkbox-wrapper .e-frame {
    background-color: var(--fl-bg-surface-2, #142037) !important;
    border: 1px solid var(--fl-border, #1C2D4A) !important;
}

body:has(.fl-theme-dark) .e-checkbox-wrapper .e-check,
html.fl-theme-dark .e-checkbox-wrapper .e-check,
body.fl-theme-dark .e-checkbox-wrapper .e-check,
.fl-theme-dark .e-checkbox-wrapper .e-check {
    background-color: var(--fl-color-blue, #1565FF) !important;
    border-color: var(--fl-color-blue, #1565FF) !important;
    color: #FFFFFF !important;
}

/* Dialog Footer & Action Buttons */
body:has(.fl-theme-dark) .e-dialog .e-footer-content,
html.fl-theme-dark .e-dialog .e-footer-content,
body.fl-theme-dark .e-dialog .e-footer-content,
.fl-theme-dark .e-dialog .e-footer-content {
    background-color: var(--fl-bg-surface-2, #142037) !important;
    border-top: 1px solid var(--fl-border, #1C2D4A) !important;
    padding: 0.85rem 1.25rem !important;
}

body:has(.fl-theme-dark) .e-dialog .e-footer-content .e-btn,
html.fl-theme-dark .e-dialog .e-footer-content .e-btn,
body.fl-theme-dark .e-dialog .e-footer-content .e-btn,
.fl-theme-dark .e-dialog .e-footer-content .e-btn {
    border-radius: 8px !important;
    font-weight: 600 !important;
}

/* 2. Filter Popups, Excel Filter, Column Menu, Context Menu */
body:has(.fl-theme-dark) .e-filter-popup,
html.fl-theme-dark .e-filter-popup,
body.fl-theme-dark .e-filter-popup,
.fl-theme-dark .e-filter-popup,
body:has(.fl-theme-dark) .e-excel-filter,
html.fl-theme-dark .e-excel-filter,
body.fl-theme-dark .e-excel-filter,
.fl-theme-dark .e-excel-filter,
body:has(.fl-theme-dark) .e-columnmenu,
html.fl-theme-dark .e-columnmenu,
body.fl-theme-dark .e-columnmenu,
.fl-theme-dark .e-columnmenu,
body:has(.fl-theme-dark) .e-contextmenu-container,
html.fl-theme-dark .e-contextmenu-container,
body.fl-theme-dark .e-contextmenu-container,
.fl-theme-dark .e-contextmenu-container {
    background-color: var(--fl-bg-surface, #0F1B32) !important;
    border: 1px solid var(--fl-border, #1C2D4A) !important;
    border-radius: 10px !important;
    color: var(--fl-text-primary, #E2E8F0) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
}

body:has(.fl-theme-dark) .e-contextmenu-container .e-menu-item,
html.fl-theme-dark .e-contextmenu-container .e-menu-item,
body.fl-theme-dark .e-contextmenu-container .e-menu-item,
.fl-theme-dark .e-contextmenu-container .e-menu-item {
    color: var(--fl-text-primary, #E2E8F0) !important;
}

body:has(.fl-theme-dark) .e-contextmenu-container .e-menu-item:hover,
html.fl-theme-dark .e-contextmenu-container .e-menu-item:hover,
body.fl-theme-dark .e-contextmenu-container .e-menu-item:hover,
.fl-theme-dark .e-contextmenu-container .e-menu-item:hover {
    background-color: var(--fl-bg-surface-2, #142037) !important;
    color: #FFFFFF !important;
}

/* 3. All Dropdown, Autocomplete, MultiSelect, Popup Lists */
body:has(.fl-theme-dark) .e-dropdownbase,
html.fl-theme-dark .e-dropdownbase,
body.fl-theme-dark .e-dropdownbase,
.fl-theme-dark .e-dropdownbase,
body:has(.fl-theme-dark) .e-popup.e-ddl,
html.fl-theme-dark .e-popup.e-ddl,
body.fl-theme-dark .e-popup.e-ddl,
.fl-theme-dark .e-popup.e-ddl {
    background-color: var(--fl-bg-surface, #0F1B32) !important;
    border: 1px solid var(--fl-border, #1C2D4A) !important;
    border-radius: 10px !important;
    color: var(--fl-text-primary, #E2E8F0) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
}

body:has(.fl-theme-dark) .e-dropdownbase .e-list-item,
html.fl-theme-dark .e-dropdownbase .e-list-item,
body.fl-theme-dark .e-dropdownbase .e-list-item,
.fl-theme-dark .e-dropdownbase .e-list-item {
    color: var(--fl-text-primary, #E2E8F0) !important;
    background-color: transparent !important;
    padding: 0.55rem 0.85rem !important;
}

body:has(.fl-theme-dark) .e-dropdownbase .e-list-item:hover,
html.fl-theme-dark .e-dropdownbase .e-list-item:hover,
body.fl-theme-dark .e-dropdownbase .e-list-item:hover,
.fl-theme-dark .e-dropdownbase .e-list-item:hover,
body:has(.fl-theme-dark) .e-dropdownbase .e-list-item.e-active,
html.fl-theme-dark .e-dropdownbase .e-list-item.e-active,
body.fl-theme-dark .e-dropdownbase .e-list-item.e-active,
.fl-theme-dark .e-dropdownbase .e-list-item.e-active {
    background-color: var(--fl-bg-surface-2, #142037) !important;
    color: var(--fl-color-blue, #60A5FA) !important;
    font-weight: 600 !important;
}

/* 4. Calendar, DatePicker & TimePicker Popups */
body:has(.fl-theme-dark) .e-calendar,
html.fl-theme-dark .e-calendar,
body.fl-theme-dark .e-calendar,
.fl-theme-dark .e-calendar,
body:has(.fl-theme-dark) .e-datepicker.e-popup,
html.fl-theme-dark .e-datepicker.e-popup,
body.fl-theme-dark .e-datepicker.e-popup,
.fl-theme-dark .e-datepicker.e-popup {
    background-color: var(--fl-bg-surface, #0F1B32) !important;
    border: 1px solid var(--fl-border, #1C2D4A) !important;
    color: var(--fl-text-primary, #E2E8F0) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
}

body:has(.fl-theme-dark) .e-calendar .e-header,
html.fl-theme-dark .e-calendar .e-header,
body.fl-theme-dark .e-calendar .e-header,
.fl-theme-dark .e-calendar .e-header {
    background-color: var(--fl-bg-surface-2, #142037) !important;
    border-bottom: 1px solid var(--fl-border, #1C2D4A) !important;
    color: var(--fl-text-primary, #E2E8F0) !important;
}

body:has(.fl-theme-dark) .e-calendar .e-header .e-title,
html.fl-theme-dark .e-calendar .e-header .e-title,
body.fl-theme-dark .e-calendar .e-header .e-title,
.fl-theme-dark .e-calendar .e-header .e-title,
body:has(.fl-theme-dark) .e-calendar .e-header .e-prev,
html.fl-theme-dark .e-calendar .e-header .e-prev,
body.fl-theme-dark .e-calendar .e-header .e-prev,
.fl-theme-dark .e-calendar .e-header .e-prev,
body:has(.fl-theme-dark) .e-calendar .e-header .e-next,
html.fl-theme-dark .e-calendar .e-header .e-next,
body.fl-theme-dark .e-calendar .e-header .e-next,
.fl-theme-dark .e-calendar .e-header .e-next {
    color: var(--fl-text-primary, #E2E8F0) !important;
}

body:has(.fl-theme-dark) .e-calendar .e-content th,
html.fl-theme-dark .e-calendar .e-content th,
body.fl-theme-dark .e-calendar .e-content th,
.fl-theme-dark .e-calendar .e-content th {
    color: var(--fl-text-secondary, #94A3B8) !important;
}

body:has(.fl-theme-dark) .e-calendar .e-content td.e-cell,
html.fl-theme-dark .e-calendar .e-content td.e-cell,
body.fl-theme-dark .e-calendar .e-content td.e-cell,
.fl-theme-dark .e-calendar .e-content td.e-cell {
    color: var(--fl-text-primary, #E2E8F0) !important;
}

body:has(.fl-theme-dark) .e-calendar .e-content td.e-cell:hover,
html.fl-theme-dark .e-calendar .e-content td.e-cell:hover,
body.fl-theme-dark .e-calendar .e-content td.e-cell:hover,
.fl-theme-dark .e-calendar .e-content td.e-cell:hover {
    background-color: var(--fl-bg-surface-2, #142037) !important;
    border-radius: 8px !important;
}

body:has(.fl-theme-dark) .e-calendar .e-content td.e-selected span.e-day,
html.fl-theme-dark .e-calendar .e-content td.e-selected span.e-day,
body.fl-theme-dark .e-calendar .e-content td.e-selected span.e-day,
.fl-theme-dark .e-calendar .e-content td.e-selected span.e-day {
    background-color: var(--fl-color-blue, #1565FF) !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
}

/* ── Breadcrumb Navigation ───────────────────────────────────────── */
.breadcrumb-trail {
    margin-bottom: 0.5rem;
}

.breadcrumb-link {
    color: var(--fl-color-blue, #1565FF);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s ease;
}

.breadcrumb-link:hover {
    color: var(--fl-sky, #23A8FF);
    text-decoration: underline;
}

/* ── Detail Inspection Rows ──────────────────────────────────────── */
.fl-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--fl-border-soft, #EEF2F7);
    font-size: 0.9rem;
    font-family: var(--fl-font-ui, 'Inter', sans-serif);
}

.fl-info-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.fl-info-row:first-child {
    padding-top: 0;
}

.fl-info-label {
    color: var(--fl-text-secondary);
    font-weight: 500;
}

.fl-info-val {
    color: var(--fl-text-primary);
    font-weight: 500;
    text-align: right;
}

.fl-code-badge {
    background: var(--fl-bg-surface-2);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    color: var(--fl-color-blue);
    font-size: 0.85rem;
    font-family: 'JetBrains Mono', monospace;
}

/* ── Universal Table Light/Dark Mode Contrast & Theme Safety ── */
.table,
.fl-changes-table {
    --bs-table-bg: transparent !important;
    --bs-table-accent-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
    color: var(--fl-text-primary) !important;
}

.table> :not(caption)>*>*,
.fl-changes-table> :not(caption)>*>* {
    background-color: transparent !important;
    color: var(--fl-text-primary) !important;
    border-bottom-color: var(--fl-border-soft, rgba(255, 255, 255, 0.08)) !important;
}

.fl-theme-light .table thead.table-light,
.fl-theme-light .table tfoot.table-light {
    background-color: var(--fl-bg-surface-2, #F8FAFC) !important;
    color: var(--fl-text-secondary, #475569) !important;
}

.fl-theme-dark .table thead.table-light,
.fl-theme-dark .table tfoot.table-light,
.fl-theme-dark .table thead,
.fl-theme-dark .table tfoot {
    background-color: var(--fl-bg-surface-2, #142037) !important;
    color: var(--fl-text-secondary, #94A3B8) !important;
    border-color: var(--fl-border, #1C2D4A) !important;
}

.fl-theme-dark .table-hover>tbody>tr:hover>* {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

.fl-theme-dark .bg-light {
    background-color: var(--fl-bg-surface-2, #142037) !important;
    color: var(--fl-text-primary, #F8FAFC) !important;
    border-color: var(--fl-border, #1C2D4A) !important;
}

.fl-theme-light .bg-light {
    background-color: var(--fl-bg-surface-2, #F8FAFC) !important;
    color: var(--fl-text-primary, #0F172A) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   GLOBAL SYNCFUSION PAGER COMPACT STYLING (Rows per page | Count | Nav)
   ══════════════════════════════════════════════════════════════════════ */
.e-grid .e-gridpager,
.e-gridpager.e-pager,
.e-fluent2 .e-grid .e-gridpager,
.e-fluent2 .e-pager,
.e-pager {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 1.5rem !important;
    padding: 0.75rem 1.25rem !important;
    border-top: 1px solid var(--fl-border) !important;
    background: transparent !important;
    width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
}

/* 1. Page Size Selector (Rows per page: [10 v]) */
.e-grid .e-gridpager .e-pagesizes,
.e-pager .e-pagesizes,
.e-fluent2 .e-pager .e-pagesizes {
    order: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    flex-direction: row-reverse !important;
}

.e-pager .e-pagesizes .e-pagerdropdown,
.e-fluent2 .e-pager .e-pagesizes .e-pagerdropdown {
    margin: 0 !important;
    width: auto !important;
    min-width: 65px !important;
    float: none !important;
}

.e-pager .e-pagesizes .e-pagerdropdown .e-input-group,
.e-fluent2 .e-pager .e-pagesizes .e-pagerdropdown .e-input-group {
    background: var(--fl-bg-surface-2, #F1F5F9) !important;
    border: 1px solid var(--fl-border) !important;
    border-radius: 6px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 6px !important;
}

.fl-theme-dark .e-pager .e-pagesizes .e-pagerdropdown .e-input-group,
body.fl-theme-dark .e-pager .e-pagesizes .e-pagerdropdown .e-input-group {
    background: #142037 !important;
    border-color: #1C2D4A !important;
}

.e-pager .e-pagesizes .e-pagesize,
.e-fluent2 .e-pager .e-pagesizes .e-pagesize {
    font-family: var(--fl-font-ui, 'Inter', sans-serif) !important;
    font-size: 0 !important;
    color: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    float: none !important;
}

.e-pager .e-pagesizes .e-pagesize::before,
.e-fluent2 .e-pager .e-pagesizes .e-pagesize::before {
    content: "Rows per page:" !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: var(--fl-text-secondary) !important;
    font-family: var(--fl-font-ui, 'Inter', sans-serif) !important;
    white-space: nowrap !important;
}

/* 2. Message Bar (1-10 of 127) */
.e-grid .e-gridpager .e-parentmsgbar,
.e-pager .e-parentmsgbar,
.e-fluent2 .e-pager .e-parentmsgbar {
    order: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.e-pager .e-pagermessage,
.e-fluent2 .e-pager .e-pagermessage {
    font-family: var(--fl-font-ui, 'Inter', sans-serif) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: var(--fl-text-secondary) !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}

/* 3. Navigation Controls (|< < > >|) */
.e-grid .e-gridpager .e-pagercontainer,
.e-pager .e-pagercontainer,
.e-fluent2 .e-pager .e-pagercontainer {
    order: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    float: none !important;
    box-shadow: none !important;
}

/* HIDE NUMERIC CONTAINER (1, 2, 3, 4, 5, ..., current page, next page, prev page indicators) */
.e-gridpager .e-numericcontainer,
.e-pager .e-numericcontainer,
.e-fluent2 .e-pager .e-numericcontainer,
.e-pagercontainer .e-numericcontainer,
.e-numericcontainer,
.e-pager .e-numericitem,
.e-pager .e-currentitem,
.e-pager .e-np,
.e-pager .e-pp {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    font-size: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Navigation Icons First, Prev, Next, Last */
.e-pager .e-pagercontainer a,
.e-pager .e-pagercontainer div.e-first,
.e-pager .e-pagercontainer div.e-prev,
.e-pager .e-pagercontainer div.e-next,
.e-pager .e-pagercontainer div.e-last,
.e-fluent2 .e-pager .e-pagercontainer a,
.e-fluent2 .e-pager .e-pagercontainer div {
    border: none !important;
    background: transparent !important;
    border-radius: 6px !important;
    color: var(--fl-text-secondary) !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
    margin: 0 !important;
    font-size: 13px !important;
    box-shadow: none !important;
    outline: none !important;
}

.e-pager .e-pagercontainer a:hover:not(.e-disable):not(.e-disabled),
.e-pager .e-pagercontainer div:hover:not(.e-disable):not(.e-disabled) {
    background: rgba(21, 101, 255, 0.12) !important;
    color: var(--fl-color-blue, #1565FF) !important;
}

.fl-theme-dark .e-pager .e-pagercontainer a:hover:not(.e-disable):not(.e-disabled),
.fl-theme-dark .e-pager .e-pagercontainer div:hover:not(.e-disable):not(.e-disabled),
body.fl-theme-dark .e-pager .e-pagercontainer a:hover:not(.e-disable):not(.e-disabled),
body.fl-theme-dark .e-pager .e-pagercontainer div:hover:not(.e-disable):not(.e-disabled) {
    background: rgba(96, 165, 250, 0.15) !important;
    color: #60A5FA !important;
}

.e-pager .e-pagercontainer .e-disable,
.e-pager .e-pagercontainer .e-disabled,
.e-pager .e-pagercontainer a.e-disable,
.e-pager .e-pagercontainer a.e-disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* ── Custom Dedicated Pager Layout (.fl-custom-pager) ────────────── */
.e-grid .e-gridpager,
.e-grid .e-pager,
.e-pager {
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

.fl-custom-pager {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 1.5rem !important;
    padding: 0.85rem 1.25rem !important;
    border-top: 1px solid var(--fl-border) !important;
    background: transparent !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.fl-pager-meta-group {
    display: inline-flex;
    align-items: center;
    gap: 1.25rem;
    flex-shrink: 0;
}

.fl-pager-sizer {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.fl-pager-label {
    font-family: var(--fl-font-ui, 'Inter', sans-serif);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--fl-text-secondary);
    white-space: nowrap;
}

.fl-pager-dropdown .e-input-group {
    height: 32px !important;
    min-height: 32px !important;
    width: 78px !important;
    border-radius: 6px !important;
    background: var(--fl-bg-surface-2) !important;
    border: 1px solid var(--fl-border) !important;
}

.fl-pager-dropdown input.e-input,
.fl-pager-dropdown .e-input-group input.e-input,
.fl-pager-dropdown .e-dropdownbase .e-list-item {
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    padding-left: 10px !important;
    padding-right: 4px !important;
    text-overflow: clip !important;
}

.fl-pager-info {
    font-family: var(--fl-font-ui, 'Inter', sans-serif);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--fl-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.fl-pager-nav-wrap {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* ── Grouped Inseparable Navigation Bar ──────────────────────────── */
.fl-pager-nav {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--fl-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--fl-bg-surface);
    white-space: nowrap;
    flex-shrink: 0;
}

.fl-pager-nav-btn {
    width: 32px;
    height: 30px;
    border: none;
    border-right: 1px solid var(--fl-border);
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--fl-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
    outline: none;
}

.fl-pager-nav-btn:last-child {
    border-right: none;
}

.fl-pager-nav-btn svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fl-pager-nav-btn:hover:not(:disabled) {
    background: var(--fl-bg-surface-2);
    color: var(--fl-text-primary);
}

.fl-pager-nav-btn:disabled,
.fl-pager-nav-btn.disabled {
    opacity: 0.25;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Responsive Screen Adjustments (Guaranteed Consistency) ─────── */
@media (max-width: 768px) {
    .fl-custom-pager {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.75rem !important;
        padding: 0.85rem 1rem !important;
        width: 100% !important;
    }

    /* Top Row: Rows per page & counter ALWAYS together on Row 1 */
    .fl-pager-meta-group {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        max-width: 340px !important;
        margin: 0 auto !important;
        gap: 0.75rem !important;
    }

    /* Bottom Row: Control buttons ALWAYS centered alone on Row 2 */
    .fl-pager-nav-wrap {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    /* ── Universal Responsive Page Headers (Title on Top, Buttons Below) ── */
    .fl-header-title-bar,
    .fl-form-page-header .fl-header-title-bar,
    .fl-page-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.85rem !important;
    }

    .fl-header-title-bar .fl-page-title,
    .fl-page-header .fl-page-title {
        width: 100% !important;
        font-size: 1.4rem !important;
        line-height: 1.25 !important;
        margin: 0 !important;
    }

    .fl-header-actions {
        display: flex !important;
        width: 100% !important;
        gap: 0.5rem !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }

    .fl-header-actions .e-btn,
    .fl-header-actions .btn {
        white-space: nowrap !important;
        min-width: fit-content !important;
        flex: 1 1 auto !important;
        height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.45rem 0.85rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   ── SKELETON LOADER & SHIMMER SYSTEM ───────────────────────────────
   ═══════════════════════════════════════════════════════════════════ */

@keyframes fl-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.fl-shimmer {
    background: linear-gradient(90deg,
            #E2E8F0 25%,
            #F8FAFC 50%,
            #E2E8F0 75%) !important;
    background-size: 200% 100% !important;
    animation: fl-shimmer 1.5s infinite ease-in-out !important;
    border-radius: 6px;
    display: inline-block;
}

.fl-theme-dark .fl-shimmer {
    background: linear-gradient(90deg,
            #142037 25%,
            #1E3050 50%,
            #142037 75%) !important;
    background-size: 200% 100% !important;
}

/* ── Full Application Loading Skeleton Layout ─────────────────────── */
.fl-skeleton-app-shell {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: var(--fl-bg-app, #F8FAFC);
}

.fl-skeleton-sidebar {
    width: 260px;
    height: 100vh;
    background: var(--fl-bg-sidebar, #061B55);
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    flex-shrink: 0;
    border-right: 1px solid var(--fl-sidebar-border, rgba(255, 255, 255, 0.08));
}

.fl-sk-logo {
    width: 140px;
    height: 38px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 25%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.08) 75%) !important;
    background-size: 200% 100% !important;
    animation: fl-shimmer 1.5s infinite ease-in-out !important;
}

.fl-skeleton-nav {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 1rem;
}

.fl-skeleton-nav-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
}

.fl-sk-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 25%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.08) 75%) !important;
    background-size: 200% 100% !important;
    animation: fl-shimmer 1.5s infinite ease-in-out !important;
}

.fl-sk-nav-text {
    height: 14px;
    width: 110px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 25%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.08) 75%) !important;
    background-size: 200% 100% !important;
    animation: fl-shimmer 1.5s infinite ease-in-out !important;
}

.fl-skeleton-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.fl-sk-avatar {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 25%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.08) 75%) !important;
    background-size: 200% 100% !important;
    animation: fl-shimmer 1.5s infinite ease-in-out !important;
}

.fl-skeleton-user-meta {
    flex: 1;
}

.fl-skeleton-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100vh;
    overflow-y: auto;
}

.fl-skeleton-topbar {
    height: 72px;
    background: var(--fl-bg-topbar, #FFFFFF);
    border-bottom: 1px solid var(--fl-border, #E2E8F0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.75rem;
    flex-shrink: 0;
}

.fl-sk-btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

.fl-sk-search {
    width: 280px;
    height: 38px;
    border-radius: 8px;
}

.fl-sk-pill {
    width: 90px;
    height: 36px;
    border-radius: 8px;
}

.fl-sk-icon-round {
    width: 36px;
    height: 36px;
    border-radius: 99px;
}

.fl-sk-avatar-sm {
    width: 38px;
    height: 38px;
    border-radius: 99px;
}

.fl-skeleton-page-content {
    padding: 1.75rem;
    flex: 1;
}

.fl-skeleton-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
}

.fl-sk-breadcrumb {
    width: 140px;
    height: 14px;
}

.fl-sk-title {
    width: 220px;
    height: 28px;
    border-radius: 6px;
}

.fl-sk-btn {
    width: 90px;
    height: 38px;
    border-radius: 8px;
}

.fl-sk-btn-primary {
    width: 150px;
    height: 38px;
    border-radius: 8px;
    background: linear-gradient(90deg, #1565FF 25%, #60A5FA 50%, #1565FF 75%) !important;
    background-size: 200% 100% !important;
    animation: fl-shimmer 1.5s infinite ease-in-out !important;
}

.fl-skeleton-card {
    background: var(--fl-bg-surface, #FFFFFF);
    border: 1px solid var(--fl-border, #E2E8F0);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.fl-sk-text {
    height: 14px;
    border-radius: 4px;
}

.fl-sk-kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

.fl-sk-stat {
    width: 65%;
    height: 26px;
    border-radius: 6px;
}

.fl-sk-subtext {
    height: 12px;
    border-radius: 4px;
}

.fl-sk-table-search {
    width: 240px;
    height: 36px;
    border-radius: 8px;
}

.fl-sk-btn-sm {
    width: 80px;
    height: 36px;
    border-radius: 8px;
}

.fl-skeleton-table-header {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--fl-border, #E2E8F0);
}

.fl-sk-th {
    height: 16px;
    border-radius: 4px;
}

.fl-skeleton-table-row {
    display: flex;
    gap: 1rem;
    padding: 0.85rem 0.5rem;
    border-bottom: 1px solid var(--fl-border-soft, #EEF2F7);
    align-items: center;
}

.fl-sk-td {
    height: 14px;
    border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════
   ── MODERN BLAZOR RECONNECT MODAL & DIALOG ─────────────────────────
   ═══════════════════════════════════════════════════════════════════ */

#components-reconnect-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    z-index: 999999 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex !important;
}

.components-reconnect-hide {
    display: none !important;
}

.fl-reconnect-dialog {
    background: var(--fl-bg-surface, #FFFFFF) !important;
    color: var(--fl-text-primary, #0F172A) !important;
    padding: 2.25rem 2.5rem !important;
    border-radius: 20px !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid var(--fl-border, #E2E8F0) !important;
    max-width: 440px !important;
    width: 90% !important;
    text-align: center !important;
    animation: fl-modal-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes fl-modal-pop {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(12px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.components-reconnecting,
.components-reconnect-failed,
.components-reconnect-rejected {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnecting {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

#components-reconnect-modal.components-reconnect-rejected .components-reconnect-rejected {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.fl-reconnect-icon-pulse {
    width: 52px;
    height: 52px;
    border-radius: 99px;
    background: rgba(21, 101, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.fl-reconnect-icon-failed {
    width: 52px;
    height: 52px;
    border-radius: 99px;
    background: rgba(239, 68, 68, 0.12);
    color: #EF4444;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.fl-reconnect-icon-rejected {
    width: 52px;
    height: 52px;
    border-radius: 99px;
    background: rgba(245, 158, 11, 0.12);
    color: #F59E0B;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.fl-reconnect-title {
    font-family: var(--fl-font-display, 'Plus Jakarta Sans', sans-serif);
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.fl-reconnect-desc {
    font-size: 0.9rem;
    color: var(--fl-text-secondary, #64748B);
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.fl-reconnect-bar {
    width: 100%;
    height: 6px;
    border-radius: 99px;
    margin-top: 0.5rem;
}

.fl-reconnect-btn {
    font-weight: 600;
    padding: 0.6rem 1.75rem;
    border-radius: 10px;
    min-width: 150px;
}

/* ── Syncfusion SfDialog Reconnect & Offline Component Styling ─── */
.fl-reconnect-sf-dialog.e-dialog {
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid var(--fl-border, #1C2D4A) !important;
    background-color: var(--fl-bg-surface, #0F1B32) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75) !important;
}

.fl-reconnect-sf-dialog .e-dlg-content {
    background-color: var(--fl-bg-surface, #0F1B32) !important;
    padding: 1.5rem !important;
}

.fl-reconnect-dialog-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}




/* ═════════════════════════════════════════════════════════════════
   UNIVERSAL STICKY SAVE HEADER (FOR ALL ADD & EDIT FORMS)
   ═════════════════════════════════════════════════════════════════ */
.fl-form-page-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: var(--fl-bg-app, #F8FAFC) !important;
    padding: 1rem 0 !important;
    margin-top: 0 !important;
    margin-bottom: 1.25rem !important;
    border-bottom: 1px solid var(--fl-border-soft, #EEF2F7) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

.fl-theme-dark .fl-form-page-header {
    background: var(--fl-bg-app, #080F20) !important;
    border-bottom-color: var(--fl-border, #1C2D4A) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
}

/* ═════════════════════════════════════════════════════════════════
   UNIVERSAL RESPONSIVE DIALOG & MODAL SYSTEM (MOBILE & DESKTOP)
   ═════════════════════════════════════════════════════════════════ */
.e-dialog.e-popup,
.fl-dialog-dark.e-dialog,
.custom-dialog.e-dialog {
    max-width: 94vw !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid var(--fl-border, #E2E8F0) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18) !important;
}

.e-dialog .e-dlg-header-content {
    padding: 1.15rem 1.25rem !important;
    border-bottom: 1px solid var(--fl-border, #E2E8F0) !important;
}

.fl-dialog-header {
    display: flex;
    align-items: center;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fl-text-primary, #0F172A);
}

.e-dialog .e-dlg-content {
    padding: 1.25rem !important;
}

.fl-dialog-body p {
    margin-bottom: 0.5rem;
    color: var(--fl-text-primary, #0F172A);
    font-size: 0.95rem;
}

.fl-dialog-body .fl-dialog-subtext {
    font-size: 0.85rem;
    color: var(--fl-text-secondary, #64748B);
    margin-bottom: 0;
}

.e-dialog .e-footer-content {
    padding: 0.85rem 1.25rem !important;
    border-top: 1px solid var(--fl-border, #E2E8F0) !important;
    background: var(--fl-bg-surface-2, #F8FAFC) !important;
    display: block !important;
}

.fl-dialog-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.75rem !important;
    width: 100% !important;
}

.fl-dialog-footer .e-btn {
    height: 38px !important;
    padding: 0 1.25rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

@media (max-width: 768px) {

    .e-dialog.e-popup,
    .fl-dialog-dark.e-dialog,
    .custom-dialog.e-dialog {
        width: 90vw !important;
        max-width: 400px !important;
        margin: 0 auto !important;
        border-radius: 14px !important;
    }

    .e-dialog .e-dlg-header-content {
        padding: 1rem 1.15rem !important;
    }

    .e-dialog .e-dlg-content {
        padding: 1.15rem !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
    }

    .e-dialog .e-footer-content {
        padding: 0.75rem 1rem !important;
    }

    .fl-dialog-footer {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: stretch !important;
        gap: 0.65rem !important;
        width: 100% !important;
    }

    .fl-dialog-footer .e-btn {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        height: 42px !important;
        margin: 0 !important;
        font-size: 0.9rem !important;
    }
}

/* ═════════════════════════════════════════════════════════════════
   OVERALL MOBILE RESPONSIVE SYSTEM (BREAKPOINT STRUCTURE)
   ═════════════════════════════════════════════════════════════════ */

/* ─── Tablet / Small Laptop: 769px to 1024px ───────────────────── */
@media (max-width: 1024px) {
    .fl-sticky-sidebar {
        position: static !important;
        margin-top: 1.25rem;
    }

    .fl-stats-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ─── Mobile Landscape & Portrait: <= 768px ─────────────────────── */
@media (max-width: 768px) {

    /* Form & List Containers */
    .fl-form-page-container,
    .fl-quotation-form-container,
    .fl-customer-detail-container,
    .fl-customer-page-container,
    .fl-products-container,
    .fl-customers-container,
    .fl-quotations-container,
    .fl-users-container,
    .fl-roles-container,
    .fl-audit-container,
    .fl-profile-page-container {
        padding: 0.85rem 0.65rem 5.5rem 0.65rem !important;
    }

    /* Page Header & Actions */
    .fl-page-header,
    .fl-header-title-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.85rem !important;
    }

    .fl-header-actions,
    .fl-action-btn-row {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .fl-header-actions .e-btn,
    .fl-action-btn-row .e-btn,
    .fl-save-btn,
    .fl-cancel-btn {
        flex: 1 1 calc(50% - 0.25rem) !important;
        min-width: 120px !important;
        height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
    }

    /* Toolbar Filter Cards */
    .fl-toolbar-card {
        padding: 0.85rem !important;
    }

    .fl-toolbar-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }

    .fl-search-wrap,
    .fl-filter-wrap,
    .fl-refresh-btn-wrap {
        width: 100% !important;
        min-width: 100% !important;
        flex: 1 1 100% !important;
    }

    .fl-refresh-btn-wrap .e-btn,
    .fl-refresh-btn {
        width: 100% !important;
        height: 40px !important;
        justify-content: center !important;
    }

    /* Touch Controls */
    .e-control-wrapper.e-ddl,
    .e-control-wrapper.e-combobox,
    .e-control-wrapper.e-autocomplete,
    .e-control-wrapper.e-datepicker,
    .e-control-wrapper.e-daterangepicker,
    .e-control-wrapper.e-numerictextbox,
    .e-control-wrapper.e-textbox {
        min-height: 42px !important;
    }

    /* Cards & Layout */
    .fl-card {
        margin-bottom: 1rem !important;
        border-radius: 12px !important;
    }

    .fl-card-header {
        padding: 0.85rem 1rem !important;
    }

    .fl-card-body {
        padding: 0.85rem 1rem !important;
    }

    /* Info rows inside view pages */
    .fl-info-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.25rem !important;
    }

    .fl-info-val {
        text-align: left !important;
        max-width: 100% !important;
    }

    /* Grid Touch-Scroll */
    /*.fl-grid-card {
        padding: 0.5rem !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .fl-themed-grid,
    .e-grid {
        min-width: 650px !important;
    }*/

    /* Pager Responsive */
    /*.e-gridpager,
    .e-pager {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 0.75rem 0.5rem !important;
    }*/

    /* Stats Row Responsive */
    .fl-stats-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
}

/* ─── Small Mobile: <= 576px & <= 480px ─────────────────────────── */
@media (max-width: 576px) {
    .fl-stats-row {
        grid-template-columns: 1fr !important;
    }

    .fl-header-actions .e-btn,
    .fl-action-btn-row .e-btn,
    .fl-save-btn,
    .fl-cancel-btn {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    .fl-card-footer {
        flex-direction: column-reverse !important;
    }

    .fl-card-footer .e-btn {
        width: 100% !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   FLBILL TOAST NOTIFICATION STYLING (SYNCFUSION SFTOAST)
   ═══════════════════════════════════════════════════════════════════ */
/*.e-toast-container {
    z-index: 1000005 !important;
    padding: 16px !important;
}*/

.e-toast-container .e-toast {
    border-radius: 12px !important;
    border: 1px solid var(--fl-border, #E2E8F0) !important;
    background: var(--fl-bg-surface, #FFFFFF) !important;
    box-shadow: 0 12px 36px -4px rgba(0, 0, 0, 0.25), 0 4px 14px rgba(0, 0, 0, 0.12) !important;
    padding: 14px 16px !important;
    min-width: 320px !important;
    max-width: 440px !important;
    font-family: var(--fl-font-ui, 'Inter', sans-serif) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    backdrop-filter: blur(8px) !important;
}

.fl-theme-dark .e-toast-container .e-toast {
    background: rgba(15, 27, 50, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 16px 40px -4px rgba(0, 0, 0, 0.6), 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}

.e-toast-container .e-toast .e-toast-message {
    padding-left: 8px !important;
}

.e-toast-container .e-toast .e-toast-title {
    font-family: var(--fl-font-display, 'Plus Jakarta Sans', sans-serif) !important;
    font-weight: 700 !important;
    font-size: 0.925rem !important;
    letter-spacing: -0.01em !important;
    color: var(--fl-text-primary, #0F172A) !important;
    margin-bottom: 3px !important;
}

.fl-theme-dark .e-toast-container .e-toast .e-toast-title {
    color: #F8FAFC !important;
}

.e-toast-container .e-toast .e-toast-content {
    font-size: 0.85rem !important;
    color: var(--fl-text-secondary, #475569) !important;
    line-height: 1.45 !important;
}

.fl-theme-dark .e-toast-container .e-toast .e-toast-content {
    color: #CBD5E1 !important;
}

.e-toast-container .e-toast .e-toast-close-icon {
    opacity: 0.6 !important;
    transition: opacity 0.15s ease !important;
    font-size: 14px !important;
}

.e-toast-container .e-toast .e-toast-close-icon:hover {
    opacity: 1 !important;
}

/* Success Toast */
.e-toast-container .e-toast.e-toast-success,
.e-toast-container .e-toast.fl-toast-success {
    border-left: 5px solid var(--fl-color-green, #16A34A) !important;
}

.e-toast-container .e-toast.e-toast-success .e-toast-icon,
.e-toast-container .e-toast.fl-toast-success .e-toast-icon {
    color: var(--fl-color-green, #16A34A) !important;
    font-size: 18px !important;
}

.e-toast-container .e-toast.e-toast-success .e-toast-progress,
.e-toast-container .e-toast.fl-toast-success .e-toast-progress {
    background-color: var(--fl-color-green, #16A34A) !important;
    height: 3px !important;
}

/* Danger / Error Toast */
.e-toast-container .e-toast.e-toast-danger,
.e-toast-container .e-toast.fl-toast-danger {
    border-left: 5px solid var(--fl-color-red, #DC2626) !important;
}

.e-toast-container .e-toast.e-toast-danger .e-toast-icon,
.e-toast-container .e-toast.fl-toast-danger .e-toast-icon {
    color: var(--fl-color-red, #DC2626) !important;
    font-size: 18px !important;
}

.e-toast-container .e-toast.e-toast-danger .e-toast-progress,
.e-toast-container .e-toast.fl-toast-danger .e-toast-progress {
    background-color: var(--fl-color-red, #DC2626) !important;
    height: 3px !important;
}

/* Warning Toast */
.e-toast-container .e-toast.e-toast-warning,
.e-toast-container .e-toast.fl-toast-warning {
    border-left: 5px solid var(--fl-color-amber, #D97706) !important;
}

.e-toast-container .e-toast.e-toast-warning .e-toast-icon,
.e-toast-container .e-toast.fl-toast-warning .e-toast-icon {
    color: var(--fl-color-amber, #D97706) !important;
    font-size: 18px !important;
}

.e-toast-container .e-toast.e-toast-warning .e-toast-progress,
.e-toast-container .e-toast.fl-toast-warning .e-toast-progress {
    background-color: var(--fl-color-amber, #D97706) !important;
    height: 3px !important;
}

/* Info Toast */
.e-toast-container .e-toast.e-toast-info,
.e-toast-container .e-toast.fl-toast-info {
    border-left: 5px solid var(--fl-royal, #1565FF) !important;
}

.e-toast-container .e-toast.e-toast-info .e-toast-icon,
.e-toast-container .e-toast.fl-toast-info .e-toast-icon {
    color: var(--fl-royal, #1565FF) !important;
    font-size: 18px !important;
}

.e-toast-container .e-toast.e-toast-info .e-toast-progress,
.e-toast-container .e-toast.fl-toast-info .e-toast-progress {
    background-color: var(--fl-royal, #1565FF) !important;
    height: 3px !important;
}

/* ═════════════════════════════════════════════════════════════════
   UNIVERSAL FORM VALIDATION ERROR MESSAGE STYLING (VIVID RED)
   ═════════════════════════════════════════════════════════════════ */
.validation-message,
.fl-validation-error,
div.validation-message,
div.fl-validation-error,
span.validation-message,
span.fl-validation-error,
.fl-field-error,
label.e-error,
span.e-error,
div.e-error {
    color: #DC2626 !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    margin-top: 0.35rem !important;
    display: block !important;
    line-height: 1.3 !important;
}

.fl-theme-dark .validation-message,
.fl-theme-dark .fl-validation-error,
.fl-theme-dark div.validation-message,
.fl-theme-dark div.fl-validation-error,
.fl-theme-dark span.validation-message,
.fl-theme-dark span.fl-validation-error,
.fl-theme-dark .fl-field-error,
.fl-theme-dark label.e-error,
.fl-theme-dark span.e-error,
.fl-theme-dark div.e-error {
    color: #F87171 !important;
}

/* Input Text & Border Validation Styling */
.e-input-group input.e-input,
.e-input-group textarea.e-input,
.e-control-wrapper input.e-input,
.e-input-group.e-error input.e-input,
.e-control-wrapper.e-error input.e-input {
    color: var(--fl-text-primary, #0F172A) !important;
}

.fl-theme-dark .e-input-group input.e-input,
.fl-theme-dark .e-input-group textarea.e-input,
.fl-theme-dark .e-control-wrapper input.e-input,
.fl-theme-dark .e-input-group.e-error input.e-input,
.fl-theme-dark .e-control-wrapper.e-error input.e-input {
    color: var(--fl-text-primary, #F1F5F9) !important;
}

.e-input-group.e-error,
.e-control-wrapper.e-error,
.e-input-group.invalid,
.e-control-wrapper.invalid {
    border-color: #DC2626 !important;
}

.e-control-wrapper.e-ddl,
.e-control-wrapper.e-ddl.e-error,
.e-control-wrapper.e-ddl.invalid,
.e-ddl.e-input-group,
.e-ddl.e-input-group.e-error,
.e-ddl.e-input-group.invalid {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    box-sizing: border-box !important;
}

.required-field::after,
.fl-required::after {
    content: " *" !important;
    color: #DC2626 !important;
    font-weight: 700 !important;
}

/* ═════════════════════════════════════════════════════════════════
   TOPBAR & PROFILE DROPDOWN FOREGROUND STACKING FIX
   ═════════════════════════════════════════════════════════════════ */
.fl-topbar {
    position: relative !important;
    z-index: 1000 !important;
}

.fl-user-menu {
    position: relative !important;
    z-index: 1050 !important;
}

.fl-dropdown {
    position: absolute !important;
    z-index: 1100 !important;
}

/* ═════════════════════════════════════════════════════════════════
   SYNCFUSION TOOLTIP (SFTOOLTIP) HIGH-CONTRAST THEME STYLES
   ═════════════════════════════════════════════════════════════════ */
.e-tooltip-wrap {
    border-radius: 6px !important;
    font-family: var(--fl-font-ui, 'Inter', sans-serif) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

/* Default / Light Mode Tooltips */
.e-tooltip-wrap,
.fl-theme-light .e-tooltip-wrap,
body:not(.fl-theme-dark) .e-tooltip-wrap {
    background-color: #0F172A !important;
    border: 1px solid #1E293B !important;
    color: #FFFFFF !important;
}

.e-tooltip-wrap .e-tip-content,
.fl-theme-light .e-tooltip-wrap .e-tip-content,
body:not(.fl-theme-dark) .e-tooltip-wrap .e-tip-content {
    color: #FFFFFF !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 5px 10px !important;
}

.e-tooltip-wrap .e-arrow-tip-inner,
.e-tooltip-wrap .e-arrow-tip-outer {
    color: #0F172A !important;
}

/* Dark Mode Tooltips (Bright White / Crisp Text against slate dark surface) */
.fl-theme-dark .e-tooltip-wrap,
body.fl-theme-dark .e-tooltip-wrap,
html.fl-theme-dark .e-tooltip-wrap,
body:has(.fl-theme-dark) .e-tooltip-wrap {
    background-color: #1E293B !important;
    border: 1px solid #334155 !important;
    color: #F8FAFC !important;
}

.fl-theme-dark .e-tooltip-wrap .e-tip-content,
body.fl-theme-dark .e-tooltip-wrap .e-tip-content,
html.fl-theme-dark .e-tooltip-wrap .e-tip-content,
body:has(.fl-theme-dark) .e-tooltip-wrap .e-tip-content {
    color: #FFFFFF !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 5px 10px !important;
}

.fl-theme-dark .e-tooltip-wrap .e-arrow-tip-inner,
.fl-theme-dark .e-tooltip-wrap .e-arrow-tip-outer,
body.fl-theme-dark .e-tooltip-wrap .e-arrow-tip-inner,
body.fl-theme-dark .e-tooltip-wrap .e-arrow-tip-outer,
html.fl-theme-dark .e-tooltip-wrap .e-arrow-tip-inner,
html.fl-theme-dark .e-tooltip-wrap .e-arrow-tip-outer {
    color: #1E293B !important;
}