/* /Components/Common/FLPageSkeleton.razor.rz.scp.css */
.fl-page-skeleton[b-zw37hu88p6] {
    width: 100%;
    animation: fl-skeleton-fade-in-b-zw37hu88p6 0.2s ease-out;
}

@keyframes fl-skeleton-fade-in-b-zw37hu88p6 {
    from {
        opacity: 0;
        transform: translateY(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fl-sk-icon-box[b-zw37hu88p6] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
}

.fl-skeleton-card[b-zw37hu88p6] {
    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);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

[b-zw37hu88p6] .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;
}

:global(.fl-theme-dark) .fl-skeleton-card[b-zw37hu88p6] {
    background: var(--fl-bg-surface, #0B1739);
    border-color: var(--fl-border, rgba(255, 255, 255, 0.08));
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

:global(.fl-theme-dark)[b-zw37hu88p6]  .fl-shimmer {
    background: linear-gradient(90deg, #142037 25%, #1E3050 50%, #142037 75%) !important;
    background-size: 200% 100% !important;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ─── Light / Dark Tokens ───────────────────────────────────── */
:root[b-ksinmr3dgi],
.fl-theme-light[b-ksinmr3dgi] {
    --fl-navy: #061B55;
    --fl-royal: #1565FF;
    --fl-sky: #23A8FF;
    --fl-teal: #16D3D1;
    --fl-slate: #6B7A99;
    --fl-border: #E2E8F0;
    --fl-border-soft: #EEF2F7;
    --fl-success: #1FB874;
    --fl-success-bg: #EAFAF4;
    --fl-warning: #F5A524;
    --fl-warning-bg: #FEF6E8;
    --fl-danger: #E65353;
    --fl-danger-bg: #FDEAEA;
    --fl-info: #23A8FF;
    --fl-info-bg: #E8F4FF;
    --fl-bg-app: #F8FAFC;
    --fl-bg-sidebar: #061B55;
    --fl-bg-surface: #FFFFFF;
    --fl-bg-surface-2: #F1F5F9;
    --fl-bg-topbar: #FFFFFF;
    --fl-sidebar-text: rgba(255, 255, 255, 0.75);
    --fl-sidebar-text-active: #FFFFFF;
    --fl-sidebar-label: rgba(255, 255, 255, 0.35);
    --fl-sidebar-border: rgba(255, 255, 255, 0.08);
    --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-shadow-sm: 0 1px 3px rgba(6, 27, 85, 0.06), 0 1px 2px rgba(6, 27, 85, 0.04);
    --fl-shadow-md: 0 4px 12px rgba(6, 27, 85, 0.08), 0 2px 4px rgba(6, 27, 85, 0.04);
    --fl-shadow-lg: 0 12px 32px rgba(6, 27, 85, 0.12), 0 4px 8px rgba(6, 27, 85, 0.06);
    --fl-radius-sm: 6px;
    --fl-radius-md: 8px;
    --fl-radius-lg: 12px;
    --fl-radius-full: 9999px;
    --fl-topbar-h: 72px;
}

.fl-theme-dark[b-ksinmr3dgi] {
    --fl-topbar-h: 72px;
    --fl-bg-app: #080F20;
    --fl-bg-sidebar: #01071A;
    --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-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --fl-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --fl-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* ─── Global Scrollbar Styling (Light & Dark Theme) ─────────── */

/* Light Theme Scrollbars */
.fl-theme-light[b-ksinmr3dgi],
.fl-theme-light *[b-ksinmr3dgi] {
    scrollbar-width: thin;
    scrollbar-color: #CBD5E1 #F8FAFC;
}

.fl-theme-light *[b-ksinmr3dgi]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.fl-theme-light *[b-ksinmr3dgi]::-webkit-scrollbar-track {
    background: var(--fl-bg-app);
    border-radius: 4px;
}

.fl-theme-light *[b-ksinmr3dgi]::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
    border: 2px solid var(--fl-bg-app);
    box-sizing: border-box;
}

.fl-theme-light *[b-ksinmr3dgi]::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* Dark Theme Scrollbars */
.fl-theme-dark[b-ksinmr3dgi],
.fl-theme-dark *[b-ksinmr3dgi] {
    scrollbar-width: thin;
    scrollbar-color: #334155 #080F20;
}

.fl-theme-dark *[b-ksinmr3dgi]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.fl-theme-dark *[b-ksinmr3dgi]::-webkit-scrollbar-track {
    background: var(--fl-bg-app);
    border-radius: 4px;
}

.fl-theme-dark *[b-ksinmr3dgi]::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
    border: 2px solid var(--fl-bg-app);
    box-sizing: border-box;
}

.fl-theme-dark *[b-ksinmr3dgi]::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* ─── Specific Scrollbar Areas (Enhanced Styling) ──────────── */

/* Sidebar Navigation Scrollbar */
[b-ksinmr3dgi] .fl-nav {
    scrollbar-width: thin;
}

[b-ksinmr3dgi] .fl-nav::-webkit-scrollbar {
    width: 6px;
}

[b-ksinmr3dgi] .fl-nav::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

[b-ksinmr3dgi] .fl-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 3px;
}

[b-ksinmr3dgi] .fl-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* Page Content Scrollbar */
.fl-page-content[b-ksinmr3dgi] {
    scrollbar-width: thin;
}

.fl-page-content[b-ksinmr3dgi]::-webkit-scrollbar {
    width: 8px;
}

.fl-page-content[b-ksinmr3dgi]::-webkit-scrollbar-track {
    background: transparent;
}

.fl-page-content[b-ksinmr3dgi]::-webkit-scrollbar-thumb {
    background: var(--fl-border);
    border-radius: 4px;
    border: 2px solid var(--fl-bg-app);
    box-sizing: border-box;
}

.fl-page-content[b-ksinmr3dgi]::-webkit-scrollbar-thumb:hover {
    background: var(--fl-slate);
}

/* Modal/Dialog Scrollbar */
[b-ksinmr3dgi] .e-dialog,
[b-ksinmr3dgi] .fl-modal {
    scrollbar-width: thin;
    scrollbar-color: var(--fl-border) transparent;
}

[b-ksinmr3dgi] .e-dialog::-webkit-scrollbar,
[b-ksinmr3dgi] .fl-modal::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

[b-ksinmr3dgi] .e-dialog::-webkit-scrollbar-thumb,
[b-ksinmr3dgi] .fl-modal::-webkit-scrollbar-thumb {
    background: var(--fl-border);
    border-radius: 3px;
}

[b-ksinmr3dgi] .e-dialog::-webkit-scrollbar-thumb:hover,
[b-ksinmr3dgi] .fl-modal::-webkit-scrollbar-thumb:hover {
    background: var(--fl-slate);
}


html[b-ksinmr3dgi],
body[b-ksinmr3dgi] {
    height: 100vh !important;
    width: 100vw !important;
    margin: 0;
    padding: 0;
    font-family: var(--fl-font-ui);
    background-color: var(--fl-bg-app) !important;
    color: var(--fl-text-primary);
    overflow: hidden !important;
}

/* ─── Layout Shell ───────────────────────────────────────────── */
.fl-shell[b-ksinmr3dgi] {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden !important;
    position: relative;
    background: var(--fl-bg-app);
}

/* ─── Sidebar ────────────────────────────────────────────────── */
.fl-sidebar[b-ksinmr3dgi] {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    height: 100dvh;
    max-height: 100%;
    max-height: 100dvh;
    background-color: var(--fl-bg-sidebar);
    border-right: 1px solid var(--fl-sidebar-border);
    box-shadow: 2px 0 16px rgba(6, 27, 85, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    z-index: 100;
    color: #ffffff;
    transition: width 240ms cubic-bezier(0.4, 0, 0.2, 1), transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

[b-ksinmr3dgi] .e-sidebar.fl-sf-sidebar::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

/* ─── Brand Box ──────────────────────────────────────────────── */
.fl-brand[b-ksinmr3dgi],
.fl-brand--docked[b-ksinmr3dgi],
[b-ksinmr3dgi] .fl-brand,
[b-ksinmr3dgi] .fl-brand--docked {
    display: flex;
    align-items: center;
    justify-content: center !important;
    height: var(--fl-topbar-h) !important;
    padding: 0 10px;
    border-bottom: 1px solid var(--fl-border-soft);
    border-right: none !important;
    margin-right: -1px !important;
    position: relative !important;
    z-index: 2 !important;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--fl-bg-topbar) !important;
    box-sizing: border-box !important;
}

.fl-brand--docked[b-ksinmr3dgi],
[b-ksinmr3dgi] .fl-brand--docked {
    padding: 0;
}

.fl-theme-dark .fl-brand[b-ksinmr3dgi],
.fl-theme-dark .fl-brand--docked[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-brand,
.fl-theme-dark[b-ksinmr3dgi]  .fl-brand--docked {
    background: var(--fl-bg-sidebar) !important;
    border-bottom: 1px solid var(--fl-border) !important;
    border-right: none !important;
    margin-right: -1px !important;
}

/* =============================================================
   BRAND LOGO STYLING — Separate Rules for Light vs Dark Theme
   ============================================================= */

/* ─── WHITE / LIGHT THEME LOGO CSS ───────────────────────────── */
.fl-theme-light .fl-brand__wordmark[b-ksinmr3dgi],
.fl-theme-light[b-ksinmr3dgi]  .fl-brand__wordmark,
.fl-brand__wordmark[b-ksinmr3dgi],
[b-ksinmr3dgi] .fl-brand__wordmark {
    height: 100px;
    width: auto;
    max-width: 185px;
    object-fit: contain;
    display: block;
    margin: 0 auto !important;
    filter: none !important;
    opacity: 1 !important;
}

.fl-theme-light .fl-brand__icon-docked[b-ksinmr3dgi],
.fl-theme-light[b-ksinmr3dgi]  .fl-brand__icon-docked,
.fl-brand__icon-docked[b-ksinmr3dgi],
[b-ksinmr3dgi] .fl-brand__icon-docked {
    height: 44px;
    width: 65px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    filter: none !important;
    opacity: 1 !important;
}

/* ─── DARK THEME LOGO CSS ────────────────────────────────────── */
.fl-theme-dark .fl-brand__wordmark[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-brand__wordmark {
    height: 110px;
    width: auto;
    max-width: 185px;
    object-fit: contain;
    display: block;
    margin: 0 auto !important;
    filter: none !important;
    opacity: 1 !important;
}

.fl-theme-dark .fl-brand__icon-docked[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-brand__icon-docked {
    height: 44px;
    width: 65px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    filter: none !important;
    opacity: 1 !important;
}

[b-ksinmr3dgi] .fl-brand__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.15;
}

[b-ksinmr3dgi] .fl-brand__title {
    font-family: var(--fl-font-display);
    font-size: 20px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.3px;
}

[b-ksinmr3dgi] .fl-brand__accent {
    color: var(--fl-teal);
}

[b-ksinmr3dgi] .fl-brand__tagline {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
    letter-spacing: 0.01em;
    margin-top: 1px;
}

/* ─── NavMenu Styles ─────────────────────────────────────────── */
[b-ksinmr3dgi] .fl-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 8px 10px 10px !important;
    background: var(--fl-bg-sidebar) !important;
    height: calc(100% - var(--fl-topbar-h)) !important;
    box-sizing: border-box !important;
}

[b-ksinmr3dgi] .fl-nav__scroll-body {
    flex: 1 1 auto !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;
}

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

[b-ksinmr3dgi] .fl-nav__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

[b-ksinmr3dgi] .fl-nav__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    margin: 2px 0;
    color: rgba(255, 255, 255, 0.75) !important;
    text-decoration: none !important;
    font-size: 13.5px;
    font-weight: 500;
    font-family: var(--fl-font-ui);
    border-radius: var(--fl-radius-md) !important;
    position: relative;
    white-space: nowrap;
    transition: background 180ms ease, color 180ms ease;
    cursor: pointer;
}

[b-ksinmr3dgi] .fl-nav__item:hover {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.08) !important;
    text-decoration: none !important;
    border-radius: var(--fl-radius-md) !important;
}

/* Active Nav Item: Solid Royal Blue Rounded Pill */
[b-ksinmr3dgi] .fl-nav__item.active {
    color: #FFFFFF !important;
    background: var(--fl-royal) !important;
    font-weight: 600;
    border-radius: var(--fl-radius-md) !important;
    box-shadow: 0 4px 12px rgba(21, 101, 255, 0.35) !important;
}

[b-ksinmr3dgi] .fl-nav__icon {
    font-size: 16px;
    width: 20px;
    min-width: 20px;
    text-align: center;
    line-height: 1;
    color: inherit;
}

[b-ksinmr3dgi] .fl-nav__label {
    font-size: 13.5px;
    white-space: nowrap;
    flex: 1;
}

[b-ksinmr3dgi] .fl-nav__arrow {
    font-size: 14px;
    opacity: 0.45;
    margin-left: auto;
    font-weight: 400;
}

/* Shortcuts Section */
[b-ksinmr3dgi] .fl-nav__shortcuts {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--fl-sidebar-border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

[b-ksinmr3dgi] .fl-nav__shortcuts-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.40);
    padding: 0 8px 4px;
    text-transform: uppercase;
}

[b-ksinmr3dgi] .fl-nav__shortcut-item {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.70);
    text-decoration: none;
    padding: 6px 8px;
    border-radius: var(--fl-radius-sm);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 180ms ease, background 180ms ease;
}

[b-ksinmr3dgi] .fl-nav__shortcut-item:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.08);
}

[b-ksinmr3dgi] .fl-shortcut-plus {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    width: 14px;
    display: inline-block;
    text-align: center;
}

[b-ksinmr3dgi] .fl-shortcut-label {
    font-size: 13px;
    font-weight: 500;
}

/* User Profile Footer */
[b-ksinmr3dgi] .fl-nav__profile-container {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding-top: 8px !important;
    border-top: 1px solid var(--fl-sidebar-border) !important;
    background: var(--fl-bg-sidebar) !important;
    z-index: 10 !important;
}

[b-ksinmr3dgi] .fl-nav-profile-sf-btn,
[b-ksinmr3dgi] .e-btn.fl-nav-profile-sf-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 8px 10px !important;
    background: transparent !important;
    border: none !important;
    color: #FFFFFF !important;
    border-radius: var(--fl-radius-md) !important;
    box-shadow: none !important;
    text-transform: none !important;
    text-align: left !important;
    cursor: pointer !important;
}

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

[b-ksinmr3dgi] .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;
}

[b-ksinmr3dgi] .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;
}

[b-ksinmr3dgi] .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;
}

/* Docked / collapsed mode sidebar */
[b-ksinmr3dgi] .fl-sidebar--collapsed .fl-nav {
    padding: 8px 6px !important;
}

[b-ksinmr3dgi] .fl-sidebar--collapsed .fl-nav__item {
    justify-content: center !important;
    padding: 10px 0 !important;
}

[b-ksinmr3dgi] .fl-sidebar--collapsed .fl-nav__profile-container {
    padding: 8px 0 !important;
}

[b-ksinmr3dgi] .fl-sidebar--collapsed .fl-nav-profile-sf-btn {
    justify-content: center !important;
    padding: 6px 0 !important;
}

/* ─── Main Content Wrapper ───────────────────────────────────── */
.fl-main-wrapper[b-ksinmr3dgi] {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    min-width: 0;
    background: var(--fl-bg-app);
    box-sizing: border-box;
    transition: margin-left 280ms cubic-bezier(0.4, 0, 0.2, 1), width 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

/* ─── Topbar ─────────────────────────────────────────────────── */
.fl-topbar[b-ksinmr3dgi] {
    height: var(--fl-topbar-h, 72px) !important;
    background: var(--fl-bg-topbar) !important;
    border-bottom: 1px solid var(--fl-border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 24px;
    flex-shrink: 0;
    position: relative !important;
    z-index: 1000 !important;
    box-shadow: var(--fl-shadow-sm);
    box-sizing: border-box !important;
    transition: background 280ms ease, border-color 280ms ease;
}

.fl-theme-dark .fl-topbar[b-ksinmr3dgi] {
    background: var(--fl-bg-topbar) !important;
    border-bottom: 1px solid var(--fl-border) !important;
}

.fl-topbar__left[b-ksinmr3dgi] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fl-topbar__toggle[b-ksinmr3dgi] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 36px;
    height: 36px;
    padding: 8px;
    background: none;
    border: none;
    border-radius: var(--fl-radius-sm);
    cursor: pointer;
}

.fl-topbar__toggle:hover[b-ksinmr3dgi] {
    background: var(--fl-bg-surface-2);
}

.fl-hamburger-bar[b-ksinmr3dgi] {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--fl-text-secondary);
    border-radius: 2px;
}

.fl-topbar__search[b-ksinmr3dgi] {
    width: 360px;
    max-width: 440px;
    margin: 0;
}

.fl-search-wrap[b-ksinmr3dgi] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--fl-bg-surface-2, #F8FAFC);
    border: 1px solid var(--fl-border, #E2E8F0);
    border-radius: 10px;
    padding: 0 14px;
    height: 42px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.fl-search-wrap:focus-within[b-ksinmr3dgi] {
    border-color: var(--fl-royal, #1565FF);
    box-shadow: 0 0 0 3px rgba(21, 101, 255, 0.12);
    background: var(--fl-bg-surface, #FFFFFF);
}

.fl-search-icon[b-ksinmr3dgi] {
    font-size: 15px;
    color: var(--fl-slate, #64748B);
    flex-shrink: 0;
}

.fl-search-input[b-ksinmr3dgi] {
    flex: 1;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-family: var(--fl-font-ui) !important;
    font-size: 13.5px !important;
    color: var(--fl-text-primary) !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    box-shadow: none !important;
}

.fl-search-input[b-ksinmr3dgi]::placeholder {
    color: var(--fl-text-muted, #94A3B8);
    font-size: 13.5px;
}

.fl-search-kbd[b-ksinmr3dgi] {
    font-size: 11px;
    font-weight: 600;
    color: var(--fl-text-secondary, #475569);
    background: var(--fl-bg-surface, #FFFFFF);
    border: 1px solid var(--fl-border, #E2E8F0);
    border-radius: 6px;
    padding: 2px 7px;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03);
}

.fl-theme-dark .fl-search-wrap[b-ksinmr3dgi] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
}

.fl-theme-dark .fl-search-wrap:focus-within[b-ksinmr3dgi] {
    background: rgba(255, 255, 255, 0.07);
    border-color: #1565FF;
}

.fl-theme-dark .fl-search-kbd[b-ksinmr3dgi] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--fl-text-secondary);
}

.fl-topbar__right[b-ksinmr3dgi] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ─── Syncfusion Button & Dropdown Overrides ────────────────── */
[b-ksinmr3dgi] .fl-topbar__toggle.e-btn,
[b-ksinmr3dgi] button.fl-topbar__toggle {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    color: var(--fl-text-primary, #0F172A) !important;
    border-radius: var(--fl-radius-md) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[b-ksinmr3dgi] .fl-topbar__toggle.e-btn .e-btn-icon,
[b-ksinmr3dgi] .fl-topbar__toggle.e-btn .e-icons,
[b-ksinmr3dgi] .fl-topbar__toggle.e-btn .fl-topbar-icon,
[b-ksinmr3dgi] button.fl-topbar__toggle .e-icons {
    font-size: 22px !important;
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
    color: var(--fl-text-primary, #0F172A) !important;
}

[b-ksinmr3dgi] .fl-topbar__toggle.e-btn:hover {
    background-color: var(--fl-bg-surface-2) !important;
    color: var(--fl-text-primary) !important;
}

[b-ksinmr3dgi] .fl-btn-new-sf.e-dropdown-btn {
    background: linear-gradient(135deg, #1565FF 0%, #0052EA 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: var(--fl-radius-md) !important;
    padding: 6px 14px !important;
    font-family: var(--fl-font-ui) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(21, 101, 255, 0.35) !important;
    transition: transform 180ms ease, box-shadow 180ms ease !important;
}

[b-ksinmr3dgi] .fl-btn-new-sf.e-dropdown-btn:hover {
    background: linear-gradient(135deg, #1D6CFF 0%, #0045C7 100%) !important;
    box-shadow: 0 6px 18px rgba(21, 101, 255, 0.45) !important;
    transform: translateY(-1px);
}

.fl-icon-btn-wrap[b-ksinmr3dgi] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fl-badge[b-ksinmr3dgi],
[b-ksinmr3dgi] .fl-badge {
    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 var(--fl-bg-surface, #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-badge--danger[b-ksinmr3dgi],
[b-ksinmr3dgi] .fl-badge--danger {
    background-color: #F43F5E !important;
}

[b-ksinmr3dgi] .fl-topbar__icon-btn-sf.e-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 15px !important;
    color: var(--fl-text-primary) !important;
    background-color: var(--fl-bg-surface-2) !important;
    border: 1px solid var(--fl-border) !important;
    border-radius: var(--fl-radius-full) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease !important;
}

[b-ksinmr3dgi] .fl-topbar__icon-btn-sf.e-btn:hover {
    background-color: var(--fl-royal) !important;
    color: #FFFFFF !important;
    border-color: var(--fl-royal) !important;
}

.fl-user-menu[b-ksinmr3dgi] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.fl-user-dropdown-wrap[b-ksinmr3dgi] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--fl-bg-surface-2);
    border: 1px solid var(--fl-border);
    padding: 3px 10px 3px 4px;
    border-radius: var(--fl-radius-full);
    position: relative;
    cursor: pointer;
    outline: none;
    font-family: inherit;
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    touch-action: manipulation;
}

.fl-user-dropdown-wrap *[b-ksinmr3dgi] {
    pointer-events: none;
}

.fl-user-dropdown-wrap:hover[b-ksinmr3dgi],
.fl-user-dropdown-wrap.fl-user-menu-open[b-ksinmr3dgi] {
    background: var(--fl-bg-surface);
    border-color: var(--fl-royal);
    box-shadow: 0 0 0 2px rgba(21, 101, 255, 0.15);
}

.fl-user-dropdown-btn[b-ksinmr3dgi] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--fl-text-primary);
    font-weight: 600;
    font-size: 13px;
    border: none;
    padding: 0 4px 0 0;
    cursor: pointer;
}

.fl-user-dropdown-text[b-ksinmr3dgi] {
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fl-user-dropdown-icon[b-ksinmr3dgi] {
    transition: transform 200ms ease;
    color: var(--fl-text-secondary);
}

.fl-user-dropdown-icon--open[b-ksinmr3dgi] {
    transform: rotate(180deg);
}

.fl-badge[b-ksinmr3dgi] {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    border-radius: var(--fl-radius-full);
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

.fl-badge--danger[b-ksinmr3dgi] {
    background: var(--fl-danger);
    color: #FFFFFF;
}

.fl-avatar[b-ksinmr3dgi] {
    width: 32px;
    height: 32px;
    border-radius: var(--fl-radius-full);
    background: linear-gradient(135deg, var(--fl-royal) 0%, var(--fl-sky) 100%);
    color: #FFFFFF;
    font-family: var(--fl-font-display);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fl-avatar--sm[b-ksinmr3dgi] {
    width: 28px;
    height: 28px;
    font-size: 11px;
}

.fl-avatar--lg[b-ksinmr3dgi] {
    width: 40px;
    height: 40px;
    font-size: 14px;
}

.fl-user-menu__trigger[b-ksinmr3dgi] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--fl-radius-md);
}

.fl-user-menu__trigger:hover[b-ksinmr3dgi] {
    background: var(--fl-bg-surface-2);
}

.fl-user-menu__company[b-ksinmr3dgi] {
    font-size: 13px;
    font-weight: 600;
    color: var(--fl-text-primary);
    white-space: nowrap;
}

.fl-chevron[b-ksinmr3dgi] {
    font-size: 10px;
    opacity: 0.6;
}

/* Dropdown */
.fl-dropdown[b-ksinmr3dgi] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--fl-bg-surface);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-lg);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    min-width: 220px;
    max-width: calc(100vw - 20px);
    z-index: 1050;
    overflow: hidden;
    animation: flDropdownFadeIn-b-ksinmr3dgi 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes flDropdownFadeIn-b-ksinmr3dgi {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.fl-dropdown__section-label[b-ksinmr3dgi] {
    padding: 10px 16px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fl-text-muted);
}

.fl-dropdown__item[b-ksinmr3dgi] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 11px 16px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--fl-text-primary);
    background: transparent;
    border: none;
    text-decoration: none;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
    touch-action: manipulation;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 150ms ease, color 150ms ease;
}

.fl-dropdown__item *[b-ksinmr3dgi] {
    pointer-events: none;
}

.fl-dropdown__icon[b-ksinmr3dgi] {
    flex-shrink: 0;
    stroke: currentColor;
}

.fl-dropdown__item:hover[b-ksinmr3dgi] {
    background: var(--fl-bg-surface-2);
    color: var(--fl-royal);
}

.fl-dropdown__item:active[b-ksinmr3dgi] {
    background: var(--fl-bg-surface-3, rgba(0, 0, 0, 0.05));
}

.fl-dropdown__item--danger[b-ksinmr3dgi] {
    color: var(--fl-danger) !important;
}

.fl-dropdown__item--danger:hover[b-ksinmr3dgi] {
    background: var(--fl-danger-bg, #FDEAEA) !important;
    color: var(--fl-danger) !important;
}

.fl-dropdown__divider[b-ksinmr3dgi] {
    height: 1px;
    background: var(--fl-border-soft);
    margin: 2px 0;
}

.fl-dropdown__user-header[b-ksinmr3dgi] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}

.fl-dropdown__fullname[b-ksinmr3dgi] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fl-text-primary);
}

.fl-dropdown__email[b-ksinmr3dgi] {
    font-size: 12px;
    color: var(--fl-text-muted);
}

/* ─── Page Content (Strict Viewport & Fluid Fitting) ─────────── */
.fl-page-content[b-ksinmr3dgi] {
    flex: 1;
    position: relative;
    z-index: 1;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 24px 24px 24px !important;
    background: var(--fl-bg-app);
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    scrollbar-width: thin !important;
    -ms-overflow-style: auto !important;
}

.fl-page-content[b-ksinmr3dgi]::-webkit-scrollbar {
    display: block !important;
    width: 8px !important;
    height: 8px !important;
}

/* =============================================================
   DASHBOARD STYLES (Matching Brandkit Reference Page 8)
   ============================================================= */
[b-ksinmr3dgi] .fl-dashboard {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

[b-ksinmr3dgi] .fl-dash-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
}

[b-ksinmr3dgi] .fl-dash-welcome {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-ksinmr3dgi] .fl-dash-title {
    font-family: var(--fl-font-display);
    font-size: 24px;
    font-weight: 700;
    color: var(--fl-text-primary);
    line-height: 1.2;
    margin: 0;
}

[b-ksinmr3dgi] .fl-dash-subtitle {
    font-size: 13.5px;
    color: var(--fl-text-secondary);
    margin: 2px 0 0;
}

[b-ksinmr3dgi] .fl-dash-highlights {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 6px;
    width: 100%;
}

[b-ksinmr3dgi] .fl-highlight-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--fl-bg-surface);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-md);
    padding: 10px 14px;
    box-shadow: var(--fl-shadow-sm);
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

[b-ksinmr3dgi] .fl-highlight-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

[b-ksinmr3dgi] .fl-hl-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
}

[b-ksinmr3dgi] .fl-hl-bg--green {
    background: rgba(31, 184, 116, 0.12);
}

[b-ksinmr3dgi] .fl-hl-bg--blue {
    background: rgba(21, 101, 255, 0.12);
}

[b-ksinmr3dgi] .fl-hl-bg--teal {
    background: rgba(22, 211, 209, 0.12);
}

[b-ksinmr3dgi] .fl-hl-bg--amber {
    background: rgba(245, 165, 36, 0.12);
}

[b-ksinmr3dgi] .fl-hl-bg--purple {
    background: rgba(139, 92, 246, 0.12);
}

[b-ksinmr3dgi] .fl-hl-bg--rose {
    background: rgba(244, 63, 94, 0.12);
}

[b-ksinmr3dgi] .fl-hl-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

[b-ksinmr3dgi] .fl-hl-label {
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: var(--fl-text-secondary) !important;
    white-space: nowrap !important;
}

[b-ksinmr3dgi] .fl-hl-val {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--fl-text-primary) !important;
    white-space: nowrap !important;
}

[b-ksinmr3dgi] .fl-hl-pct {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: var(--fl-success) !important;
    display: inline-block !important;
}

[b-ksinmr3dgi] .fl-hl-sub {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: var(--fl-text-muted) !important;
    display: inline-block !important;
}

[b-ksinmr3dgi] .fl-progress-bar {
    width: 100%;
    height: 4px;
    background: var(--fl-bg-surface-2);
    border-radius: 9999px;
    overflow: hidden;
    margin-top: 4px;
}

[b-ksinmr3dgi] .fl-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--fl-success) 0%, var(--fl-teal) 100%);
    border-radius: 9999px;
}

[b-ksinmr3dgi] .fl-hl-tag {
    display: inline-flex;
    align-items: center;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--fl-warning);
    line-height: 1;
    margin-top: 2px;
}

[b-ksinmr3dgi] .fl-hl-tag--success {
    color: var(--fl-success);
}

[b-ksinmr3dgi] .fl-hl-tag--info {
    color: var(--fl-sky);
}

[b-ksinmr3dgi] .fl-dash-date-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--fl-bg-surface);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-md);
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--fl-text-secondary);
    cursor: pointer;
    box-shadow: var(--fl-shadow-sm);
    margin-top: auto !important;
    align-self: flex-end !important;
}

[b-ksinmr3dgi] .fl-dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
    gap: 16px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

[b-ksinmr3dgi] .fl-dash-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

[b-ksinmr3dgi] .fl-dash-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* KPI Cards Row */
[b-ksinmr3dgi] .fl-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    width: 100% !important;
    box-sizing: border-box !important;
}

[b-ksinmr3dgi] .fl-kpi-card {
    background: var(--fl-bg-surface);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-lg);
    padding: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    box-shadow: var(--fl-shadow-sm);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

[b-ksinmr3dgi] .fl-kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.08);
    border-color: rgba(21, 101, 255, 0.3);
}

[b-ksinmr3dgi] .fl-kpi-card__title {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--fl-text-secondary);
}

[b-ksinmr3dgi] .fl-kpi-card__val {
    font-family: var(--fl-font-display);
    font-size: 22px;
    font-weight: 800;
    color: var(--fl-text-primary);
    margin: 4px 0;
    letter-spacing: -0.5px;
}

[b-ksinmr3dgi] .fl-kpi-card__trend {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

[b-ksinmr3dgi] .fl-trend-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

[b-ksinmr3dgi] .fl-trend-badge--up {
    background: rgba(31, 184, 116, 0.12);
    color: var(--fl-success);
}

[b-ksinmr3dgi] .fl-trend-badge--down {
    background: rgba(107, 122, 153, 0.12);
    color: var(--fl-slate);
}

[b-ksinmr3dgi] .fl-trend-badge--danger {
    background: rgba(230, 83, 83, 0.12);
    color: var(--fl-danger);
}

[b-ksinmr3dgi] .fl-trend__sub {
    font-size: 11px;
    font-weight: 400;
    color: var(--fl-text-muted);
}

[b-ksinmr3dgi] .fl-kpi-card__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--fl-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

[b-ksinmr3dgi] .fl-icon-bg--blue {
    background: rgba(21, 101, 255, 0.1);
    color: var(--fl-royal);
}

[b-ksinmr3dgi] .fl-icon-bg--green {
    background: rgba(31, 184, 116, 0.1);
    color: var(--fl-success);
}

[b-ksinmr3dgi] .fl-icon-bg--amber {
    background: rgba(245, 165, 36, 0.1);
    color: var(--fl-warning);
}

[b-ksinmr3dgi] .fl-icon-bg--red {
    background: rgba(230, 83, 83, 0.1);
    color: var(--fl-danger);
}

/* Charts & Needs Attention */
[b-ksinmr3dgi] .fl-charts-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
    gap: 16px;
    width: 100% !important;
    box-sizing: border-box !important;
}

[b-ksinmr3dgi] .fl-card {
    background: var(--fl-bg-surface);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-lg);
    padding: 16px;
    box-shadow: var(--fl-shadow-sm);
    min-width: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    transition: box-shadow 220ms ease;
    overflow-y: auto;
    scrollbar-width: thin;
}

[b-ksinmr3dgi] .fl-card::-webkit-scrollbar {
    width: 6px;
}

[b-ksinmr3dgi] .fl-card::-webkit-scrollbar-track {
    background: transparent;
}

[b-ksinmr3dgi] .fl-card::-webkit-scrollbar-thumb {
    background: var(--fl-border);
    border-radius: 3px;
}

[b-ksinmr3dgi] .fl-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

[b-ksinmr3dgi] .fl-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

[b-ksinmr3dgi] .fl-card__title {
    font-family: var(--fl-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--fl-text-primary);
    margin: 0;
}

[b-ksinmr3dgi] .fl-card__link {
    font-size: 12px;
    font-weight: 600;
    color: var(--fl-royal);
    text-decoration: none;
    transition: opacity 180ms ease;
}

[b-ksinmr3dgi] .fl-card__link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

[b-ksinmr3dgi] .fl-badge-pill {
    font-size: 11.5px;
    background: var(--fl-bg-surface-2);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-sm);
    padding: 2px 8px;
    color: var(--fl-text-secondary);
}

/* Needs Attention Panel */
[b-ksinmr3dgi] .fl-attention-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

[b-ksinmr3dgi] .fl-attention-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--fl-bg-surface-2);
    border-radius: var(--fl-radius-md);
    border-left: 3px solid transparent;
    transition: transform 180ms ease, background 180ms ease;
}

[b-ksinmr3dgi] .fl-attention-item:hover {
    transform: translateX(3px);
    background: var(--fl-border-soft);
}

[b-ksinmr3dgi] .fl-attention-item--red {
    border-left-color: var(--fl-danger);
}

[b-ksinmr3dgi] .fl-attention-item--amber {
    border-left-color: var(--fl-warning);
}

[b-ksinmr3dgi] .fl-attention-item--teal {
    border-left-color: var(--fl-teal);
}

[b-ksinmr3dgi] .fl-att-badge {
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

[b-ksinmr3dgi] .fl-att-badge--red {
    background: var(--fl-danger-bg);
    color: var(--fl-danger);
}

[b-ksinmr3dgi] .fl-att-badge--amber {
    background: var(--fl-warning-bg);
    color: var(--fl-warning);
}

[b-ksinmr3dgi] .fl-att-badge--teal {
    background: rgba(22, 211, 209, 0.12);
    color: var(--fl-teal);
}

[b-ksinmr3dgi] .fl-att-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--fl-text-primary);
}

[b-ksinmr3dgi] .fl-att-sub {
    font-size: 11.5px;
    color: var(--fl-text-muted);
}

/* Status Dot Pills */
[b-ksinmr3dgi] .fl-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
}

[b-ksinmr3dgi] .fl-status--paid {
    background: var(--fl-success-bg);
    color: var(--fl-success);
}

[b-ksinmr3dgi] .fl-status--partial {
    background: var(--fl-warning-bg);
    color: var(--fl-warning);
}

[b-ksinmr3dgi] .fl-status--overdue {
    background: var(--fl-danger-bg);
    color: var(--fl-danger);
}

[b-ksinmr3dgi] .fl-status--draft {
    background: var(--fl-bg-surface-2);
    color: var(--fl-text-secondary);
}

/* Quick Create Tile Grid */
[b-ksinmr3dgi] .fl-qc-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

[b-ksinmr3dgi] .fl-qc-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 8px;
    background: var(--fl-bg-surface-2);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-md);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--fl-text-primary);
    transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

[b-ksinmr3dgi] .fl-qc-tile:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: var(--fl-royal);
    box-shadow: 0 6px 16px rgba(21, 101, 255, 0.15);
    color: var(--fl-royal);
}

[b-ksinmr3dgi] .fl-qc-icon-bg {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

[b-ksinmr3dgi] .fl-qc-bg--blue {
    background: rgba(21, 101, 255, 0.12);
    color: var(--fl-royal);
}

[b-ksinmr3dgi] .fl-qc-bg--green {
    background: rgba(31, 184, 116, 0.12);
    color: var(--fl-success);
}

[b-ksinmr3dgi] .fl-qc-bg--info {
    background: rgba(35, 168, 255, 0.12);
    color: var(--fl-sky);
}

[b-ksinmr3dgi] .fl-qc-bg--amber {
    background: rgba(245, 165, 36, 0.12);
    color: var(--fl-warning);
}

[b-ksinmr3dgi] .fl-qc-bg--red {
    background: rgba(230, 83, 83, 0.12);
    color: var(--fl-danger);
}

[b-ksinmr3dgi] .fl-qc-bg--purple {
    background: rgba(139, 92, 246, 0.12);
    color: #8B5CF6;
}

[b-ksinmr3dgi] .fl-qc-tile__icon {
    font-size: 18px;
}

/* Activity Feed Timeline */
[b-ksinmr3dgi] .fl-activity-timeline {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    padding-left: 8px;
}

[b-ksinmr3dgi] .fl-act-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

[b-ksinmr3dgi] .fl-act-icon {
    width: 24px;
    height: 24px;
    border-radius: var(--fl-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
    margin-top: 1px;
}

[b-ksinmr3dgi] .fl-act-icon--green {
    background: var(--fl-success-bg);
    color: var(--fl-success);
}

[b-ksinmr3dgi] .fl-act-icon--blue {
    background: var(--fl-info-bg);
    color: var(--fl-info);
}

[b-ksinmr3dgi] .fl-act-icon--teal {
    background: rgba(22, 211, 209, 0.12);
    color: var(--fl-teal);
}

[b-ksinmr3dgi] .fl-act-icon--amber {
    background: var(--fl-warning-bg);
    color: var(--fl-warning);
}

[b-ksinmr3dgi] .fl-act-text {
    font-size: 12.5px;
    color: var(--fl-text-primary);
    line-height: 1.35;
}

[b-ksinmr3dgi] .fl-act-time {
    font-size: 11px;
    color: var(--fl-text-muted);
    margin-top: 2px;
}

/* =============================================================
   FULL RESPONSIVE SYSTEM (Mobile, Tablet, Laptop, Desktop)
   ============================================================= */

/* ─── Laptop / Small Desktop (1024px – 1366px) ──────────────── */
@media (max-width: 1366px) {
    [b-ksinmr3dgi] .fl-dash-grid {
        grid-template-columns: 1fr;
    }

    [b-ksinmr3dgi] .fl-dash-side {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}

/* ─── Mobile Bottom Navigation (Hidden on Desktop) ───────────── */
.fl-mobile-bottom-nav[b-ksinmr3dgi] {
    display: none;
}

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

    [b-ksinmr3dgi] .e-sidebar.fl-sf-sidebar:not(.fl-sidebar-open),
    [b-ksinmr3dgi] .fl-sf-sidebar:not(.fl-sidebar-open),
    [b-ksinmr3dgi] .fl-sidebar-closed,
    [b-ksinmr3dgi] .fl-sidebar-closed[style] {
        display: none !important;
        visibility: hidden !important;
        transform: translateX(-100%) !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
    }

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

    .fl-topbar__search[b-ksinmr3dgi] {
        max-width: 180px;
    }

    .fl-search-kbd[b-ksinmr3dgi] {
        display: none;
    }

    [b-ksinmr3dgi] .fl-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }

    [b-ksinmr3dgi] .fl-charts-row {
        grid-template-columns: 1fr;
    }

    [b-ksinmr3dgi] .fl-tables-row {
        grid-template-columns: 1fr;
    }

    [b-ksinmr3dgi] .fl-dash-side {
        grid-template-columns: 1fr;
    }
}

/* ─── Tablet / Portrait / Mobile (≤ 857px) ──────────────────── */
@media (max-width: 857px) {

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

    .fl-topbar[b-ksinmr3dgi] {
        padding: 0 12px;
        height: 60px !important;
        gap: 8px;
        justify-content: space-between;
    }

    .fl-search-kbd[b-ksinmr3dgi] {
        display: none !important;
    }

    .fl-search-wrap[b-ksinmr3dgi] {
        padding: 0 12px;
        box-sizing: border-box;
    }

    .fl-mobile-search-toggle[b-ksinmr3dgi] {
        display: flex;
        flex-shrink: 0;
    }

    [b-ksinmr3dgi] .fl-mobile-search-toggle .fl-topbar__icon-btn-sf.e-btn {
        width: 32px !important;
        height: 32px !important;
        background-color: var(--fl-bg-surface-2) !important;
        border: 1px solid var(--fl-border) !important;
        color: var(--fl-text-primary) !important;
    }

    /* Container width never jumps — always full remaining space,
       so the search-toggle icon never shifts position */
    .fl-topbar__right[b-ksinmr3dgi] {
        display: flex;
        gap: 8px !important;
        flex: 1 1 auto;
        min-width: 0;
        align-items: center;
        justify-content: flex-end;
        position: relative;
    }

    /* Search box: collapsed by default, expands via flex-basis (not width jump) */
    .fl-topbar__search[b-ksinmr3dgi] {
        display: flex !important;
        flex: 0 0 0;
        width: 0;
        min-width: 0;
        overflow: hidden;
        opacity: 0;
        box-sizing: border-box;
        transition: flex-basis 260ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms ease, margin-left 260ms ease;
    }

    .fl-topbar__right.fl-search-open .fl-topbar__search[b-ksinmr3dgi] {
        flex: 1 1 auto;
        width: auto;
        opacity: 1;
        margin-left: 4px;
    }

    [b-ksinmr3dgi] .fl-topbar__right.fl-search-open .fl-mobile-search-toggle .fl-topbar__icon-btn-sf.e-btn {
        background-color: var(--fl-royal) !important;
        border-color: var(--fl-royal) !important;
        color: #FFFFFF !important;
    }

    .fl-topbar__left[b-ksinmr3dgi] {
        position: relative;
        right: 10px;
    }

    /* Other buttons: solid non-shifting layout on mobile */
    .fl-qc-wrap[b-ksinmr3dgi],
    .fl-icon-btn-wrap[b-ksinmr3dgi],
    .fl-user-menu[b-ksinmr3dgi] {
        flex-shrink: 0 !important;
        opacity: 1 !important;
    }

    .fl-topbar__right.fl-search-open .fl-qc-wrap[b-ksinmr3dgi],
    .fl-topbar__right.fl-search-open .fl-icon-btn-wrap[b-ksinmr3dgi],
    .fl-topbar__right.fl-search-open .fl-user-menu[b-ksinmr3dgi] {
        max-width: 0 !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        overflow: hidden !important;
        transition: max-width 220ms ease, opacity 160ms ease, margin 220ms ease, padding 220ms ease;
    }

    /* ── "New" button: stable, non-shifting, never shakes ── */
    .fl-qc-wrap[b-ksinmr3dgi] {
        display: inline-flex !important;
        align-items: center !important;
    }

    [b-ksinmr3dgi] .fl-btn-new-sf.e-dropdown-btn {
        padding: 6px 10px !important;
        font-size: 12.5px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        transform: none !important;
        transition: none !important;
    }

    [b-ksinmr3dgi] .fl-btn-new-sf.e-dropdown-btn:hover,
    [b-ksinmr3dgi] .fl-btn-new-sf.e-dropdown-btn:active {
        transform: none !important;
    }

    [b-ksinmr3dgi] .e-tooltip-wrap {
        display: inline-flex !important;
        width: auto !important;
        max-width: fit-content !important;
        flex-shrink: 0 !important;
    }

    .fl-icon-btn-wrap[b-ksinmr3dgi] {
        width: 36px !important;
        height: 36px !important;
        max-width: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        position: relative !important;
    }

    [b-ksinmr3dgi] .fl-topbar__icon-btn-sf.e-btn {
        width: 32px !important;
        height: 32px !important;
        flex-shrink: 0 !important;
        transform: none !important;
        transition: none !important;
    }

    /* ── Mobile User Menu: Generous, comfortable touch target ── */
    .fl-user-menu[b-ksinmr3dgi] {
        position: relative !important;
        overflow: visible !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: 2px !important;
        flex-shrink: 0 !important;
        z-index: 10 !important;
    }

    .fl-user-dropdown-wrap[b-ksinmr3dgi] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        position: relative !important;
        z-index: 10 !important;
    }

    .fl-user-dropdown-wrap *[b-ksinmr3dgi] {
        pointer-events: none !important;
    }

    .fl-user-dropdown-wrap:hover[b-ksinmr3dgi],
    .fl-user-dropdown-wrap.fl-user-menu-open[b-ksinmr3dgi] {
        background: transparent !important;
        box-shadow: none !important;
    }

    .fl-user-dropdown-wrap .fl-avatar[b-ksinmr3dgi] {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        border-radius: 50% !important;
        pointer-events: none !important;
        margin: 0 !important;
        border: 2px solid var(--fl-border) !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12) !important;
        transition: transform 150ms ease, box-shadow 150ms ease !important;
    }

    .fl-user-dropdown-wrap:active .fl-avatar[b-ksinmr3dgi] {
        transform: scale(0.94) !important;
    }

    .fl-user-dropdown-btn[b-ksinmr3dgi] {
        display: none !important;
    }

    .fl-dropdown[b-ksinmr3dgi] {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        right: 0 !important;
        min-width: 220px !important;
        max-width: calc(100vw - 20px) !important;
        z-index: 1050 !important;
    }

    .fl-page-content[b-ksinmr3dgi] {
        padding: 0 12px 76px 12px !important;
    }

    /* Mobile Bottom Navigation Bar */
    .fl-mobile-bottom-nav[b-ksinmr3dgi] {
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 62px;
        background: var(--fl-bg-surface);
        border-top: 1px solid var(--fl-border);
        z-index: 1000;
        padding: 0 8px;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    }

    .fl-theme-dark .fl-mobile-bottom-nav[b-ksinmr3dgi] {
        background: var(--fl-bg-surface) !important;
        border-top: 1px solid var(--fl-border) !important;
    }

    .fl-mobile-nav-item[b-ksinmr3dgi] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: var(--fl-text-secondary);
        text-decoration: none !important;
        font-size: 11px;
        font-weight: 500;
        flex: 1;
        background: none;
        border: none;
        padding: 6px 0;
        cursor: pointer;
        transition: color 180ms ease;
    }

    .fl-mobile-nav-item.active[b-ksinmr3dgi],
    .fl-mobile-nav-item:hover[b-ksinmr3dgi] {
        color: var(--fl-royal);
        font-weight: 600;
    }

    .fl-mobile-nav-icon[b-ksinmr3dgi] {
        font-size: 18px;
        line-height: 1;
    }

    [b-ksinmr3dgi] .fl-dash-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    [b-ksinmr3dgi] .fl-dash-title {
        font-size: 20px;
    }

    [b-ksinmr3dgi] .fl-kpi-row {
        grid-template-columns: 1fr;
    }

    [b-ksinmr3dgi] .fl-qc-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Hide the mobile search toggle icon on desktop */
@media (min-width: 858px) {
    .fl-mobile-search-toggle[b-ksinmr3dgi] {
        display: none !important;
    }
}


/* =============================================================
   STRICT DARK THEME OVERRIDES (Smooth Edge Rounded Corners)
   ============================================================= */
.fl-theme-dark[b-ksinmr3dgi],
.fl-theme-dark body[b-ksinmr3dgi],
.fl-theme-dark .fl-shell[b-ksinmr3dgi],
.fl-theme-dark .fl-main-wrapper[b-ksinmr3dgi],
.fl-theme-dark .fl-topbar[b-ksinmr3dgi],
.fl-theme-dark .fl-page-content[b-ksinmr3dgi] {
    background-color: var(--fl-bg-app) !important;
    color: var(--fl-text-primary) !important;
}

/* Sidebar Active Item & Nav Item Smooth Rounded Edges in Dark Theme */
.fl-theme-dark[b-ksinmr3dgi]  .fl-sf-sidebar .fl-nav,
.fl-theme-dark[b-ksinmr3dgi]  .fl-nav {
    padding: 8px 10px 16px !important;
}

.fl-theme-dark[b-ksinmr3dgi]  .fl-nav__item {
    border-radius: var(--fl-radius-md, 8px) !important;
    margin: 2px 0 !important;
    padding: 9px 14px !important;
}

.fl-theme-dark[b-ksinmr3dgi]  .fl-nav__item.active {
    background: var(--fl-royal, #1565FF) !important;
    color: #FFFFFF !important;
    border-radius: var(--fl-radius-md, 8px) !important;
    box-shadow: 0 4px 12px rgba(21, 101, 255, 0.35) !important;
}

/* Topbar Controls & Cards Smooth Rounded Edges in Dark Theme */
.fl-theme-dark[b-ksinmr3dgi]  .fl-card,
.fl-theme-dark[b-ksinmr3dgi]  .fl-kpi-card,
.fl-theme-dark[b-ksinmr3dgi]  .fl-qc-tile,
.fl-theme-dark[b-ksinmr3dgi]  .fl-attention-item,
.fl-theme-dark[b-ksinmr3dgi]  .fl-dash-date-btn,
.fl-theme-dark[b-ksinmr3dgi]  .fl-dropdown {
    background-color: var(--fl-bg-surface) !important;
    border-color: var(--fl-border) !important;
    border-radius: var(--fl-radius-lg, 12px) !important;
    color: var(--fl-text-primary) !important;
}

.fl-theme-dark[b-ksinmr3dgi]  .fl-search-wrap {
    background-color: var(--fl-bg-surface-2, #142037) !important;
    border-color: var(--fl-border) !important;
    border-radius: var(--fl-radius-md, 8px) !important;
    color: var(--fl-text-primary) !important;
}

.fl-theme-dark[b-ksinmr3dgi]  .fl-btn-new-sf.e-dropdown-btn {
    border-radius: var(--fl-radius-md, 8px) !important;
}

.fl-theme-dark[b-ksinmr3dgi]  .fl-topbar__icon-btn-sf.e-btn {
    border-radius: 9999px !important;
    background-color: var(--fl-bg-surface-2, #142037) !important;
    border: 1px solid var(--fl-border, #1C2D4A) !important;
}

.fl-theme-dark[b-ksinmr3dgi]  .fl-user-dropdown-wrap {
    border-radius: 9999px !important;
    background-color: var(--fl-bg-surface-2, #142037) !important;
    border: 1px solid var(--fl-border, #1C2D4A) !important;
}

.fl-theme-dark[b-ksinmr3dgi]  .fl-avatar {
    border-radius: 9999px !important;
}

.fl-theme-dark[b-ksinmr3dgi]  input,
.fl-theme-dark[b-ksinmr3dgi]  select,
.fl-theme-dark[b-ksinmr3dgi]  textarea,
.fl-theme-dark[b-ksinmr3dgi]  .e-input,
.fl-theme-dark[b-ksinmr3dgi]  .e-input-group,
.fl-theme-dark[b-ksinmr3dgi]  .e-control-wrapper {
    background-color: transparent !important;
    color: var(--fl-text-primary) !important;
}

/* Syncfusion Grid Dark Mode Overrides */
.fl-theme-dark[b-ksinmr3dgi]  .e-grid,
.fl-theme-dark[b-ksinmr3dgi]  .e-gridheader,
.fl-theme-dark[b-ksinmr3dgi]  .e-headercell,
.fl-theme-dark[b-ksinmr3dgi]  .e-row,
.fl-theme-dark[b-ksinmr3dgi]  .e-rowcell,
.fl-theme-dark[b-ksinmr3dgi]  .e-toolbar,
.fl-theme-dark[b-ksinmr3dgi]  .e-gridcontent {
    background-color: var(--fl-bg-surface) !important;
    color: var(--fl-text-primary) !important;
    border-color: var(--fl-border) !important;
}

/* Syncfusion Chart SVG Background */
.fl-theme-dark[b-ksinmr3dgi]  .e-chart-svg,
.fl-theme-dark[b-ksinmr3dgi]  svg {
    background-color: transparent !important;
    background: transparent !important;
}

.fl-theme-dark[b-ksinmr3dgi]  svg rect[fill="#ffffff"],
.fl-theme-dark[b-ksinmr3dgi]  svg rect[fill="#FFFFFF"] {
    fill: var(--fl-bg-surface) !important;
}

/* Empty State Component */
[b-ksinmr3dgi] .fl-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 20px;
    text-align: center;
}

[b-ksinmr3dgi] .fl-empty-state__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--fl-bg-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--fl-text-muted);
    margin-bottom: 12px;
}

[b-ksinmr3dgi] .fl-empty-state__title {
    font-family: var(--fl-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--fl-text-primary);
    margin: 0 0 4px;
}

[b-ksinmr3dgi] .fl-empty-state__desc {
    font-size: 13px;
    color: var(--fl-text-secondary);
    max-width: 320px;
    margin: 0 0 16px;
}

/* =============================================================
   AUTHENTICATION & LOGIN PAGE STYLING
   ============================================================= */
[b-ksinmr3dgi] .fl-auth-screen {
    position: relative;
    width: 100%;
    min-height: 100vh;
    height: auto;
    background: var(--fl-bg-app);
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    display: flex;
    scrollbar-width: thin;
}

[b-ksinmr3dgi] .fl-auth-screen::-webkit-scrollbar {
    width: 8px;
}

[b-ksinmr3dgi] .fl-auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    min-height: 100vh;
}

/* ─── Hero Panel ────────────────────────────────────────────── */
[b-ksinmr3dgi] .fl-auth-hero {
    background: linear-gradient(135deg, rgba(4, 18, 52, 0.52) 0%, rgba(8, 35, 95, 0.48) 100%), url('/Login hero BG.png') center/cover no-repeat;
    position: relative;
    padding: 60px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: #FFFFFF;
}

[b-ksinmr3dgi] .fl-hero-bg-overlay {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(ellipse at 30% 25%, rgba(35, 168, 255, 0.35) 0%, transparent 60%), radial-gradient(ellipse at 80% 75%, rgba(22, 211, 209, 0.30) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

[b-ksinmr3dgi] .fl-hero-ambient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
    pointer-events: none;
}

[b-ksinmr3dgi] .fl-hero-ambient-orb.orb-1 {
    width: 350px;
    height: 350px;
    background: #1565FF;
    top: -50px;
    left: -50px;
}

[b-ksinmr3dgi] .fl-hero-ambient-orb.orb-2 {
    width: 300px;
    height: 300px;
    background: #16D3D1;
    bottom: -50px;
    right: -50px;
}

[b-ksinmr3dgi] .fl-hero-content {
    position: relative;
    z-index: 2;
    max-width: 520px;
    margin: 0 auto;
}

[b-ksinmr3dgi] .fl-hero-brand {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-bottom: 24px;
    margin-left: -28px;
    text-align: left;
}

[b-ksinmr3dgi] .fl-hero-logo {
    height: 180px;
    width: auto;
    max-width: 440px;
    object-fit: contain;
    display: block;
    margin: 0;
}

[b-ksinmr3dgi] .fl-hero-title {
    font-family: var(--fl-font-display);
    font-size: 38px;
    font-weight: 800;
    line-height: 1.15;
    color: #FFFFFF;
    margin-bottom: 16px;
    letter-spacing: -0.8px;
}

[b-ksinmr3dgi] .fl-hero-gradient-text {
    background: linear-gradient(135deg, #23A8FF 0%, #16D3D1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

[b-ksinmr3dgi] .fl-hero-subtitle {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 36px;
}

/* Floating Widget */
[b-ksinmr3dgi] .fl-hero-widget {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--fl-radius-lg);
    padding: 20px;
    margin-bottom: 36px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

[b-ksinmr3dgi] .fl-widget-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

[b-ksinmr3dgi] .fl-widget-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(35, 168, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

[b-ksinmr3dgi] .fl-widget-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #FFFFFF;
}

[b-ksinmr3dgi] .fl-widget-sub {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.6);
}

[b-ksinmr3dgi] .fl-widget-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

[b-ksinmr3dgi] .fl-widget-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}

[b-ksinmr3dgi] .fl-widget-val {
    font-family: var(--fl-font-display);
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
    margin-top: 2px;
}

[b-ksinmr3dgi] .fl-hero-trust {
    display: flex;
    align-items: center;
    gap: 14px;
}

[b-ksinmr3dgi] .fl-trust-avatars {
    display: flex;
}

[b-ksinmr3dgi] .fl-trust-avatars .fl-avatar {
    border: 2px solid #061B55;
    margin-left: -8px;
}

[b-ksinmr3dgi] .fl-trust-avatars .fl-avatar:first-child {
    margin-left: 0;
}

[b-ksinmr3dgi] .fl-trust-text {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
}

/* ─── Form Panel ────────────────────────────────────────────── */
[b-ksinmr3dgi] .fl-auth-form-wrap {
    background: var(--fl-bg-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    position: relative;
}

[b-ksinmr3dgi] .fl-auth-top-bar {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 10;
    display: flex;
    align-items: center;
}

[b-ksinmr3dgi] .fl-theme-toggle-btn.e-btn {
    height: 38px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
    background: var(--fl-bg-surface-2) !important;
    border: 1px solid var(--fl-border) !important;
    color: var(--fl-text-primary) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

[b-ksinmr3dgi] .fl-theme-toggle-btn.e-btn:hover {
    background: var(--fl-royal) !important;
    color: #FFFFFF !important;
    border-color: var(--fl-royal) !important;
}

[b-ksinmr3dgi] .fl-auth-card {
    width: 100%;
    max-width: 420px;
}

[b-ksinmr3dgi] .fl-auth-title {
    font-family: var(--fl-font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--fl-text-primary);
    margin: 0 0 6px;
}

[b-ksinmr3dgi] .fl-auth-sub {
    font-size: 13.5px;
    color: var(--fl-text-secondary);
    margin: 0 0 24px;
}

[b-ksinmr3dgi] .fl-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

[b-ksinmr3dgi] .fl-field-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fl-text-primary);
}

[b-ksinmr3dgi] .fl-input-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

[b-ksinmr3dgi] .fl-field-icon {
    position: absolute;
    left: 12px;
    font-size: 14px;
    color: var(--fl-text-muted);
    z-index: 5;
    pointer-events: none;
}

[b-ksinmr3dgi] .fl-auth-input {
    width: 100% !important;
}

[b-ksinmr3dgi] .fl-auth-input input.e-input {
    padding-left: 36px !important;
    height: 42px !important;
    font-size: 13.5px !important;
    border-radius: var(--fl-radius-md) !important;
    border: 1px solid var(--fl-border) !important;
    background: var(--fl-bg-surface-2) !important;
    color: var(--fl-text-primary) !important;
}

[b-ksinmr3dgi] .fl-pwd-toggle {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: var(--fl-text-muted);
    cursor: pointer;
    z-index: 5;
    padding: 0;
}

[b-ksinmr3dgi] .fl-btn-auth.e-btn {
    width: 100% !important;
    height: 44px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: var(--fl-radius-md) !important;
    background: linear-gradient(135deg, #1565FF 0%, #0052EA 100%) !important;
    box-shadow: 0 4px 14px rgba(21, 101, 255, 0.35) !important;
    color: #FFFFFF !important;
}

[b-ksinmr3dgi] .fl-auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 24px 0 18px;
    color: var(--fl-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

[b-ksinmr3dgi] .fl-auth-divider::before,
[b-ksinmr3dgi] .fl-auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--fl-border);
}

[b-ksinmr3dgi] .fl-auth-divider span {
    padding: 0 12px;
}

[b-ksinmr3dgi] .fl-sso-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

[b-ksinmr3dgi] .fl-btn-sso {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    background: var(--fl-bg-surface-2);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius-md);
    font-size: 13px;
    font-weight: 600;
    color: var(--fl-text-primary);
    cursor: pointer;
    transition: background 180ms ease, border-color 180ms ease;
}

[b-ksinmr3dgi] .fl-btn-sso:hover {
    background: var(--fl-border-soft);
    border-color: var(--fl-royal);
}

[b-ksinmr3dgi] .fl-sso-icon {
    width: 18px;
    height: 18px;
}

[b-ksinmr3dgi] .fl-auth-link {
    font-size: 12.5px;
    color: var(--fl-royal);
    text-decoration: none;
}

[b-ksinmr3dgi] .fl-auth-link:hover {
    text-decoration: underline;
}

[b-ksinmr3dgi] .fl-auth-card__footer {
    text-align: center;
    margin-top: 24px;
    font-size: 13px;
    color: var(--fl-text-secondary);
}

[b-ksinmr3dgi] .fl-auth-footer-notes {
    margin-top: 40px;
    text-align: center;
    font-size: 11.5px;
    color: var(--fl-text-muted);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ─── ULTRA RICH DARK MODE DASHBOARD ENHANCEMENTS ──────────────── */
.fl-theme-dark .fl-card[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-card,
.fl-theme-dark .fl-highlight-card[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-highlight-card,
.fl-theme-dark .fl-kpi-card[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-kpi-card {
    background: #0F1B32 !important;
    border: 1px solid #1E2D4A !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.40) !important;
}

.fl-theme-dark .fl-highlight-card:hover[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-highlight-card:hover,
.fl-theme-dark .fl-kpi-card:hover[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-kpi-card:hover {
    border-color: #2D436D !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55) !important;
}

/* Highlight Card Icon Badges in Dark Mode */
.fl-theme-dark .fl-hl-bg--green[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-hl-bg--green {
    background: rgba(16, 185, 129, 0.25) !important;
    color: #34D399 !important;
    border: 1px solid rgba(16, 185, 129, 0.40) !important;
}

.fl-theme-dark .fl-hl-bg--blue[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-hl-bg--blue {
    background: rgba(21, 101, 255, 0.25) !important;
    color: #60A5FA !important;
    border: 1px solid rgba(21, 101, 255, 0.40) !important;
}

.fl-theme-dark .fl-hl-bg--teal[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-hl-bg--teal {
    background: rgba(22, 211, 209, 0.25) !important;
    color: #2DD4BF !important;
    border: 1px solid rgba(22, 211, 209, 0.40) !important;
}

.fl-theme-dark .fl-hl-bg--amber[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-hl-bg--amber {
    background: rgba(245, 158, 11, 0.25) !important;
    color: #FBBF24 !important;
    border: 1px solid rgba(245, 158, 11, 0.40) !important;
}

.fl-theme-dark .fl-hl-bg--purple[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-hl-bg--purple {
    background: rgba(168, 85, 247, 0.25) !important;
    color: #C084FC !important;
    border: 1px solid rgba(168, 85, 247, 0.40) !important;
}

.fl-theme-dark .fl-hl-bg--rose[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-hl-bg--rose {
    background: rgba(244, 63, 94, 0.25) !important;
    color: #FB7185 !important;
    border: 1px solid rgba(244, 63, 94, 0.40) !important;
}

/* Progress bar in Dark Mode */
.fl-theme-dark .fl-progress-bar[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-progress-bar {
    background: rgba(255, 255, 255, 0.12) !important;
    height: 5px !important;
    border-radius: 9999px !important;
    margin-top: 5px !important;
    overflow: hidden !important;
}

.fl-theme-dark .fl-progress-fill[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-progress-fill {
    background: linear-gradient(90deg, #10B981 0%, #14B8A6 100%) !important;
    height: 100% !important;
    border-radius: 9999px !important;
}

/* Typography & Subtexts in Dark Mode Cards */
.fl-theme-dark .fl-hl-label[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-hl-label {
    color: rgba(255, 255, 255, 0.65) !important;
}

.fl-theme-dark .fl-hl-val[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-hl-val {
    color: #FFFFFF !important;
}

.fl-theme-dark .fl-hl-pct[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-hl-pct {
    color: #34D399 !important;
    font-weight: 600 !important;
}

.fl-theme-dark .fl-hl-sub[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-hl-sub {
    color: rgba(255, 255, 255, 0.50) !important;
}

.fl-theme-dark .fl-hl-tag[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-hl-tag {
    color: #FBBF24 !important;
}

.fl-theme-dark .fl-hl-tag--success[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-hl-tag--success {
    color: #34D399 !important;
}

.fl-theme-dark .fl-hl-tag--info[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-hl-tag--info {
    color: #38BDF8 !important;
}

/* Quick Create Tile Cards in Dark Mode */
.fl-theme-dark .fl-qc-tile[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-qc-tile {
    background: #14213B !important;
    border: 1px solid #1E2D4A !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.fl-theme-dark .fl-qc-tile:hover[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-qc-tile:hover {
    background: #1C2E50 !important;
    border-color: #2D436D !important;
    color: #FFFFFF !important;
}

/* Needs Attention Item Containers in Dark Mode */
.fl-theme-dark .fl-attention-item[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-attention-item {
    background: #14213B !important;
    border-top: 1px solid #1E2D4A !important;
    border-right: 1px solid #1E2D4A !important;
    border-bottom: 1px solid #1E2D4A !important;
    border-left-width: 4px !important;
    border-left-style: solid !important;
}

.fl-theme-dark .fl-attention-item--red[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-attention-item--red {
    border-left-color: #EF4444 !important;
}

.fl-theme-dark .fl-attention-item--amber[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-attention-item--amber {
    border-left-color: #F59E0B !important;
}

.fl-theme-dark .fl-attention-item--teal[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-attention-item--teal {
    border-left-color: #14B8A6 !important;
}

.fl-theme-dark .fl-att-badge--red[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-att-badge--red {
    background: rgba(239, 68, 68, 0.20) !important;
    color: #F87171 !important;
}

.fl-theme-dark .fl-att-badge--amber[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-att-badge--amber {
    background: rgba(245, 158, 11, 0.20) !important;
    color: #FBBF24 !important;
}

.fl-theme-dark .fl-att-badge--teal[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-att-badge--teal {
    background: rgba(20, 184, 166, 0.20) !important;
    color: #2DD4BF !important;
}

.fl-theme-dark .fl-att-label[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-att-label {
    color: #FFFFFF !important;
}

.fl-theme-dark .fl-att-sub[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-att-sub {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Activity Feed Timeline in Dark Mode */
.fl-theme-dark .fl-act-text[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-act-text {
    color: rgba(255, 255, 255, 0.85) !important;
}

.fl-theme-dark .fl-act-time[b-ksinmr3dgi],
.fl-theme-dark[b-ksinmr3dgi]  .fl-act-time {
    color: rgba(255, 255, 255, 0.45) !important;
}

.fl-theme-dark .fl-dash-title[b-ksinmr3dgi] {
    color: #FFFFFF !important;
}

.fl-theme-dark .fl-dash-subtitle[b-ksinmr3dgi] {
    color: rgba(255, 255, 255, 0.60) !important;
}

.fl-theme-dark .fl-dash-date-btn[b-ksinmr3dgi] {
    background: #0F1B32 !important;
    border: 1px solid #1E2D4A !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Auth Responsive */
@media (max-width: 992px) {
    [b-ksinmr3dgi] .fl-auth-grid {
        grid-template-columns: 1fr;
    }

    [b-ksinmr3dgi] .fl-auth-hero {
        display: none;
    }
}

/* ── Dashboard Highlights — Responsive Breakpoints ─────────────── */

/* Large (≤ 1280px): keep 4 columns but tighten gap */
@media (max-width: 1280px) {
    [b-ksinmr3dgi] .fl-dash-highlights {
        gap: 10px;
    }
}

/* Medium-Large (≤ 1100px): 2 columns */
@media (max-width: 1100px) {
    [b-ksinmr3dgi] .fl-dash-highlights {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    [b-ksinmr3dgi] .fl-dash-header {
        flex-wrap: wrap;
        gap: 12px;
    }

    [b-ksinmr3dgi] .fl-dash-welcome {
        min-width: 0;
        width: 100%;
    }
}

/* Medium (≤ 900px): 2 columns, stack date btn */
@media (max-width: 900px) {
    [b-ksinmr3dgi] .fl-dash-highlights {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    [b-ksinmr3dgi] .fl-dash-header {
        flex-direction: column;
        align-items: flex-start;
    }

    [b-ksinmr3dgi] .e-btn.fl-dash-date-btn {
        align-self: flex-start !important;
    }
}

/* Small (≤ 640px): 1 column */
@media (max-width: 640px) {
    [b-ksinmr3dgi] .fl-dash-highlights {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    [b-ksinmr3dgi] .fl-dash-title {
        font-size: 20px !important;
    }

    [b-ksinmr3dgi] .fl-dash-subtitle {
        font-size: 12.5px !important;
    }

    [b-ksinmr3dgi] .fl-highlight-card {
        padding: 10px 12px !important;
    }
}

/* Extra Small (≤ 480px): compact single column */
@media (max-width: 480px) {
    [b-ksinmr3dgi] .fl-dash-highlights {
        grid-template-columns: 1fr;
        gap: 6px;
        margin-top: 8px;
    }

    [b-ksinmr3dgi] .fl-highlight-card {
        padding: 8px 10px !important;
    }

    [b-ksinmr3dgi] .fl-hl-val {
        font-size: 12.5px !important;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* =============================================================
   NavMenu.razor.css — FLBill Sidebar Navigation Styles
   Matches Brandkit Rounded Floating Pill Active State
   ============================================================= */

/* ─── Nav Container ─────────────────────────────────────────── */
.fl-nav[b-k4z7wpfcm9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    padding: 8px 10px 12px;
    box-sizing: border-box;
}

.fl-nav__scroll-body[b-k4z7wpfcm9] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.fl-nav__scroll-body[b-k4z7wpfcm9]::-webkit-scrollbar {
    display: none;
}

.fl-nav__profile-container[b-k4z7wpfcm9] {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: inherit;
    z-index: 10;
}

.fl-avatar[b-k4z7wpfcm9] {
    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[b-k4z7wpfcm9] {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    font-size: 11.5px !important;
}

/* ─── Nav Groups ─────────────────────────────────────────────── */
.fl-nav__group[b-k4z7wpfcm9] {
    padding: 4px 0 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.fl-nav__group:last-child[b-k4z7wpfcm9] {
    border-bottom: none;
}

/* Push admin group to bottom */
.fl-nav__group--bottom[b-k4z7wpfcm9] {
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: none;
    padding-top: 8px;
}

/* Group Labels */
.fl-nav__group-label[b-k4z7wpfcm9] {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.35);
    padding: 8px 14px 4px;
    white-space: nowrap;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
}

/* ─── Nav Items (Rounded Floating Pills) ─────────────────────── */
.fl-nav__list[b-k4z7wpfcm9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

.fl-nav__item[b-k4z7wpfcm9],
.e-btn.fl-nav__item[b-k4z7wpfcm9] {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 9px 14px !important;
    margin: 2px 0 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    text-decoration: none !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    font-family: 'Inter', sans-serif !important;
    text-transform: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    position: relative !important;
    transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease !important;
    border: none !important;
    background: transparent !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Hover state */
.fl-nav__item:hover[b-k4z7wpfcm9],
.e-btn.fl-nav__item:hover[b-k4z7wpfcm9] {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.08) !important;
    text-decoration: none !important;
    border-radius: 8px !important;
}

/* Active / current page: Solid Royal Blue Rounded Pill */
.fl-nav__item.active[b-k4z7wpfcm9],
.e-btn.fl-nav__item.active[b-k4z7wpfcm9] {
    color: #FFFFFF !important;
    background: #1565FF !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(21, 101, 255, 0.35) !important;
}

/* ─── Icons ──────────────────────────────────────────────────── */
.fl-nav__icon[b-k4z7wpfcm9],
.fl-nav__item .e-icons[b-k4z7wpfcm9],
.fl-nav__item .fl-nav__icon[b-k4z7wpfcm9] {
    font-size: 16px;
    width: 20px;
    min-width: 20px;
    text-align: center;
    line-height: 1;
    color: #FFFFFF !important;
    opacity: 0.9;
    flex-shrink: 0;
    transition: opacity 180ms ease;
}

.fl-nav__item:hover .fl-nav__icon[b-k4z7wpfcm9],
.fl-nav__item.active .fl-nav__icon[b-k4z7wpfcm9],
.fl-nav__item:hover .e-icons[b-k4z7wpfcm9],
.fl-nav__item.active .e-icons[b-k4z7wpfcm9] {
    color: #FFFFFF !important;
    opacity: 1;
}

/* ─── Labels ─────────────────────────────────────────────────── */
.fl-nav__label[b-k4z7wpfcm9] {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.9) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.fl-nav__item.active .fl-nav__label[b-k4z7wpfcm9] {
    color: #FFFFFF !important;
    font-weight: 600;
}

/* ─── Docked / Collapsed mode ────────────────────────────────── */
:global(.e-sidebar.fl-sf-sidebar.e-dock) .fl-nav[b-k4z7wpfcm9] {
    padding: 8px 6px 16px;
}

:global(.e-sidebar.fl-sf-sidebar.e-dock) .fl-nav__item[b-k4z7wpfcm9] {
    justify-content: center;
    padding: 10px 0;
    margin: 3px 0;
    border-radius: 8px !important;
}

:global(.e-sidebar.fl-sf-sidebar.e-dock) .fl-nav__group-label[b-k4z7wpfcm9] {
    text-align: center;
    font-size: 8px;
    padding: 6px 2px 2px;
    letter-spacing: 0;
}

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

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

.fl-nav__shortcut-item[b-k4z7wpfcm9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none;
    font-size: 14px !important;
    font-weight: 500;
    border-radius: 8px;
    transition: color 150ms ease, background 150ms ease;
}

.fl-nav__shortcut-item:hover[b-k4z7wpfcm9] {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.fl-shortcut-plus[b-k4z7wpfcm9] {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1;
    color: #FFFFFF !important;
    width: 16px !important;
    display: inline-block;
    text-align: center;
}

.fl-shortcut-label[b-k4z7wpfcm9] {
    font-size: 14px !important;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85) !important;
}

.fl-nav__shortcut-item:hover .fl-shortcut-label[b-k4z7wpfcm9] {
    color: #FFFFFF !important;
}

/* ─── User Profile Footer ────────────────────────────────────── */
.fl-nav__profile-container[b-k4z7wpfcm9] {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: inherit !important;
    z-index: 10 !important;
}

.fl-nav-profile-sf-btn[b-k4z7wpfcm9],
.e-btn.fl-nav-profile-sf-btn[b-k4z7wpfcm9] {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !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[b-k4z7wpfcm9],
.e-btn.fl-nav-profile-sf-btn:hover[b-k4z7wpfcm9] {
    background: rgba(255, 255, 255, 0.08) !important;
}

.fl-nav__profile-info[b-k4z7wpfcm9] {
    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[b-k4z7wpfcm9] {
    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[b-k4z7wpfcm9] {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* /Components/Pages/AuditTrail/AuditTrailPage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════
   Audit Trail Module Styles — Reusing Products & Timber Design Tokens
   ═══════════════════════════════════════════════════════════════════════ */

.fl-audit-container[b-g582ci1tk8] {
    padding: 1.5rem 2rem;
    max-width: 1600px;
    margin: 0 auto;
}

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

.fl-header-left[b-g582ci1tk8] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fl-page-title[b-g582ci1tk8] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--fl-text-primary, #FFFFFF);
    margin: 0;
    letter-spacing: -0.02em;
}

.fl-page-subtitle[b-g582ci1tk8] {
    font-size: 0.9rem;
    color: var(--fl-text-secondary, #94A3B8);
    margin: 0;
}

.fl-header-actions[b-g582ci1tk8] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Alert */
.fl-alert-error[b-g582ci1tk8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #FCA5A5;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}

.btn-close-error[b-g582ci1tk8] {
    background: transparent;
    border: none;
    color: #FCA5A5;
    cursor: pointer;
    padding: 0.25rem;
    display: inline-flex;
    align-items: center;
}

/* Tabs Card */
.fl-tabs-card[b-g582ci1tk8] {
    background: var(--fl-bg-surface, #0F1B32);
    border: 1px solid var(--fl-border, #1C2D4A);
    border-radius: 10px;
    overflow: hidden;
}

[b-g582ci1tk8] .fl-audit-tabs.e-tab {
    border: none !important;
    background: transparent !important;
}

    /* Tab Header Bar - No divider line, smooth container integration */
    [b-g582ci1tk8] .fl-audit-tabs.e-tab .e-tab-header {
        background: var(--fl-bg-surface-2, #F8FAFC) !important;
        border: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
        padding: 6px 10px !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        user-select: none !important;
    }

.fl-theme-dark[b-g582ci1tk8]  .fl-audit-tabs.e-tab .e-tab-header {
    background: var(--fl-bg-surface-2, #142037) !important;
    border: none !important;
    border-bottom: none !important;
}

/* Remove default Syncfusion ink-bar / indicator line completely */
[b-g582ci1tk8] .fl-audit-tabs.e-tab .e-tab-header .e-indicator,
[b-g582ci1tk8] .fl-audit-tabs.e-tab .e-indicator {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Inactive Tab Pill Button */
[b-g582ci1tk8] .fl-audit-tabs.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    height: 38px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 1.1rem !important;
    margin: 0 4px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    color: var(--fl-text-secondary, #64748B) !important;
    font-weight: 500 !important;
    background: transparent !important;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-shadow: none !important;
    outline: none !important;
}

.fl-theme-dark[b-g582ci1tk8]  .fl-audit-tabs.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    color: var(--fl-text-secondary, #94A3B8) !important;
}

/* Hover State */
[b-g582ci1tk8] .fl-audit-tabs.e-tab .e-tab-header .e-toolbar-item:hover .e-tab-wrap,
[b-g582ci1tk8] .fl-audit-tabs.e-tab .e-tab-header .e-toolbar-item.e-hover .e-tab-wrap {
    color: var(--fl-text-primary, #0F172A) !important;
    background: rgba(0, 0, 0, 0.05) !important;
}

.fl-theme-dark[b-g582ci1tk8]  .fl-audit-tabs.e-tab .e-tab-header .e-toolbar-item:hover .e-tab-wrap,
.fl-theme-dark[b-g582ci1tk8]  .fl-audit-tabs.e-tab .e-tab-header .e-toolbar-item.e-hover .e-tab-wrap {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Active Tab State - Obvious Primary Blue Pill (NO Underline) */
[b-g582ci1tk8] .fl-audit-tabs.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
    color: #1565FF !important;
    background: rgba(21, 101, 255, 0.1) !important;
    border: 1px solid rgba(21, 101, 255, 0.25) !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(21, 101, 255, 0.08) !important;
}

    [b-g582ci1tk8] .fl-audit-tabs.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap * {
        color: #1565FF !important;
    }

.fl-theme-dark[b-g582ci1tk8]  .fl-audit-tabs.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
    color: #60A5FA !important;
    background: rgba(96, 165, 250, 0.15) !important;
    border-color: rgba(96, 165, 250, 0.35) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

    .fl-theme-dark[b-g582ci1tk8]  .fl-audit-tabs.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap * {
        color: #60A5FA !important;
    }

/* Disable swipe/drag gesture switching on the tab content */
[b-g582ci1tk8] .fl-audit-tabs.e-tab .e-content {
    touch-action: pan-y !important;
    user-select: text !important;
    -webkit-user-drag: none !important;
}

.fl-tab-header[b-g582ci1tk8] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
    color: inherit;
}

.fl-tab-icon[b-g582ci1tk8] {
    font-size: 1.1rem;
    line-height: 1;
    color: inherit;
}

.fl-tab-text[b-g582ci1tk8] {
    font-size: 0.92rem;
    line-height: 1;
    font-weight: 600;
    color: inherit;
}

.fl-tab-content-body[b-g582ci1tk8] {
    padding: 1.25rem;
}

/* Toolbars */
.fl-toolbar-card[b-g582ci1tk8] {
    background: var(--fl-bg-surface, #0F1B32);
    border: 1px solid var(--fl-border, #1C2D4A);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.fl-toolbar-grid[b-g582ci1tk8] {
    display: grid;
    gap: 0.75rem;
    align-items: center;
}

.fl-audit-toolbar-grid[b-g582ci1tk8] {
    grid-template-columns: 2fr 1.2fr 1.2fr 1.5fr auto;
}

.fl-quotation-toolbar-grid[b-g582ci1tk8] {
    grid-template-columns: 2fr 1.2fr 1.5fr auto;
}

.fl-search-wrap[b-g582ci1tk8],
.fl-filter-wrap[b-g582ci1tk8] {
    width: 100%;
}

.fl-refresh-btn-wrap .fl-refresh-btn[b-g582ci1tk8] {
    min-height: 38px;
    white-space: nowrap;
}

/* Grid Card */
.fl-grid-card[b-g582ci1tk8] {
    background: var(--fl-bg-surface, #0F1B32);
    border: 1px solid var(--fl-border, #1C2D4A);
    border-radius: 8px;
    overflow: hidden;
}

/* Badges & Status */
.fl-status-active[b-g582ci1tk8] {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    background: rgba(34, 197, 94, 0.15);
    color: #4ADE80;
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.8rem;
}

.fl-status-updated[b-g582ci1tk8] {
    background: rgba(56, 189, 248, 0.15) !important;
    color: #38BDF8 !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
}

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

.fl-status-deleted[b-g582ci1tk8] {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #EF4444 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

.fl-cat-pill[b-g582ci1tk8] {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    background: rgba(96, 165, 250, 0.12);
    color: #93C5FD;
    border: 1px solid rgba(96, 165, 250, 0.25);
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.8rem;
}

.fl-dims-count-badge[b-g582ci1tk8] {
    background: rgba(56, 189, 248, 0.15);
    color: #38BDF8;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* User & Name Cells */
.fl-user-cell[b-g582ci1tk8] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.fl-avatar-sm[b-g582ci1tk8] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fl-color-blue, #2563EB);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.fl-avatar-system[b-g582ci1tk8] {
    background: #475569 !important;
    color: #CBD5E1 !important;
    border-color: rgba(203, 213, 225, 0.2) !important;
}

.fl-user-info-stack[b-g582ci1tk8] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    line-height: 1.2;
}

.fl-user-label[b-g582ci1tk8] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--fl-text-primary, #FFFFFF);
}

.fl-user-role-sub[b-g582ci1tk8] {
    font-size: 0.74rem;
    color: var(--fl-text-secondary, #94A3B8);
    font-weight: 500;
}

.fl-name-cell[b-g582ci1tk8] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.fl-item-name[b-g582ci1tk8] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--fl-text-primary, #FFFFFF);
}

.fl-hsn-text[b-g582ci1tk8] {
    font-size: 0.78rem;
    color: var(--fl-text-secondary, #94A3B8);
}

.fl-uom-text[b-g582ci1tk8] {
    font-size: 0.88rem;
    color: var(--fl-text-primary, #E2E8F0);
}

.fl-code-link[b-g582ci1tk8] {
    color: var(--fl-color-blue, #38BDF8);
    font-weight: 600;
    text-decoration: none;
}

.fl-summary-ellipsis[b-g582ci1tk8] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 250px;
}

/* Action Buttons matching Products & Timber */
.fl-action-btns[b-g582ci1tk8] {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
}

/* Detail Navigation & Metadata */
.fl-detail-header-bar[b-g582ci1tk8] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.fl-back-nav-btn[b-g582ci1tk8] {
    display: inline-flex;
    align-items: center;
    color: var(--fl-color-blue, #38BDF8);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    transition: color 0.15s ease;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem 0.2rem;
}

    .fl-back-nav-btn:hover[b-g582ci1tk8] {
        color: #93C5FD;
        text-decoration: underline;
    }

.fl-meta-card[b-g582ci1tk8],
.fl-timeline-card[b-g582ci1tk8] {
    background: var(--fl-bg-surface, #0F1B32);
    border: 1px solid var(--fl-border, #1C2D4A);
    border-radius: 8px;
    overflow: hidden;
}

.fl-card-header[b-g582ci1tk8] {
    padding: 1rem 1.25rem;
    background: var(--fl-bg-surface-2, #142037);
    border-bottom: 1px solid var(--fl-border, #1C2D4A);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.fl-header-title-group[b-g582ci1tk8] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.fl-card-title[b-g582ci1tk8] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--fl-text-primary, #FFFFFF);
    margin: 0;
}

.fl-meta-summary-grid[b-g582ci1tk8] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.fl-meta-cell[b-g582ci1tk8] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Timeline */
.fl-timeline-list[b-g582ci1tk8] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.fl-timeline-entry[b-g582ci1tk8] {
    background: var(--fl-bg-surface-2, #142037);
    border: 1px solid var(--fl-border, #1C2D4A);
    border-radius: 8px;
    padding: 1rem 1.25rem;
}

.fl-timeline-entry-header[b-g582ci1tk8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--fl-border, #1C2D4A);
}

.fl-entry-meta[b-g582ci1tk8] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fl-item-identity-banner[b-g582ci1tk8] {
    background: var(--fl-bg-surface, #0F1B32);
    border: 1px solid var(--fl-border, #1C2D4A);
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.fl-item-identity-title[b-g582ci1tk8] {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    color: var(--fl-text-primary, #FFFFFF);
    flex-wrap: wrap;
    gap: 0.35rem;
}

.fl-item-sub-desc[b-g582ci1tk8] {
    font-size: 0.8rem;
    color: var(--fl-text-secondary, #94A3B8);
}

.fl-item-summary-chips[b-g582ci1tk8] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fl-item-chip[b-g582ci1tk8] {
    background: var(--fl-bg-surface, #0F1B32);
    border: 1px solid var(--fl-border, #1C2D4A);
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.fl-chip-label[b-g582ci1tk8] {
    color: var(--fl-text-secondary, #94A3B8);
}

.fl-chip-val[b-g582ci1tk8] {
    color: var(--fl-text-primary, #FFFFFF);
    font-weight: 600;
}

.fl-status-transition-box[b-g582ci1tk8] {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    background: var(--fl-bg-surface, #0F1B32);
    border: 1px solid var(--fl-border, #1C2D4A);
    border-radius: 6px;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.fl-event-summary-box[b-g582ci1tk8] {
    background: var(--fl-bg-surface, #0F1B32);
    border: 1px solid var(--fl-border, #1C2D4A);
    border-radius: 6px;
    padding: 0.75rem 1rem;
}

.fl-event-chips-row[b-g582ci1tk8] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.fl-changes-table-wrap[b-g582ci1tk8] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 6px;
    border: 1px solid var(--fl-border, #1C2D4A);
}

.fl-changes-table[b-g582ci1tk8] {
    width: 100%;
    min-width: 320px;
    margin-bottom: 0;
    font-size: 0.88rem;
    color: var(--fl-text-primary, #E2E8F0);
}

    .fl-changes-table th[b-g582ci1tk8] {
        background: rgba(0, 0, 0, 0.2);
        color: var(--fl-text-secondary, #94A3B8);
        font-size: 0.8rem;
        text-transform: uppercase;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--fl-border, #1C2D4A);
        white-space: nowrap;
    }

    .fl-changes-table td[b-g582ci1tk8] {
        padding: 0.55rem 0.75rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

.fl-field-name[b-g582ci1tk8] {
    font-weight: 600;
    color: var(--fl-text-primary, #FFFFFF);
    width: 30%;
    min-width: 100px;
}

.fl-old-val[b-g582ci1tk8] {
    color: var(--fl-color-red, #EF4444);
    text-decoration: line-through;
    opacity: 0.85;
    word-break: break-word;
}

.fl-new-val[b-g582ci1tk8] {
    color: var(--fl-color-green, #22C55E);
    font-weight: 600;
    word-break: break-word;
}

/* Dialog Summary */
.fl-dialog-summary-card[b-g582ci1tk8] {
    background: var(--fl-bg-surface-2, #142037);
    border: 1px solid var(--fl-border, #1C2D4A);
    border-radius: 8px;
    padding: 1rem;
}

.fl-dialog-summary-grid[b-g582ci1tk8] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

/* Empty & Loading */
.fl-empty-state[b-g582ci1tk8],
.fl-loading-state[b-g582ci1tk8] {
    text-align: center;
    padding: 4rem 1rem;
}

.fl-empty-icon-wrap[b-g582ci1tk8] {
    margin-bottom: 1rem;
}

.fl-empty-folder-icon[b-g582ci1tk8] {
    color: var(--fl-text-muted, #64748B);
}

.fl-empty-title[b-g582ci1tk8] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fl-text-primary, #FFFFFF);
    margin-bottom: 0.35rem;
}

.fl-empty-sub[b-g582ci1tk8],
.fl-loading-text[b-g582ci1tk8] {
    color: var(--fl-text-secondary, #94A3B8);
    font-size: 0.9rem;
}

/* ── Light Mode Tab Header ────────────────────────────────────────────── */
:root[data-theme="light"][b-g582ci1tk8]  .fl-audit-tabs.e-tab .e-tab-header,
body.light-theme[b-g582ci1tk8]  .fl-audit-tabs.e-tab .e-tab-header {
    background: #F8FAFC !important;
    border-bottom-color: #E2E8F0 !important;
}

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

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

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

/* ── Mobile Responsive Breakpoints (360px, 390px, 480px, 768px, 992px) ── */
@media (max-width: 992px) {

    .fl-toolbar-grid[b-g582ci1tk8],
    .fl-audit-toolbar-grid[b-g582ci1tk8],
    .fl-quotation-toolbar-grid[b-g582ci1tk8] {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
}

@media (max-width: 768px) {
    .fl-audit-container[b-g582ci1tk8] {
        padding: 1rem 0.75rem;
    }

    .fl-page-header[b-g582ci1tk8] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .fl-page-title[b-g582ci1tk8] {
        font-size: 1.4rem;
    }

    .fl-page-subtitle[b-g582ci1tk8] {
        font-size: 0.85rem;
    }

    .fl-header-actions[b-g582ci1tk8] {
        width: 100%;
    }

        .fl-header-actions .fl-refresh-btn[b-g582ci1tk8] {
            width: 100%;
            display: flex;
            justify-content: center;
        }

    .fl-tab-content-body[b-g582ci1tk8] {
        padding: 0.75rem 0.5rem;
    }

    .fl-grid-card[b-g582ci1tk8] {
        padding: 0.5rem;
    }

    .fl-meta-summary-grid[b-g582ci1tk8] {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .fl-dialog-summary-grid[b-g582ci1tk8] {
        grid-template-columns: 1fr 1fr;
    }

    .fl-timeline-entry[b-g582ci1tk8] {
        padding: 0.75rem 0.85rem;
    }

    .fl-timeline-entry-header[b-g582ci1tk8] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }
}

@media (max-width: 576px) {
    .fl-audit-container[b-g582ci1tk8] {
        padding: 0.5rem 0.35rem;
    }

    .fl-toolbar-grid[b-g582ci1tk8],
    .fl-audit-toolbar-grid[b-g582ci1tk8],
    .fl-quotation-toolbar-grid[b-g582ci1tk8] {
        grid-template-columns: 1fr;
        gap: 0.65rem;
        padding: 0.75rem;
    }

    .fl-search-wrap[b-g582ci1tk8],
    .fl-filter-wrap[b-g582ci1tk8],
    .fl-refresh-btn-wrap[b-g582ci1tk8] {
        width: 100%;
    }

        .fl-refresh-btn-wrap .fl-refresh-btn[b-g582ci1tk8] {
            width: 100%;
            display: flex;
            justify-content: center;
        }

    .fl-meta-summary-grid[b-g582ci1tk8] {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .fl-dialog-summary-grid[b-g582ci1tk8] {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .fl-item-chip[b-g582ci1tk8] {
        width: 100%;
        justify-content: space-between;
    }

    .fl-status-transition-box[b-g582ci1tk8] {
        width: 100%;
        justify-content: center;
    }

    .fl-card-header[b-g582ci1tk8] {
        padding: 0.75rem 0.85rem;
    }

    .fl-timeline-entry[b-g582ci1tk8] {
        padding: 0.65rem 0.75rem;
    }

    .fl-item-identity-banner[b-g582ci1tk8] {
        padding: 0.5rem 0.65rem;
    }

    .fl-item-name[b-g582ci1tk8] {
        font-size: 0.85rem;
    }

    .fl-user-label[b-g582ci1tk8] {
        font-size: 0.84rem;
    }
}

@media (max-width: 380px) {
    .fl-page-title[b-g582ci1tk8] {
        font-size: 1.25rem;
    }

    .fl-entry-meta[b-g582ci1tk8] {
        font-size: 0.78rem;
    }

    .fl-item-chip[b-g582ci1tk8] {
        font-size: 0.76rem;
    }
}
/* /Components/Pages/Customers/CustomerAddEdit.razor.rz.scp.css */
.fl-customer-page-container[b-p7olpcnt7c] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.fl-form-page-header[b-p7olpcnt7c] {
    margin-bottom: 1.5rem;
    width: 100%;
}

.breadcrumb-trail[b-p7olpcnt7c] {
    margin-bottom: 0.5rem;
}

.breadcrumb-link[b-p7olpcnt7c] {
    color: var(--fl-text-secondary, #94A3B8);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: color 0.15s ease;
}

.breadcrumb-link:hover[b-p7olpcnt7c] {
    color: var(--fl-color-blue, #60A5FA);
}

.fl-header-title-bar[b-p7olpcnt7c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 1rem;
}

.fl-header-title-bar .fl-page-title[b-p7olpcnt7c] {
    font-family: var(--fl-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--fl-text-primary, #0F172A);
    margin: 0;
    line-height: 1.25;
    word-break: break-word;
}

.fl-header-actions[b-p7olpcnt7c] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.fl-cancel-btn[b-p7olpcnt7c] {
    font-weight: 600;
    height: 38px;
    min-width: 90px;
}

.fl-save-btn[b-p7olpcnt7c] {
    font-weight: 600;
    height: 38px;
    min-width: 140px;
}

/* ── Interactive FL Cards ────────────────────────────────────────── */
.fl-card[b-p7olpcnt7c] {
    background: var(--fl-bg-surface, #FFFFFF);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--fl-border, #E2E8F0);
    margin-bottom: 1.5rem;
    overflow: hidden;
    max-width: 100%;
    min-width: 0;
}

.fl-card-header[b-p7olpcnt7c] {
    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[b-p7olpcnt7c] {
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.fl-hl-icon[b-p7olpcnt7c] {
    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[b-p7olpcnt7c] {
    background: rgba(37, 99, 235, 0.12);
    color: var(--fl-color-blue, #1565FF);
}

.fl-hl-bg--teal[b-p7olpcnt7c] {
    background: rgba(13, 148, 136, 0.12);
    color: #0D9488;
}

.fl-hl-bg--purple[b-p7olpcnt7c] {
    background: rgba(147, 51, 234, 0.12);
    color: #9333EA;
}

.fl-card-body[b-p7olpcnt7c] {
    padding: 1.5rem;
}

.fl-card-footer[b-p7olpcnt7c] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--fl-border, #E2E8F0);
    background: var(--fl-bg-surface-2, #F8FAFC);
}

.fl-field-hint[b-p7olpcnt7c] {
    display: block;
    font-size: 0.78rem;
    color: var(--fl-text-secondary, #64748B);
    margin-top: 0.35rem;
}

/* ── Sticky Sidebar & Live Preview Card ─────────────────────────── */
.fl-sticky-sidebar[b-p7olpcnt7c] {
    position: sticky;
    top: 1rem;
}

.fl-preview-card[b-p7olpcnt7c] {
    border-top: 3px solid var(--fl-color-blue, #1565FF);
}

.fl-preview-badge[b-p7olpcnt7c] {
    background: rgba(37, 99, 235, 0.1);
    color: var(--fl-color-blue, #1565FF);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
}

.fl-preview-hero[b-p7olpcnt7c] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px dashed var(--fl-border, #E2E8F0);
    margin-bottom: 1.25rem;
}

.fl-preview-avatar[b-p7olpcnt7c] {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1565FF, #23A8FF);
    color: #FFFFFF;
    font-family: var(--fl-font-display, 'Plus Jakarta Sans', sans-serif);
    font-weight: 800;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(21, 101, 255, 0.25);
}

.fl-preview-info[b-p7olpcnt7c] {
    min-width: 0;
    flex: 1;
}

.fl-preview-name[b-p7olpcnt7c] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--fl-text-primary, #0F172A);
    margin: 0 0 0.4rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fl-preview-meta[b-p7olpcnt7c] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.fl-pill-badge[b-p7olpcnt7c] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
}

.fl-pill-code[b-p7olpcnt7c] {
    background: var(--fl-bg-surface-2, #F1F5F9);
    color: var(--fl-text-secondary, #475569);
    font-family: monospace;
}

.fl-pill-b2b[b-p7olpcnt7c] {
    background: rgba(147, 51, 234, 0.12);
    color: #9333EA;
}

.fl-pill-b2c[b-p7olpcnt7c] {
    background: rgba(13, 148, 136, 0.12);
    color: #0D9488;
}

.fl-status-indicator[b-p7olpcnt7c] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 99px;
}

.fl-status-active[b-p7olpcnt7c] {
    background: rgba(34, 197, 94, 0.15);
    color: #16A34A;
}

.fl-status-inactive[b-p7olpcnt7c] {
    background: rgba(245, 165, 36, 0.15) !important;
    color: #D97706 !important;
}

.fl-status-blocked[b-p7olpcnt7c] {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #DC2626 !important;
}

.fl-preview-details-list[b-p7olpcnt7c] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.fl-preview-item[b-p7olpcnt7c] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.fl-preview-icon[b-p7olpcnt7c] {
    font-size: 1.05rem;
    color: var(--fl-color-blue, #1565FF);
    margin-top: 0.1rem;
    width: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fl-preview-item-content[b-p7olpcnt7c] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fl-preview-label[b-p7olpcnt7c] {
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--fl-text-secondary, #64748B);
}

.fl-preview-val[b-p7olpcnt7c] {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--fl-text-primary, #0F172A);
    word-break: break-word;
}

/* ── Tips Card ───────────────────────────────────────────────────── */
.fl-tips-card[b-p7olpcnt7c] {
    background: linear-gradient(135deg, rgba(21, 101, 255, 0.04), rgba(35, 168, 255, 0.02));
    border: 1px solid rgba(21, 101, 255, 0.15);
}

.fl-tips-title[b-p7olpcnt7c] {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--fl-text-primary, #0F172A);
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.fl-tips-list[b-p7olpcnt7c] {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.84rem;
    color: var(--fl-text-secondary, #475569);
    line-height: 1.55;
}

.fl-tips-list li[b-p7olpcnt7c] {
    margin-bottom: 0.4rem;
}

@media (max-width: 992px) {
    .fl-sticky-sidebar[b-p7olpcnt7c] {
        position: static;
        margin-top: 1rem;
    }
}

@media (max-width: 768px) {
    .fl-customer-page-container[b-p7olpcnt7c] {
        padding: 1rem 0.75rem 5rem 0.75rem;
    }

    .fl-header-title-bar[b-p7olpcnt7c] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.85rem !important;
    }

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

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

    .fl-header-actions .fl-cancel-btn[b-p7olpcnt7c] {
        flex: 1 !important;
        min-width: 0 !important;
        height: 40px !important;
    }

    .fl-header-actions .fl-save-btn[b-p7olpcnt7c] {
        flex: 2 !important;
        min-width: 0 !important;
        height: 40px !important;
    }

    .fl-card-body[b-p7olpcnt7c] {
        padding: 1.25rem 1rem;
    }
}
/* /Components/Pages/Customers/CustomerDetail.razor.rz.scp.css */
/* Specific layout adjustments for Customer Detail (Core typography and styling inherited from app.css) */
.fl-customer-detail-container[b-2efpop7cv7] {
    padding: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

.fl-page-header[b-2efpop7cv7] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.fl-avatar-large[b-2efpop7cv7] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1565FF 0%, #23A8FF 100%);
    color: #FFFFFF;
    font-size: 1.2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(21, 101, 255, 0.25);
}

.fl-header-actions[b-2efpop7cv7] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.fl-header-actions .e-btn[b-2efpop7cv7] {
    white-space: nowrap !important;
    font-size: 0.85rem !important;
    padding: 0.45rem 0.85rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.fl-edit-btn[b-2efpop7cv7] {
    font-weight: 700;
}

.fl-name-title[b-2efpop7cv7] {
    color: var(--fl-text-primary, #0F172A) !important;
}

.fl-address-line[b-2efpop7cv7] {
    color: var(--fl-text-primary, #0F172A) !important;
}

.fl-detail-grid[b-2efpop7cv7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 1.5rem;
}

.fl-card[b-2efpop7cv7] {
    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.05);
    overflow: hidden;
}

.fl-card-header[b-2efpop7cv7] {
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--fl-border, #E2E8F0);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fl-card-title[b-2efpop7cv7] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--fl-text-primary, #0F172A);
    margin: 0;
}

.fl-card-body[b-2efpop7cv7] {
    padding: 1.5rem;
}

.fl-info-row[b-2efpop7cv7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px dashed var(--fl-border-soft, #EEF2F7);
}

.fl-info-row:last-child[b-2efpop7cv7] {
    border-bottom: none;
}

.fl-info-label[b-2efpop7cv7] {
    font-size: 0.88rem;
    color: var(--fl-text-secondary, #475569);
    font-weight: 500;
}

.fl-info-val[b-2efpop7cv7] {
    font-size: 0.92rem;
    color: var(--fl-text-primary, #0F172A);
    text-align: right;
    word-break: break-word;
}

.fl-address-box[b-2efpop7cv7] {
    padding: 1rem;
    background: var(--fl-bg-surface-2, #F8FAFC);
    border: 1px solid var(--fl-border, #E2E8F0);
    border-radius: 10px;
    font-family: var(--fl-font-ui, 'Inter', sans-serif);
}

@media (max-width: 768px) {
    .fl-customer-detail-container[b-2efpop7cv7] {
        padding: 1rem 0.75rem 5rem 0.75rem;
    }

    .fl-detail-grid[b-2efpop7cv7] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .fl-page-header[b-2efpop7cv7] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
    }

    .fl-header-actions[b-2efpop7cv7] {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .fl-header-actions .e-btn[b-2efpop7cv7] {
        flex: 1 1 calc(50% - 0.25rem) !important;
        min-width: 120px !important;
        height: 40px !important;
        white-space: nowrap !important;
    }

    .fl-card-header[b-2efpop7cv7] {
        padding: 1rem 1.15rem !important;
    }

    .fl-card-body[b-2efpop7cv7] {
        padding: 1rem 1.15rem !important;
    }

    .fl-info-row[b-2efpop7cv7] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.35rem !important;
        padding: 0.65rem 0 !important;
    }

    .fl-info-val[b-2efpop7cv7] {
        text-align: left !important;
        width: 100% !important;
    }
}
/* /Components/Pages/Customers/CustomersList.razor.rz.scp.css */
/* Specific layout adjustments for Customers List (Core typography and styling inherited from app.css) */
.fl-customers-container[b-ybbwu9g155] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.fl-grid-card[b-ybbwu9g155] {
    padding: 1.25rem;
    overflow-x: hidden !important;
    max-width: 100%;
    min-width: 0;
}

.fl-action-btns[b-ybbwu9g155] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 768px) {
    .fl-customers-container[b-ybbwu9g155] {
        padding: 1rem 0.75rem 5rem 0.75rem !important;
    }

    .fl-grid-card[b-ybbwu9g155] {
        padding: 0.5rem !important;
    }

    .fl-action-btns[b-ybbwu9g155] {
        justify-content: flex-start !important;
    }
}

/* /Components/Pages/ForgotPassword.razor.rz.scp.css */
[b-6nmmft22dx] .fl-auth-screen {
    position: relative;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    background: var(--fl-bg-app);
    overflow: hidden !important;
    display: flex;
}

[b-6nmmft22dx] .fl-auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

[b-6nmmft22dx] .fl-auth-hero {
    order: 2;
    background-image: linear-gradient(180deg, rgba(4, 12, 42, 0.08) 0%, rgba(4, 12, 42, 0.15) 25%, rgba(2, 8, 28, 0.35) 60%, rgba(0, 0, 0, 0.55) 100%), url('/Login%20hero%20BG.png');
    background-size: cover;
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #0A1430;
    position: relative;
    padding: 56px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: #FFFFFF;
    height: 100vh;
    box-sizing: border-box;
}

[b-6nmmft22dx] .fl-hero-bg-overlay {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(ellipse at 99% 76%, rgba(20, 103, 226, -0.75) 0%, transparent 100%), 
        linear-gradient(to right, transparent 100%, rgba(5, 36, 54, 32.55) 0%);
    pointer-events: none;
    z-index: 1;
}

[b-6nmmft22dx] .fl-hero-ambient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
    pointer-events: none;
}

    [b-6nmmft22dx] .fl-hero-ambient-orb.orb-1 {
        width: 550px;
        height: 550px;
        background: radial-gradient(circle, #1565FF 0%, #0D47A1 60%, transparent 100%);
        top: -120px;
        right: -120px;
        opacity: 0.45;
        filter: blur(100px);
    }

    [b-6nmmft22dx] .fl-hero-ambient-orb.orb-2 {
        width: 420px;
        height: 420px;
        background: radial-gradient(circle, #16D3D1 0%, #0891B2 60%, transparent 100%);
        bottom: -80px;
        left: -80px;
        opacity: 0.35;
        filter: blur(90px);
    }

    [b-6nmmft22dx] .fl-hero-ambient-orb.orb-3 {
        position: absolute;
        width: 280px;
        height: 280px;
        background: radial-gradient(circle, #6366F1 0%, transparent 100%);
        bottom: 30%;
        right: -40px;
        opacity: 0.2;
        filter: blur(70px);
        border-radius: 50%;
        pointer-events: none;
    }

/* ─── Hero Content & Showcase ────────────────────────────────── */
[b-6nmmft22dx] .fl-hero-content {
    position: relative;
    z-index: 2;
    max-width: 520px;
    margin: 0 auto;
}

/* Feature Badge Pill */
[b-6nmmft22dx] .fl-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    font-size: 12px;
    font-weight: 600;
    color: #E2E8F0;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transition: all 300ms ease;
}

    [b-6nmmft22dx] .fl-hero-badge:hover {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.25);
        transform: translateY(-2px);
    }

[b-6nmmft22dx] .fl-badge-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.8);
    animation: fl-pulse-live-b-6nmmft22dx 2s infinite ease-in-out;
}

@keyframes fl-pulse-live-b-6nmmft22dx {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.4);
        opacity: 0.6;
    }
}

[b-6nmmft22dx] .fl-hero-title {
    font-family: var(--fl-font-display);
    font-size: 42px;
    font-weight: 900;
    line-height: 1.10;
    color: #FFFFFF;
    margin-bottom: 16px;
    letter-spacing: -1px;
}

[b-6nmmft22dx] .fl-hero-gradient-text {
    background: linear-gradient(135deg, #38BDF8 0%, #22D3EE 50%, #818CF8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[b-6nmmft22dx] .fl-hero-subtitle {
    font-size: 15px;
    line-height: 1.60;
    color: rgba(255, 255, 255, 0.80);
    margin-bottom: 32px;
    font-weight: 400;
}

/* Showcase Container */
[b-6nmmft22dx] .fl-hero-showcase {
    position: relative;
    margin-bottom: 24px;
}

/* Floating Micro Toasts via SfCard */
[b-6nmmft22dx] .fl-floating-toast.e-card {
    position: absolute;
    z-index: 10;
    background: rgba(8, 18, 44, 0.88) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 14px !important;
    padding: 10px 16px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.50), 0 0 24px rgba(21, 101, 255, 0.25) !important;
}

[b-6nmmft22dx] .fl-toast--top {
    top: -18px;
    right: -14px;
    animation: fl-float-top-b-6nmmft22dx 5s ease-in-out infinite;
}

[b-6nmmft22dx] .fl-toast--bottom {
    bottom: -16px;
    left: -14px;
    animation: fl-float-bottom-b-6nmmft22dx 6s ease-in-out infinite;
}

@keyframes fl-float-top-b-6nmmft22dx {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes fl-float-bottom-b-6nmmft22dx {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}

[b-6nmmft22dx] .fl-toast-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

[b-6nmmft22dx] .fl-toast-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

[b-6nmmft22dx] .fl-toast-icon--green {
    background: rgba(34, 197, 94, 0.30);
    color: #22C55E;
}

[b-6nmmft22dx] .fl-toast-icon--blue {
    background: rgba(35, 168, 255, 0.30);
    color: #38BDF8;
}

[b-6nmmft22dx] .fl-toast-title {
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.3;
}

[b-6nmmft22dx] .fl-toast-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.70);
}

/* Floating Glass Main Widget via SfCard */
[b-6nmmft22dx] .fl-hero-widget.e-card {
    background: rgba(255, 255, 255, 0.09) !important;
    backdrop-filter: blur(32px) !important;
    -webkit-backdrop-filter: blur(32px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 20px !important;
    padding: 20px 24px !important;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.45), 
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

    [b-6nmmft22dx] .fl-hero-widget.e-card .e-card-content {
        padding: 0 !important;
    }

    [b-6nmmft22dx] .fl-hero-widget.e-card:hover {
        transform: translateY(-4px);
        box-shadow: 
            0 28px 80px rgba(0, 0, 0, 0.55), 
            inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    }

[b-6nmmft22dx] .fl-widget-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

[b-6nmmft22dx] .fl-widget-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(35, 168, 255, 0.30) 0%, rgba(56, 189, 248, 0.20) 100%);
    color: #38BDF8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 1px solid rgba(35, 168, 255, 0.25);
}

[b-6nmmft22dx] .fl-widget-title {
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0.3px;
}

[b-6nmmft22dx] .fl-widget-sub {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
}

[b-6nmmft22dx] .fl-status-pill.fl-status--paid {
    background: rgba(34, 197, 94, 0.20);
    color: #22C55E;
    border: 1px solid rgba(34, 197, 94, 0.40);
    border-radius: 9999px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Sparkline Chart */
[b-6nmmft22dx] .fl-widget-chart {
    width: 100%;
    height: 58px;
    margin-bottom: 16px;
}

[b-6nmmft22dx] .fl-sparkline-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

[b-6nmmft22dx] .fl-chart-pulse {
    animation: fl-dot-pulse-b-6nmmft22dx 2s infinite;
}

@keyframes fl-dot-pulse-b-6nmmft22dx {
    0%, 100% {
        transform: scale(1);
        opacity: 0.35;
    }

    50% {
        transform: scale(1.6);
        opacity: 0.8;
    }
}

[b-6nmmft22dx] .fl-widget-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

[b-6nmmft22dx] .fl-widget-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

[b-6nmmft22dx] .fl-widget-val {
    font-family: var(--fl-font-display);
    font-size: 16px;
    font-weight: 800;
    color: #FFFFFF;
    margin-top: 4px;
}

[b-6nmmft22dx] .fl-widget-trend {
    font-size: 11px;
    font-weight: 700;
    margin-top: 2px;
}

/* Trust Bar */
[b-6nmmft22dx] .fl-hero-trust {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.80);
    margin-top: 16px;
}

[b-6nmmft22dx] .fl-trust-rating {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-6nmmft22dx] .fl-stars {
    color: #FBBF24;
    letter-spacing: 2px;
    font-size: 12px;
}

[b-6nmmft22dx] .fl-rating-score {
    font-weight: 800;
    color: #FFFFFF;
}

[b-6nmmft22dx] .fl-trust-divider {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.25);
}

[b-6nmmft22dx] .fl-trust-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
}

    [b-6nmmft22dx] .fl-trust-text strong {
        color: #FFFFFF;
        font-weight: 700;
    }

/* ═══════════════════════════════════════════════════════════
   FORM PANEL (LEFT SIDE) - PREMIUM STYLING
   ═══════════════════════════════════════════════════════════ */

[b-6nmmft22dx] .fl-auth-card.e-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 100%;
    max-width: 420px;
    padding: 0 !important;
}

    [b-6nmmft22dx] .fl-auth-card.e-card .e-card-content {
        padding: 0 !important;
    }

[b-6nmmft22dx] .fl-auth-checkbox.e-checkbox-wrapper .e-label {
    font-size: 13px !important;
    color: var(--fl-text-secondary) !important;
    font-weight: 500 !important;
}

[b-6nmmft22dx] .fl-auth-checkbox.e-checkbox-wrapper .e-frame {
    border-radius: 4px !important;
}

[b-6nmmft22dx] .e-btn.fl-pwd-toggle {
    position: absolute;
    right: 10px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--fl-text-muted) !important;
    padding: 0 4px !important;
    min-height: auto !important;
    height: auto !important;
    z-index: 5;
}

/* ─── Form Panel (LEFT SIDE) ─────────────────────────── */
[b-6nmmft22dx] .fl-auth-form-wrap {
    order: 1;
    background: var(--fl-bg-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 48px;
    position: relative;
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
}

[b-6nmmft22dx] .fl-auth-top-bar {
    position: absolute;
    top: 28px;
    right: 32px;
    z-index: 10;
    display: flex;
    align-items: center;
}

[b-6nmmft22dx] .fl-theme-toggle-btn.e-btn {
    height: 40px !important;
    padding: 0 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
    background: var(--fl-bg-surface-2) !important;
    border: 1px solid var(--fl-border) !important;
    color: var(--fl-text-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 200ms ease !important;
}

    [b-6nmmft22dx] .fl-theme-toggle-btn.e-btn:hover {
        background: var(--fl-royal) !important;
        color: #FFFFFF !important;
        border-color: var(--fl-royal) !important;
        box-shadow: 0 6px 16px rgba(21, 101, 255, 0.30) !important;
        transform: translateY(-1px);
    }

[b-6nmmft22dx] .fl-theme-toggle-content {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

[b-6nmmft22dx] .fl-theme-icon {
    display: inline-block !important;
    flex-shrink: 0 !important;
}

[b-6nmmft22dx] .fl-auth-card {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* =============================================================
   BRAND LOGO STYLING
   ============================================================= */

[b-6nmmft22dx] .fl-form-brand,
.fl-form-brand[b-6nmmft22dx] {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    justify-content: center;
}

.fl-theme-light .fl-form-logo[b-6nmmft22dx],
.fl-theme-light[b-6nmmft22dx]  .fl-form-logo,
.fl-form-logo[b-6nmmft22dx],
[b-6nmmft22dx] .fl-form-logo {
    height: 110px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    display: block;
    filter: none !important;
    opacity: 1 !important;
}

.fl-theme-dark .fl-form-logo[b-6nmmft22dx],
.fl-theme-dark[b-6nmmft22dx]  .fl-form-logo,
.fl-auth-screen.fl-theme-dark .fl-form-logo[b-6nmmft22dx],
[b-6nmmft22dx] .fl-auth-screen.fl-theme-dark .fl-form-logo {
    height: 120px;
    width: 100%;
    margin-left: -15px;
    max-width: 200px;
    object-fit: contain;
    display: block;
    filter: none !important;
    opacity: 1 !important;
}

[b-6nmmft22dx] .fl-auth-title {
    font-family: var(--fl-font-display);
    font-size: 28px;
    font-weight: 900;
    color: var(--fl-text-primary);
    margin: 0 0 8px;
    letter-spacing: -0.5px;
}

[b-6nmmft22dx] .fl-auth-sub {
    font-size: 14px;
    color: var(--fl-text-secondary);
    margin: 0 0 28px;
    line-height: 1.5;
    font-weight: 400;
}

[b-6nmmft22dx] .fl-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

[b-6nmmft22dx] .fl-field-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--fl-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[b-6nmmft22dx] .fl-input-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

[b-6nmmft22dx] .fl-field-icon {
    position: absolute;
    left: 14px;
    font-size: 15px;
    color: var(--fl-text-muted);
    z-index: 5;
    pointer-events: none;
}

[b-6nmmft22dx] .fl-auth-input {
    width: 100% !important;
}

    [b-6nmmft22dx] .fl-auth-input input.e-input {
        padding-left: 40px !important;
        height: 42px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
        border: 1.5px solid var(--fl-border) !important;
        background: var(--fl-bg-surface-2) !important;
        color: var(--fl-text-primary) !important;
        transition: all 200ms ease !important;
        font-weight: 500;
    }

    [b-6nmmft22dx] .fl-auth-input input.e-input:focus {
        border-color: var(--fl-royal) !important;
        box-shadow: 0 0 0 3px rgba(21, 101, 255, 0.10) !important;
    }

    [b-6nmmft22dx] .fl-auth-input input.e-input::placeholder {
        color: var(--fl-text-muted);
    }

[b-6nmmft22dx] .fl-pwd-toggle {
    position: absolute;
    right: 14px;
    background: none;
    border: none;
    color: var(--fl-text-muted);
    cursor: pointer;
    z-index: 5;
    padding: 0;
    transition: color 200ms ease;
}

    [b-6nmmft22dx] .fl-pwd-toggle:hover {
        color: var(--fl-text-primary);
    }

[b-6nmmft22dx] .fl-btn-auth.e-btn {
    width: 100% !important;
    height: 44px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #1565FF 0%, #0052EA 100%) !important;
    box-shadow: 0 6px 20px rgba(21, 101, 255, 0.40) !important;
    color: #FFFFFF !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    text-transform: none !important;
    transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    border: none !important;
    margin-top: 8px;
}

    [b-6nmmft22dx] .fl-btn-auth.e-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(21, 101, 255, 0.50) !important;
    }

    [b-6nmmft22dx] .fl-btn-auth.e-btn:active {
        transform: translateY(0);
        box-shadow: 0 4px 12px rgba(21, 101, 255, 0.35) !important;
    }

[b-6nmmft22dx] .fl-btn-auth-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
}

/* ─── Circular Round Loading Spinner ───────────────────────────── */
[b-6nmmft22dx] .fl-round-spinner,
.fl-round-spinner[b-6nmmft22dx] {
    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-b-6nmmft22dx 0.75s linear infinite !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

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

[b-6nmmft22dx] .fl-auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0 18px;
    color: var(--fl-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

    [b-6nmmft22dx] .fl-auth-divider::before,
    [b-6nmmft22dx] .fl-auth-divider::after {
        content: '';
        flex: 1;
        border-bottom: 1.5px solid var(--fl-border);
    }

    [b-6nmmft22dx] .fl-divider-text,
    [b-6nmmft22dx] .fl-auth-divider span {
        padding: 0 14px;
    }

[b-6nmmft22dx] .fl-sso-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

[b-6nmmft22dx] .e-btn.fl-btn-sso,
[b-6nmmft22dx] .fl-btn-sso {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    height: 42px !important;
    background: var(--fl-bg-surface-2) !important;
    border: 1.5px solid var(--fl-border) !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--fl-text-primary) !important;
    text-transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    cursor: pointer !important;
    transition: all 200ms ease !important;
}

    [b-6nmmft22dx] .e-btn.fl-btn-sso:hover,
    [b-6nmmft22dx] .fl-btn-sso:hover {
        background: var(--fl-border-soft) !important;
        border-color: var(--fl-royal) !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(21, 101, 255, 0.15) !important;
    }

[b-6nmmft22dx] .fl-sso-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
}

[b-6nmmft22dx] .fl-sso-icon,
.fl-sso-icon[b-6nmmft22dx] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

[b-6nmmft22dx] .fl-sso-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--fl-text-primary) !important;
}

[b-6nmmft22dx] .e-btn.fl-auth-link-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--fl-royal) !important;
    text-transform: none !important;
    min-height: auto !important;
    height: auto !important;
    cursor: pointer !important;
    transition: all 200ms ease !important;
}

    [b-6nmmft22dx] .e-btn.fl-auth-link-btn:hover {
        text-decoration: underline !important;
        background: transparent !important;
        color: var(--fl-royal) !important;
    }

[b-6nmmft22dx] .fl-auth-card__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 13px;
    color: var(--fl-text-secondary);
}

[b-6nmmft22dx] .fl-footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

[b-6nmmft22dx] .fl-footer-dot {
    color: var(--fl-text-muted);
}

[b-6nmmft22dx] .e-btn.fl-footer-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 12px !important;
    color: var(--fl-text-muted) !important;
    text-transform: none !important;
    min-height: auto !important;
    height: auto !important;
    transition: all 200ms ease !important;
}

    [b-6nmmft22dx] .e-btn.fl-footer-btn:hover {
        color: var(--fl-royal) !important;
        background: transparent !important;
        text-decoration: underline !important;
    }

[b-6nmmft22dx] .fl-auth-footer-notes {
    margin-top: 20px;
    text-align: center;
    font-size: 11px;
    color: var(--fl-text-muted);
    display: flex;
    flex-direction: column;
    gap: 4px;
    letter-spacing: 0.3px;
}

/* ─── Dark Theme Mode ────────────────────────────────────── */
.fl-auth-screen.fl-theme-dark[b-6nmmft22dx],
[b-6nmmft22dx] .fl-auth-screen.fl-theme-dark,
.fl-theme-dark.fl-auth-screen[b-6nmmft22dx],
.fl-theme-dark .fl-auth-screen[b-6nmmft22dx],
[b-6nmmft22dx] .fl-theme-dark .fl-auth-screen {
    --fl-bg-app: #01071B;
    --fl-bg-surface: #01071B;
    --fl-bg-surface-2: #07122D;
    --fl-border: #101E42;
    --fl-border-soft: #0A1430;
    --fl-text-primary: #E2E8F0;
    --fl-text-secondary: #94A3B8;
    --fl-text-muted: #64748B;
    background: #01071B !important;
}

    .fl-auth-screen.fl-theme-dark .fl-auth-form-wrap[b-6nmmft22dx],
    [b-6nmmft22dx] .fl-auth-screen.fl-theme-dark .fl-auth-form-wrap,
    .fl-theme-dark .fl-auth-form-wrap[b-6nmmft22dx],
    [b-6nmmft22dx] .fl-theme-dark .fl-auth-form-wrap {
        background: #01071B !important;
    }

    .fl-auth-screen.fl-theme-dark .fl-auth-title[b-6nmmft22dx],
    [b-6nmmft22dx] .fl-auth-screen.fl-theme-dark .fl-auth-title,
    .fl-theme-dark .fl-auth-title[b-6nmmft22dx],
    [b-6nmmft22dx] .fl-theme-dark .fl-auth-title {
        color: #FFFFFF !important;
    }

    .fl-auth-screen.fl-theme-dark .fl-auth-sub[b-6nmmft22dx],
    [b-6nmmft22dx] .fl-auth-screen.fl-theme-dark .fl-auth-sub,
    .fl-theme-dark .fl-auth-sub[b-6nmmft22dx],
    [b-6nmmft22dx] .fl-theme-dark .fl-auth-sub {
        color: #94A3B8 !important;
    }

    .fl-auth-screen.fl-theme-dark .fl-field-label[b-6nmmft22dx],
    [b-6nmmft22dx] .fl-auth-screen.fl-theme-dark .fl-field-label,
    .fl-theme-dark .fl-field-label[b-6nmmft22dx],
    [b-6nmmft22dx] .fl-theme-dark .fl-field-label {
        color: #94A3B8 !important;
    }

    .fl-auth-screen.fl-theme-dark .fl-field-icon[b-6nmmft22dx],
    [b-6nmmft22dx] .fl-auth-screen.fl-theme-dark .fl-field-icon,
    .fl-theme-dark .fl-field-icon[b-6nmmft22dx],
    [b-6nmmft22dx] .fl-theme-dark .fl-field-icon {
        color: #64748B !important;
    }

    .fl-auth-screen.fl-theme-dark .fl-auth-footer[b-6nmmft22dx],
    [b-6nmmft22dx] .fl-auth-screen.fl-theme-dark .fl-auth-footer,
    .fl-theme-dark .fl-auth-footer[b-6nmmft22dx],
    [b-6nmmft22dx] .fl-theme-dark .fl-auth-footer {
        color: #64748B !important;
    }

    .fl-auth-screen.fl-theme-dark .fl-theme-toggle-btn.e-btn[b-6nmmft22dx],
    [b-6nmmft22dx] .fl-auth-screen.fl-theme-dark .fl-theme-toggle-btn.e-btn {
        background: #07122D !important;
        border-color: #101E42 !important;
        color: #E2E8F0 !important;
    }

    .fl-auth-screen.fl-theme-dark .fl-auth-input input.e-input[b-6nmmft22dx],
    [b-6nmmft22dx] .fl-auth-screen.fl-theme-dark .fl-auth-input input.e-input {
        background: #07122D !important;
        border-color: #101E42 !important;
        color: #E2E8F0 !important;
    }

    .fl-auth-screen.fl-theme-dark .fl-btn-sso[b-6nmmft22dx],
    [b-6nmmft22dx] .fl-auth-screen.fl-theme-dark .fl-btn-sso {
        background: #07122D !important;
        border-color: #101E42 !important;
        color: #E2E8F0 !important;
    }

        .fl-auth-screen.fl-theme-dark .fl-btn-sso:hover[b-6nmmft22dx],
        [b-6nmmft22dx] .fl-auth-screen.fl-theme-dark .fl-btn-sso:hover {
            background: #0D1D45 !important;
            border-color: var(--fl-royal) !important;
        }

    .fl-auth-screen.fl-theme-dark .fl-auth-hero[b-6nmmft22dx],
    [b-6nmmft22dx] .fl-auth-screen.fl-theme-dark .fl-auth-hero {
        background-image: linear-gradient(180deg, rgba(1, 7, 27, 0.08) 0%, rgba(1, 7, 27, 0.15) 25%, rgba(1, 7, 27, 0.35) 60%, rgba(0, 0, 0, 0.55) 100%), url('/Login%20hero%20BG.png');
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
        background-color: #01071B !important;
    }

/* ═══════════════════════════════════════════════════════════
   TABLET RESPONSIVE (768px - 1023px)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
    [b-6nmmft22dx] .fl-auth-screen {
        min-height: 100vh !important;
        height: auto !important;
        overflow: hidden !important;
    }

    [b-6nmmft22dx] .fl-form-brand,
    .fl-form-brand[b-6nmmft22dx] {
        display: flex;
        align-items: center;
        margin-top: 12px;
        justify-content: center;
    }

    [b-6nmmft22dx] .fl-auth-top-bar {
        top: 16px !important;
        right: 10px !important;
    }

    [b-6nmmft22dx] .fl-auth-grid {
        grid-template-columns: 1fr 1fr !important;
        min-height: 100vh !important;
        height: 100vh !important;
        max-height: 100vh !important;
    }

    [b-6nmmft22dx] .fl-auth-hero {
        display: flex !important;
        order: 2 !important;
        padding: 32px 28px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    [b-6nmmft22dx] .fl-hero-content {
        max-width: 100% !important;
        margin: 0 !important;
    }

    [b-6nmmft22dx] .fl-hero-title {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
    }

    [b-6nmmft22dx] .fl-hero-subtitle {
        font-size: 12px !important;
        line-height: 1.5 !important;
        margin-bottom: 18px !important;
    }

    [b-6nmmft22dx] .fl-hero-badge {
        font-size: 11px !important;
        margin-bottom: 14px !important;
    }

    [b-6nmmft22dx] .fl-hero-widget.e-card {
        padding: 14px 16px !important;
        margin-bottom: 16px !important;
    }

    [b-6nmmft22dx] .fl-widget-header {
        gap: 10px !important;
        margin-bottom: 10px !important;
    }

    [b-6nmmft22dx] .fl-widget-icon {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }

    [b-6nmmft22dx] .fl-widget-title {
        font-size: 12px !important;
    }

    [b-6nmmft22dx] .fl-widget-sub {
        font-size: 10px !important;
    }

    [b-6nmmft22dx] .fl-widget-chart {
        height: 40px !important;
        margin-bottom: 10px !important;
    }

    [b-6nmmft22dx] .fl-widget-metrics {
        gap: 8px !important;
        padding-top: 10px !important;
    }

    [b-6nmmft22dx] .fl-widget-label {
        font-size: 9.5px !important;
    }

    [b-6nmmft22dx] .fl-widget-val {
        font-size: 13px !important;
    }

    [b-6nmmft22dx] .fl-widget-trend {
        font-size: 9px !important;
    }

    [b-6nmmft22dx] .fl-hero-trust {
        font-size: 11px !important;
        gap: 10px !important;
        margin-top: 8px !important;
    }

    [b-6nmmft22dx] .fl-auth-form-wrap {
        order: 1 !important;
        height: 100vh !important;
        overflow-y: auto !important;
        padding: 20px 28px !important;
    }

    [b-6nmmft22dx] .fl-auth-card {
        max-width: 380px !important;
    }

    [b-6nmmft22dx] .fl-auth-title {
        font-size: 20px !important;
    }

    [b-6nmmft22dx] .fl-auth-sub {
        font-size: 12px !important;
    }

    [b-6nmmft22dx] .fl-hero-ambient-orb.orb-1 {
        width: 350px !important;
        height: 350px !important;
        top: -100px !important;
        right: -100px !important;
    }

    [b-6nmmft22dx] .fl-hero-ambient-orb.orb-2 {
        width: 280px !important;
        height: 280px !important;
        bottom: -60px !important;
        left: -60px !important;
    }

    [b-6nmmft22dx] .fl-hero-ambient-orb.orb-3 {
        width: 200px !important;
        height: 200px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP RESPONSIVE (1024px - 1199px)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1199px) {
    [b-6nmmft22dx] .fl-auth-hero {
        padding: 48px 40px !important;
        height: 100vh !important;
        overflow:hidden;
        justify-content: center !important;
    }

    [b-6nmmft22dx] .fl-hero-content {
        max-width: 480px !important;
        width: 100% !important;
    }

    [b-6nmmft22dx] .fl-hero-title {
        font-size: 32px !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }

    [b-6nmmft22dx] .fl-hero-subtitle {
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin-bottom: 24px !important;
    }

    [b-6nmmft22dx] .fl-hero-badge {
        font-size: 11.5px !important;
        margin-bottom: 18px !important;
    }

    [b-6nmmft22dx] .fl-hero-widget.e-card {
        padding: 16px 20px !important;
        margin-bottom: 20px !important;
    }

    [b-6nmmft22dx] .fl-widget-header {
        gap: 11px !important;
        margin-bottom: 11px !important;
    }

    [b-6nmmft22dx] .fl-widget-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 15px !important;
    }

    [b-6nmmft22dx] .fl-widget-title {
        font-size: 13px !important;
    }

    [b-6nmmft22dx] .fl-widget-sub {
        font-size: 10.5px !important;
    }

    [b-6nmmft22dx] .fl-widget-chart {
        height: 50px !important;
        margin-bottom: 12px !important;
    }

    [b-6nmmft22dx] .fl-widget-metrics {
        gap: 11px !important;
        padding-top: 11px !important;
    }

    [b-6nmmft22dx] .fl-widget-label {
        font-size: 10px !important;
    }

    [b-6nmmft22dx] .fl-widget-val {
        font-size: 14.5px !important;
    }

    [b-6nmmft22dx] .fl-widget-trend {
        font-size: 10px !important;
    }

    [b-6nmmft22dx] .fl-hero-trust {
        font-size: 11px !important;
        gap: 10px !important;
        margin-top: 10px !important;
    }

    [b-6nmmft22dx] .fl-auth-form-wrap {
        padding: 22px 36px !important;
    }

    [b-6nmmft22dx] .fl-auth-card {
        max-width: 400px !important;
    }

    [b-6nmmft22dx] .fl-auth-title {
        font-size: 20px !important;
    }

    [b-6nmmft22dx] .fl-auth-sub {
        font-size: 12.5px !important;
    }

    [b-6nmmft22dx] .fl-hero-ambient-orb.orb-1 {
        width: 450px !important;
        height: 450px !important;
        top: -110px !important;
        right: -110px !important;
        opacity: 0.42 !important;
    }

    [b-6nmmft22dx] .fl-hero-ambient-orb.orb-2 {
        width: 360px !important;
        height: 360px !important;
        bottom: -70px !important;
        left: -70px !important;
        opacity: 0.33 !important;
    }

    [b-6nmmft22dx] .fl-hero-ambient-orb.orb-3 {
        width: 240px !important;
        height: 240px !important;
        opacity: 0.18 !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   LAPTOP/LARGE DESKTOP RESPONSIVE (1200px and up)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
    [b-6nmmft22dx] .fl-auth-hero {
        padding: 56px 52px !important;
        height: 100vh !important;
        overflow: hidden !important;
        justify-content: center !important;
    }

    [b-6nmmft22dx] .fl-hero-content {
        max-width: 520px !important;
        width: 100% !important;
    }

    [b-6nmmft22dx] .fl-hero-title {
        font-size: 42px !important;
        line-height: 1.10 !important;
        margin-bottom: 16px !important;
    }

    [b-6nmmft22dx] .fl-hero-subtitle {
        font-size: 15px !important;
        line-height: 1.60 !important;
        margin-bottom: 32px !important;
    }

    [b-6nmmft22dx] .fl-hero-badge {
        font-size: 12px !important;
        margin-bottom: 20px !important;
    }

    [b-6nmmft22dx] .fl-hero-widget.e-card {
        padding: 20px 24px !important;
        margin-bottom: 24px !important;
    }

    [b-6nmmft22dx] .fl-widget-header {
        gap: 14px !important;
        margin-bottom: 14px !important;
    }

    [b-6nmmft22dx] .fl-widget-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }

    [b-6nmmft22dx] .fl-widget-title {
        font-size: 14px !important;
    }

    [b-6nmmft22dx] .fl-widget-sub {
        font-size: 11.5px !important;
    }

    [b-6nmmft22dx] .fl-widget-chart {
        height: 58px !important;
        margin-bottom: 16px !important;
    }

    [b-6nmmft22dx] .fl-widget-metrics {
        gap: 14px !important;
        padding-top: 14px !important;
    }

    [b-6nmmft22dx] .fl-widget-label {
        font-size: 11px !important;
    }

    [b-6nmmft22dx] .fl-widget-val {
        font-size: 16px !important;
    }

    [b-6nmmft22dx] .fl-widget-trend {
        font-size: 11px !important;
    }

    [b-6nmmft22dx] .fl-hero-trust {
        font-size: 12px !important;
        gap: 14px !important;
        margin-top: 16px !important;
    }

    [b-6nmmft22dx] .fl-auth-form-wrap {
        padding: 32px 48px !important;
    }

    [b-6nmmft22dx] .fl-auth-card {
        max-width: 420px !important;
    }

    [b-6nmmft22dx] .fl-auth-title {
        font-size: 28px !important;
    }

    [b-6nmmft22dx] .fl-auth-sub {
        font-size: 14px !important;
    }

    [b-6nmmft22dx] .fl-hero-ambient-orb.orb-1 {
        width: 550px !important;
        height: 550px !important;
        top: -120px !important;
        right: -120px !important;
        opacity: 0.45 !important;
    }

    [b-6nmmft22dx] .fl-hero-ambient-orb.orb-2 {
        width: 420px !important;
        height: 420px !important;
        bottom: -80px !important;
        left: -80px !important;
        opacity: 0.35 !important;
    }

    [b-6nmmft22dx] .fl-hero-ambient-orb.orb-3 {
        width: 280px !important;
        height: 280px !important;
        opacity: 0.2 !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE (below 768px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    [b-6nmmft22dx] .fl-auth-screen {
        min-height: 100vh !important;
        height: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    [b-6nmmft22dx] .fl-auth-grid {
        grid-template-columns: 1fr !important;
        height: auto !important;
        max-height: none !important;
        min-height: 100vh !important;
        overflow: visible !important;
    }

    [b-6nmmft22dx] .fl-auth-hero {
        display: none !important;
    }

    [b-6nmmft22dx] .fl-auth-form-wrap {
        order: 1 !important;
        height: auto !important; /* was 800px, causing the clip */
        min-height: 100vh !important;
        overflow: visible !important; /* was inherited overflow: hidden */
        justify-content: flex-start !important;
        padding: 32px 20px 48px !important;
    }


    [b-6nmmft22dx] .fl-auth-top-bar {
        top: 16px !important;
        right: 16px !important;
    }

    [b-6nmmft22dx] .fl-auth-title {
        font-size: 24px !important;
        font-weight: 800 !important;
    }

    [b-6nmmft22dx] .fl-auth-sub {
        font-size: 13.5px !important;
        margin-bottom: 20px !important;
    }

    [b-6nmmft22dx] .fl-mobile-hero-illustration {
        margin-top: 28px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    [b-6nmmft22dx] .fl-illustration-card {
        width: 100%;
        background: linear-gradient(135deg, rgba(21, 101, 255, 0.08) 0%, rgba(22, 211, 209, 0.08) 100%);
        border: 1px solid var(--fl-border);
        border-radius: var(--fl-radius-lg);
        padding: 16px;
    }

    [b-6nmmft22dx] .fl-illu-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
    }

    [b-6nmmft22dx] .fl-illu-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--fl-royal);
    }

    [b-6nmmft22dx] .fl-illu-title {
        font-size: 12px;
        font-weight: 700;
        color: var(--fl-text-primary);
    }

    [b-6nmmft22dx] .fl-illu-metrics {
        display: flex;
        justify-content: space-between;
    }

    [b-6nmmft22dx] .fl-illu-label {
        font-size: 11px;
        color: var(--fl-text-secondary);
        display: block;
    }

    [b-6nmmft22dx] .fl-illu-val {
        font-size: 15px;
        font-weight: 700;
        color: var(--fl-text-primary);
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
[b-jtjxre7sw9] .fl-auth-screen {
    position: relative;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    background: var(--fl-bg-app);
    overflow: hidden !important;
    display: flex;
}

[b-jtjxre7sw9] .fl-auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

[b-jtjxre7sw9] .fl-auth-hero {
    order: 2;
    background-image: linear-gradient(180deg, rgba(4, 12, 42, 0.08) 0%, rgba(4, 12, 42, 0.15) 25%, rgba(2, 8, 28, 0.35) 60%, rgba(0, 0, 0, 0.55) 100%), url('/Login%20hero%20BG.png');
    background-size: cover;
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #0A1430;
    position: relative;
    padding: 56px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: #FFFFFF;
    height: 100vh;
    box-sizing: border-box;
}

[b-jtjxre7sw9] .fl-hero-bg-overlay {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(ellipse at 99% 76%, rgba(20, 103, 226, -0.75) 0%, transparent 100%), 
        linear-gradient(to right, transparent 100%, rgba(5, 36, 54, 32.55) 0%);
    pointer-events: none;
    z-index: 1;
}

[b-jtjxre7sw9] .fl-hero-ambient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
    pointer-events: none;
}

    [b-jtjxre7sw9] .fl-hero-ambient-orb.orb-1 {
        width: 550px;
        height: 550px;
        background: radial-gradient(circle, #1565FF 0%, #0D47A1 60%, transparent 100%);
        top: -120px;
        right: -120px;
        opacity: 0.45;
        filter: blur(100px);
    }

    [b-jtjxre7sw9] .fl-hero-ambient-orb.orb-2 {
        width: 420px;
        height: 420px;
        background: radial-gradient(circle, #16D3D1 0%, #0891B2 60%, transparent 100%);
        bottom: -80px;
        left: -80px;
        opacity: 0.35;
        filter: blur(90px);
    }

    [b-jtjxre7sw9] .fl-hero-ambient-orb.orb-3 {
        position: absolute;
        width: 280px;
        height: 280px;
        background: radial-gradient(circle, #6366F1 0%, transparent 100%);
        bottom: 30%;
        right: -40px;
        opacity: 0.2;
        filter: blur(70px);
        border-radius: 50%;
        pointer-events: none;
    }

/* ─── Hero Content & Showcase ────────────────────────────────── */
[b-jtjxre7sw9] .fl-hero-content {
    position: relative;
    z-index: 2;
    max-width: 520px;
    margin: 0 auto;
}

/* Feature Badge Pill */
[b-jtjxre7sw9] .fl-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    font-size: 12px;
    font-weight: 600;
    color: #E2E8F0;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transition: all 300ms ease;
}

    [b-jtjxre7sw9] .fl-hero-badge:hover {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.25);
        transform: translateY(-2px);
    }

[b-jtjxre7sw9] .fl-badge-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.8);
    animation: fl-pulse-live-b-jtjxre7sw9 2s infinite ease-in-out;
}

@keyframes fl-pulse-live-b-jtjxre7sw9 {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.4);
        opacity: 0.6;
    }
}

[b-jtjxre7sw9] .fl-hero-title {
    font-family: var(--fl-font-display);
    font-size: 42px;
    font-weight: 900;
    line-height: 1.10;
    color: #FFFFFF;
    margin-bottom: 16px;
    letter-spacing: -1px;
}

[b-jtjxre7sw9] .fl-hero-gradient-text {
    background: linear-gradient(135deg, #38BDF8 0%, #22D3EE 50%, #818CF8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[b-jtjxre7sw9] .fl-hero-subtitle {
    font-size: 15px;
    line-height: 1.60;
    color: rgba(255, 255, 255, 0.80);
    margin-bottom: 32px;
    font-weight: 400;
}

/* Showcase Container */
[b-jtjxre7sw9] .fl-hero-showcase {
    position: relative;
    margin-bottom: 24px;
}

/* Floating Micro Toasts via SfCard */
[b-jtjxre7sw9] .fl-floating-toast.e-card {
    position: absolute;
    z-index: 10;
    background: rgba(8, 18, 44, 0.88) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 14px !important;
    padding: 10px 16px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.50), 0 0 24px rgba(21, 101, 255, 0.25) !important;
}

[b-jtjxre7sw9] .fl-toast--top {
    top: -18px;
    right: -14px;
    animation: fl-float-top-b-jtjxre7sw9 5s ease-in-out infinite;
}

[b-jtjxre7sw9] .fl-toast--bottom {
    bottom: -16px;
    left: -14px;
    animation: fl-float-bottom-b-jtjxre7sw9 6s ease-in-out infinite;
}

@keyframes fl-float-top-b-jtjxre7sw9 {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes fl-float-bottom-b-jtjxre7sw9 {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}

[b-jtjxre7sw9] .fl-toast-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

[b-jtjxre7sw9] .fl-toast-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

[b-jtjxre7sw9] .fl-toast-icon--green {
    background: rgba(34, 197, 94, 0.30);
    color: #22C55E;
}

[b-jtjxre7sw9] .fl-toast-icon--blue {
    background: rgba(35, 168, 255, 0.30);
    color: #38BDF8;
}

[b-jtjxre7sw9] .fl-toast-title {
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.3;
}

[b-jtjxre7sw9] .fl-toast-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.70);
}

/* Floating Glass Main Widget via SfCard */
[b-jtjxre7sw9] .fl-hero-widget.e-card {
    background: rgba(255, 255, 255, 0.09) !important;
    backdrop-filter: blur(32px) !important;
    -webkit-backdrop-filter: blur(32px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 20px !important;
    padding: 20px 24px !important;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.45), 
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

    [b-jtjxre7sw9] .fl-hero-widget.e-card .e-card-content {
        padding: 0 !important;
    }

    [b-jtjxre7sw9] .fl-hero-widget.e-card:hover {
        transform: translateY(-4px);
        box-shadow: 
            0 28px 80px rgba(0, 0, 0, 0.55), 
            inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    }

[b-jtjxre7sw9] .fl-widget-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

[b-jtjxre7sw9] .fl-widget-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(35, 168, 255, 0.30) 0%, rgba(56, 189, 248, 0.20) 100%);
    color: #38BDF8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 1px solid rgba(35, 168, 255, 0.25);
}

[b-jtjxre7sw9] .fl-widget-title {
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0.3px;
}

[b-jtjxre7sw9] .fl-widget-sub {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
}

[b-jtjxre7sw9] .fl-status-pill.fl-status--paid {
    background: rgba(34, 197, 94, 0.20);
    color: #22C55E;
    border: 1px solid rgba(34, 197, 94, 0.40);
    border-radius: 9999px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Sparkline Chart */
[b-jtjxre7sw9] .fl-widget-chart {
    width: 100%;
    height: 58px;
    margin-bottom: 16px;
}

[b-jtjxre7sw9] .fl-sparkline-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

[b-jtjxre7sw9] .fl-chart-pulse {
    animation: fl-dot-pulse-b-jtjxre7sw9 2s infinite;
}

@keyframes fl-dot-pulse-b-jtjxre7sw9 {
    0%, 100% {
        transform: scale(1);
        opacity: 0.35;
    }

    50% {
        transform: scale(1.6);
        opacity: 0.8;
    }
}

[b-jtjxre7sw9] .fl-widget-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

[b-jtjxre7sw9] .fl-widget-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

[b-jtjxre7sw9] .fl-widget-val {
    font-family: var(--fl-font-display);
    font-size: 16px;
    font-weight: 800;
    color: #FFFFFF;
    margin-top: 4px;
}

[b-jtjxre7sw9] .fl-widget-trend {
    font-size: 11px;
    font-weight: 700;
    margin-top: 2px;
}

/* Trust Bar */
[b-jtjxre7sw9] .fl-hero-trust {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.80);
    margin-top: 16px;
}

[b-jtjxre7sw9] .fl-trust-rating {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-jtjxre7sw9] .fl-stars {
    color: #FBBF24;
    letter-spacing: 2px;
    font-size: 12px;
}

[b-jtjxre7sw9] .fl-rating-score {
    font-weight: 800;
    color: #FFFFFF;
}

[b-jtjxre7sw9] .fl-trust-divider {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.25);
}

[b-jtjxre7sw9] .fl-trust-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
}

    [b-jtjxre7sw9] .fl-trust-text strong {
        color: #FFFFFF;
        font-weight: 700;
    }

/* ═══════════════════════════════════════════════════════════
   FORM PANEL (LEFT SIDE) - PREMIUM STYLING
   ═══════════════════════════════════════════════════════════ */

[b-jtjxre7sw9] .fl-auth-card.e-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 100%;
    max-width: 420px;
    padding: 0 !important;
}

    [b-jtjxre7sw9] .fl-auth-card.e-card .e-card-content {
        padding: 0 !important;
    }

[b-jtjxre7sw9] .fl-auth-checkbox.e-checkbox-wrapper .e-label {
    font-size: 13px !important;
    color: var(--fl-text-secondary) !important;
    font-weight: 500 !important;
}

[b-jtjxre7sw9] .fl-auth-checkbox.e-checkbox-wrapper .e-frame {
    border-radius: 4px !important;
}

[b-jtjxre7sw9] .e-btn.fl-pwd-toggle {
    position: absolute;
    right: 10px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--fl-text-muted) !important;
    padding: 0 4px !important;
    min-height: auto !important;
    height: auto !important;
    z-index: 5;
}

/* ─── Form Panel (LEFT SIDE) ─────────────────────────── */
[b-jtjxre7sw9] .fl-auth-form-wrap {
    order: 1;
    background: var(--fl-bg-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 48px;
    position: relative;
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
}

[b-jtjxre7sw9] .fl-auth-top-bar {
    position: absolute;
    top: 28px;
    right: 32px;
    z-index: 10;
    display: flex;
    align-items: center;
}

[b-jtjxre7sw9] .fl-theme-toggle-btn.e-btn {
    height: 40px !important;
    padding: 0 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
    background: var(--fl-bg-surface-2) !important;
    border: 1px solid var(--fl-border) !important;
    color: var(--fl-text-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 200ms ease !important;
}

    [b-jtjxre7sw9] .fl-theme-toggle-btn.e-btn:hover {
        background: var(--fl-royal) !important;
        color: #FFFFFF !important;
        border-color: var(--fl-royal) !important;
        box-shadow: 0 6px 16px rgba(21, 101, 255, 0.30) !important;
        transform: translateY(-1px);
    }

[b-jtjxre7sw9] .fl-theme-toggle-content {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

[b-jtjxre7sw9] .fl-theme-icon {
    display: inline-block !important;
    flex-shrink: 0 !important;
}

[b-jtjxre7sw9] .fl-auth-card {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* =============================================================
   BRAND LOGO STYLING
   ============================================================= */

[b-jtjxre7sw9] .fl-form-brand,
.fl-form-brand[b-jtjxre7sw9] {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    justify-content: center;
}

.fl-theme-light .fl-form-logo[b-jtjxre7sw9],
.fl-theme-light[b-jtjxre7sw9]  .fl-form-logo,
.fl-form-logo[b-jtjxre7sw9],
[b-jtjxre7sw9] .fl-form-logo {
    height: 110px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    display: block;
    filter: none !important;
    opacity: 1 !important;
}

.fl-theme-dark .fl-form-logo[b-jtjxre7sw9],
.fl-theme-dark[b-jtjxre7sw9]  .fl-form-logo,
.fl-auth-screen.fl-theme-dark .fl-form-logo[b-jtjxre7sw9],
[b-jtjxre7sw9] .fl-auth-screen.fl-theme-dark .fl-form-logo {
    height: 120px;
    width: 100%;
    margin-left: -15px;
    max-width: 200px;
    object-fit: contain;
    display: block;
    filter: none !important;
    opacity: 1 !important;
}

[b-jtjxre7sw9] .fl-auth-title {
    font-family: var(--fl-font-display);
    font-size: 28px;
    font-weight: 900;
    color: var(--fl-text-primary);
    margin: 0 0 8px;
    letter-spacing: -0.5px;
}

[b-jtjxre7sw9] .fl-auth-sub {
    font-size: 14px;
    color: var(--fl-text-secondary);
    margin: 0 0 28px;
    line-height: 1.5;
    font-weight: 400;
}

[b-jtjxre7sw9] .fl-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

[b-jtjxre7sw9] .fl-field-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--fl-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[b-jtjxre7sw9] .fl-input-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

[b-jtjxre7sw9] .fl-field-icon {
    position: absolute;
    left: 14px;
    font-size: 15px;
    color: var(--fl-text-muted);
    z-index: 5;
    pointer-events: none;
}

[b-jtjxre7sw9] .fl-auth-input {
    width: 100% !important;
}

    [b-jtjxre7sw9] .fl-auth-input input.e-input {
        padding-left: 40px !important;
        height: 42px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
        border: 1.5px solid var(--fl-border) !important;
        background: var(--fl-bg-surface-2) !important;
        color: var(--fl-text-primary) !important;
        transition: all 200ms ease !important;
        font-weight: 500;
    }

    [b-jtjxre7sw9] .fl-auth-input input.e-input:focus {
        border-color: var(--fl-royal) !important;
        box-shadow: 0 0 0 3px rgba(21, 101, 255, 0.10) !important;
    }

    [b-jtjxre7sw9] .fl-auth-input input.e-input::placeholder {
        color: var(--fl-text-muted);
    }

[b-jtjxre7sw9] .fl-pwd-toggle {
    position: absolute;
    right: 14px;
    background: none;
    border: none;
    color: var(--fl-text-muted);
    cursor: pointer;
    z-index: 5;
    padding: 0;
    transition: color 200ms ease;
}

    [b-jtjxre7sw9] .fl-pwd-toggle:hover {
        color: var(--fl-text-primary);
    }

[b-jtjxre7sw9] .fl-btn-auth.e-btn {
    width: 100% !important;
    height: 44px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #1565FF 0%, #0052EA 100%) !important;
    box-shadow: 0 6px 20px rgba(21, 101, 255, 0.40) !important;
    color: #FFFFFF !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    text-transform: none !important;
    transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    border: none !important;
    margin-top: 8px;
}

    [b-jtjxre7sw9] .fl-btn-auth.e-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(21, 101, 255, 0.50) !important;
    }

    [b-jtjxre7sw9] .fl-btn-auth.e-btn:active {
        transform: translateY(0);
        box-shadow: 0 4px 12px rgba(21, 101, 255, 0.35) !important;
    }

[b-jtjxre7sw9] .fl-btn-auth-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
}

/* ─── Circular Round Loading Spinner ───────────────────────────── */
[b-jtjxre7sw9] .fl-round-spinner,
.fl-round-spinner[b-jtjxre7sw9] {
    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-b-jtjxre7sw9 0.75s linear infinite !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

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

[b-jtjxre7sw9] .fl-auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0 18px;
    color: var(--fl-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

    [b-jtjxre7sw9] .fl-auth-divider::before,
    [b-jtjxre7sw9] .fl-auth-divider::after {
        content: '';
        flex: 1;
        border-bottom: 1.5px solid var(--fl-border);
    }

    [b-jtjxre7sw9] .fl-divider-text,
    [b-jtjxre7sw9] .fl-auth-divider span {
        padding: 0 14px;
    }

[b-jtjxre7sw9] .fl-sso-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

[b-jtjxre7sw9] .e-btn.fl-btn-sso,
[b-jtjxre7sw9] .fl-btn-sso {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    height: 42px !important;
    background: var(--fl-bg-surface-2) !important;
    border: 1.5px solid var(--fl-border) !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--fl-text-primary) !important;
    text-transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    cursor: pointer !important;
    transition: all 200ms ease !important;
}

    [b-jtjxre7sw9] .e-btn.fl-btn-sso:hover,
    [b-jtjxre7sw9] .fl-btn-sso:hover {
        background: var(--fl-border-soft) !important;
        border-color: var(--fl-royal) !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(21, 101, 255, 0.15) !important;
    }

[b-jtjxre7sw9] .fl-sso-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
}

[b-jtjxre7sw9] .fl-sso-icon,
.fl-sso-icon[b-jtjxre7sw9] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

[b-jtjxre7sw9] .fl-sso-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--fl-text-primary) !important;
}

[b-jtjxre7sw9] .e-btn.fl-auth-link-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--fl-royal) !important;
    text-transform: none !important;
    min-height: auto !important;
    height: auto !important;
    cursor: pointer !important;
    transition: all 200ms ease !important;
}

    [b-jtjxre7sw9] .e-btn.fl-auth-link-btn:hover {
        text-decoration: underline !important;
        background: transparent !important;
        color: var(--fl-royal) !important;
    }

[b-jtjxre7sw9] .fl-auth-card__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 13px;
    color: var(--fl-text-secondary);
}

[b-jtjxre7sw9] .fl-footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

[b-jtjxre7sw9] .fl-footer-dot {
    color: var(--fl-text-muted);
}

[b-jtjxre7sw9] .e-btn.fl-footer-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 12px !important;
    color: var(--fl-text-muted) !important;
    text-transform: none !important;
    min-height: auto !important;
    height: auto !important;
    transition: all 200ms ease !important;
}

    [b-jtjxre7sw9] .e-btn.fl-footer-btn:hover {
        color: var(--fl-royal) !important;
        background: transparent !important;
        text-decoration: underline !important;
    }

[b-jtjxre7sw9] .fl-auth-footer-notes {
    margin-top: 20px;
    text-align: center;
    font-size: 11px;
    color: var(--fl-text-muted);
    display: flex;
    flex-direction: column;
    gap: 4px;
    letter-spacing: 0.3px;
}

/* ─── Dark Theme Mode ────────────────────────────────────── */
.fl-auth-screen.fl-theme-dark[b-jtjxre7sw9],
[b-jtjxre7sw9] .fl-auth-screen.fl-theme-dark,
.fl-theme-dark.fl-auth-screen[b-jtjxre7sw9],
.fl-theme-dark .fl-auth-screen[b-jtjxre7sw9],
[b-jtjxre7sw9] .fl-theme-dark .fl-auth-screen {
    --fl-bg-app: #01071B;
    --fl-bg-surface: #01071B;
    --fl-bg-surface-2: #07122D;
    --fl-border: #101E42;
    --fl-border-soft: #0A1430;
    --fl-text-primary: #E2E8F0;
    --fl-text-secondary: #94A3B8;
    --fl-text-muted: #64748B;
    background: #01071B !important;
}

    .fl-auth-screen.fl-theme-dark .fl-auth-form-wrap[b-jtjxre7sw9],
    [b-jtjxre7sw9] .fl-auth-screen.fl-theme-dark .fl-auth-form-wrap,
    .fl-theme-dark .fl-auth-form-wrap[b-jtjxre7sw9],
    [b-jtjxre7sw9] .fl-theme-dark .fl-auth-form-wrap {
        background: #01071B !important;
    }

    .fl-auth-screen.fl-theme-dark .fl-auth-title[b-jtjxre7sw9],
    [b-jtjxre7sw9] .fl-auth-screen.fl-theme-dark .fl-auth-title,
    .fl-theme-dark .fl-auth-title[b-jtjxre7sw9],
    [b-jtjxre7sw9] .fl-theme-dark .fl-auth-title {
        color: #FFFFFF !important;
    }

    .fl-auth-screen.fl-theme-dark .fl-auth-sub[b-jtjxre7sw9],
    [b-jtjxre7sw9] .fl-auth-screen.fl-theme-dark .fl-auth-sub,
    .fl-theme-dark .fl-auth-sub[b-jtjxre7sw9],
    [b-jtjxre7sw9] .fl-theme-dark .fl-auth-sub {
        color: #94A3B8 !important;
    }

    .fl-auth-screen.fl-theme-dark .fl-field-label[b-jtjxre7sw9],
    [b-jtjxre7sw9] .fl-auth-screen.fl-theme-dark .fl-field-label,
    .fl-theme-dark .fl-field-label[b-jtjxre7sw9],
    [b-jtjxre7sw9] .fl-theme-dark .fl-field-label {
        color: #94A3B8 !important;
    }

    .fl-auth-screen.fl-theme-dark .fl-field-icon[b-jtjxre7sw9],
    [b-jtjxre7sw9] .fl-auth-screen.fl-theme-dark .fl-field-icon,
    .fl-theme-dark .fl-field-icon[b-jtjxre7sw9],
    [b-jtjxre7sw9] .fl-theme-dark .fl-field-icon {
        color: #64748B !important;
    }

    .fl-auth-screen.fl-theme-dark .fl-remember-label[b-jtjxre7sw9],
    [b-jtjxre7sw9] .fl-auth-screen.fl-theme-dark .fl-remember-label,
    .fl-theme-dark .fl-remember-label[b-jtjxre7sw9],
    [b-jtjxre7sw9] .fl-theme-dark .fl-remember-label {
        color: #94A3B8 !important;
    }

    .fl-auth-screen.fl-theme-dark .fl-sso-label[b-jtjxre7sw9],
    [b-jtjxre7sw9] .fl-auth-screen.fl-theme-dark .fl-sso-label,
    .fl-theme-dark .fl-sso-label[b-jtjxre7sw9],
    [b-jtjxre7sw9] .fl-theme-dark .fl-sso-label {
        color: #64748B !important;
    }

    .fl-auth-screen.fl-theme-dark .fl-auth-footer[b-jtjxre7sw9],
    [b-jtjxre7sw9] .fl-auth-screen.fl-theme-dark .fl-auth-footer,
    .fl-theme-dark .fl-auth-footer[b-jtjxre7sw9],
    [b-jtjxre7sw9] .fl-theme-dark .fl-auth-footer {
        color: #64748B !important;
    }

    .fl-auth-screen.fl-theme-dark .fl-theme-toggle-btn.e-btn[b-jtjxre7sw9],
    [b-jtjxre7sw9] .fl-auth-screen.fl-theme-dark .fl-theme-toggle-btn.e-btn {
        background: #07122D !important;
        border-color: #101E42 !important;
        color: #E2E8F0 !important;
    }

    .fl-auth-screen.fl-theme-dark .fl-auth-input input.e-input[b-jtjxre7sw9],
    [b-jtjxre7sw9] .fl-auth-screen.fl-theme-dark .fl-auth-input input.e-input {
        background: #07122D !important;
        border-color: #101E42 !important;
        color: #E2E8F0 !important;
    }

    .fl-auth-screen.fl-theme-dark .fl-btn-sso[b-jtjxre7sw9],
    [b-jtjxre7sw9] .fl-auth-screen.fl-theme-dark .fl-btn-sso {
        background: #07122D !important;
        border-color: #101E42 !important;
        color: #E2E8F0 !important;
    }

        .fl-auth-screen.fl-theme-dark .fl-btn-sso:hover[b-jtjxre7sw9],
        [b-jtjxre7sw9] .fl-auth-screen.fl-theme-dark .fl-btn-sso:hover {
            background: #0D1D45 !important;
            border-color: var(--fl-royal) !important;
        }

    .fl-auth-screen.fl-theme-dark .fl-auth-hero[b-jtjxre7sw9],
    [b-jtjxre7sw9] .fl-auth-screen.fl-theme-dark .fl-auth-hero {
        background-image: linear-gradient(180deg, rgba(1, 7, 27, 0.08) 0%, rgba(1, 7, 27, 0.15) 25%, rgba(1, 7, 27, 0.35) 60%, rgba(0, 0, 0, 0.55) 100%), url('/Login%20hero%20BG.png');
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
        background-color: #01071B !important;
    }

/* ═══════════════════════════════════════════════════════════
   TABLET RESPONSIVE (768px - 1023px)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
    [b-jtjxre7sw9] .fl-auth-screen {
        min-height: 100vh !important;
        height: auto !important;
        overflow: hidden !important;
    }

    [b-jtjxre7sw9] .fl-form-brand,
    .fl-form-brand[b-jtjxre7sw9] {
        display: flex;
        align-items: center;
        margin-top: 12px;
        justify-content: center;
    }

    [b-jtjxre7sw9] .fl-auth-top-bar {
        top: 16px !important;
        right: 10px !important;
    }

    [b-jtjxre7sw9] .fl-auth-grid {
        grid-template-columns: 1fr 1fr !important;
        min-height: 100vh !important;
        height: 100vh !important;
        max-height: 100vh !important;
    }

    [b-jtjxre7sw9] .fl-auth-hero {
        display: flex !important;
        order: 2 !important;
        padding: 32px 28px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    [b-jtjxre7sw9] .fl-hero-content {
        max-width: 100% !important;
        margin: 0 !important;
    }

    [b-jtjxre7sw9] .fl-hero-title {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
    }

    [b-jtjxre7sw9] .fl-hero-subtitle {
        font-size: 12px !important;
        line-height: 1.5 !important;
        margin-bottom: 18px !important;
    }

    [b-jtjxre7sw9] .fl-hero-badge {
        font-size: 11px !important;
        margin-bottom: 14px !important;
    }

    [b-jtjxre7sw9] .fl-hero-widget.e-card {
        padding: 14px 16px !important;
        margin-bottom: 16px !important;
    }

    [b-jtjxre7sw9] .fl-widget-header {
        gap: 10px !important;
        margin-bottom: 10px !important;
    }

    [b-jtjxre7sw9] .fl-widget-icon {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }

    [b-jtjxre7sw9] .fl-widget-title {
        font-size: 12px !important;
    }

    [b-jtjxre7sw9] .fl-widget-sub {
        font-size: 10px !important;
    }

    [b-jtjxre7sw9] .fl-widget-chart {
        height: 40px !important;
        margin-bottom: 10px !important;
    }

    [b-jtjxre7sw9] .fl-widget-metrics {
        gap: 8px !important;
        padding-top: 10px !important;
    }

    [b-jtjxre7sw9] .fl-widget-label {
        font-size: 9.5px !important;
    }

    [b-jtjxre7sw9] .fl-widget-val {
        font-size: 13px !important;
    }

    [b-jtjxre7sw9] .fl-widget-trend {
        font-size: 9px !important;
    }

    [b-jtjxre7sw9] .fl-hero-trust {
        font-size: 11px !important;
        gap: 10px !important;
        margin-top: 8px !important;
    }

    [b-jtjxre7sw9] .fl-auth-form-wrap {
        order: 1 !important;
        height: 100vh !important;
        overflow-y: auto !important;
        padding: 20px 28px !important;
    }

    [b-jtjxre7sw9] .fl-auth-card {
        max-width: 380px !important;
    }

    [b-jtjxre7sw9] .fl-auth-title {
        font-size: 20px !important;
    }

    [b-jtjxre7sw9] .fl-auth-sub {
        font-size: 12px !important;
    }

    [b-jtjxre7sw9] .fl-hero-ambient-orb.orb-1 {
        width: 350px !important;
        height: 350px !important;
        top: -100px !important;
        right: -100px !important;
    }

    [b-jtjxre7sw9] .fl-hero-ambient-orb.orb-2 {
        width: 280px !important;
        height: 280px !important;
        bottom: -60px !important;
        left: -60px !important;
    }

    [b-jtjxre7sw9] .fl-hero-ambient-orb.orb-3 {
        width: 200px !important;
        height: 200px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP RESPONSIVE (1024px - 1199px)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1199px) {
    [b-jtjxre7sw9] .fl-auth-hero {
        padding: 48px 40px !important;
        height: 100vh !important;
        overflow:hidden;
        justify-content: center !important;
    }

    [b-jtjxre7sw9] .fl-hero-content {
        max-width: 480px !important;
        width: 100% !important;
    }

    [b-jtjxre7sw9] .fl-hero-title {
        font-size: 32px !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }

    [b-jtjxre7sw9] .fl-hero-subtitle {
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin-bottom: 24px !important;
    }

    [b-jtjxre7sw9] .fl-hero-badge {
        font-size: 11.5px !important;
        margin-bottom: 18px !important;
    }

    [b-jtjxre7sw9] .fl-hero-widget.e-card {
        padding: 16px 20px !important;
        margin-bottom: 20px !important;
    }

    [b-jtjxre7sw9] .fl-widget-header {
        gap: 11px !important;
        margin-bottom: 11px !important;
    }

    [b-jtjxre7sw9] .fl-widget-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 15px !important;
    }

    [b-jtjxre7sw9] .fl-widget-title {
        font-size: 13px !important;
    }

    [b-jtjxre7sw9] .fl-widget-sub {
        font-size: 10.5px !important;
    }

    [b-jtjxre7sw9] .fl-widget-chart {
        height: 50px !important;
        margin-bottom: 12px !important;
    }

    [b-jtjxre7sw9] .fl-widget-metrics {
        gap: 11px !important;
        padding-top: 11px !important;
    }

    [b-jtjxre7sw9] .fl-widget-label {
        font-size: 10px !important;
    }

    [b-jtjxre7sw9] .fl-widget-val {
        font-size: 14.5px !important;
    }

    [b-jtjxre7sw9] .fl-widget-trend {
        font-size: 10px !important;
    }

    [b-jtjxre7sw9] .fl-hero-trust {
        font-size: 11px !important;
        gap: 10px !important;
        margin-top: 10px !important;
    }

    [b-jtjxre7sw9] .fl-auth-form-wrap {
        padding: 22px 36px !important;
    }

    [b-jtjxre7sw9] .fl-auth-card {
        max-width: 400px !important;
    }

    [b-jtjxre7sw9] .fl-auth-title {
        font-size: 20px !important;
    }

    [b-jtjxre7sw9] .fl-auth-sub {
        font-size: 12.5px !important;
    }

    [b-jtjxre7sw9] .fl-hero-ambient-orb.orb-1 {
        width: 450px !important;
        height: 450px !important;
        top: -110px !important;
        right: -110px !important;
        opacity: 0.42 !important;
    }

    [b-jtjxre7sw9] .fl-hero-ambient-orb.orb-2 {
        width: 360px !important;
        height: 360px !important;
        bottom: -70px !important;
        left: -70px !important;
        opacity: 0.33 !important;
    }

    [b-jtjxre7sw9] .fl-hero-ambient-orb.orb-3 {
        width: 240px !important;
        height: 240px !important;
        opacity: 0.18 !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   LAPTOP/LARGE DESKTOP RESPONSIVE (1200px and up)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
    [b-jtjxre7sw9] .fl-auth-hero {
        padding: 56px 52px !important;
        height: 100vh !important;
        overflow: hidden !important;
        justify-content: center !important;
    }

    [b-jtjxre7sw9] .fl-hero-content {
        max-width: 520px !important;
        width: 100% !important;
    }

    [b-jtjxre7sw9] .fl-hero-title {
        font-size: 42px !important;
        line-height: 1.10 !important;
        margin-bottom: 16px !important;
    }

    [b-jtjxre7sw9] .fl-hero-subtitle {
        font-size: 15px !important;
        line-height: 1.60 !important;
        margin-bottom: 32px !important;
    }

    [b-jtjxre7sw9] .fl-hero-badge {
        font-size: 12px !important;
        margin-bottom: 20px !important;
    }

    [b-jtjxre7sw9] .fl-hero-widget.e-card {
        padding: 20px 24px !important;
        margin-bottom: 24px !important;
    }

    [b-jtjxre7sw9] .fl-widget-header {
        gap: 14px !important;
        margin-bottom: 14px !important;
    }

    [b-jtjxre7sw9] .fl-widget-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }

    [b-jtjxre7sw9] .fl-widget-title {
        font-size: 14px !important;
    }

    [b-jtjxre7sw9] .fl-widget-sub {
        font-size: 11.5px !important;
    }

    [b-jtjxre7sw9] .fl-widget-chart {
        height: 58px !important;
        margin-bottom: 16px !important;
    }

    [b-jtjxre7sw9] .fl-widget-metrics {
        gap: 14px !important;
        padding-top: 14px !important;
    }

    [b-jtjxre7sw9] .fl-widget-label {
        font-size: 11px !important;
    }

    [b-jtjxre7sw9] .fl-widget-val {
        font-size: 16px !important;
    }

    [b-jtjxre7sw9] .fl-widget-trend {
        font-size: 11px !important;
    }

    [b-jtjxre7sw9] .fl-hero-trust {
        font-size: 12px !important;
        gap: 14px !important;
        margin-top: 16px !important;
    }

    [b-jtjxre7sw9] .fl-auth-form-wrap {
        padding: 32px 48px !important;
    }

    [b-jtjxre7sw9] .fl-auth-card {
        max-width: 420px !important;
    }

    [b-jtjxre7sw9] .fl-auth-title {
        font-size: 28px !important;
    }

    [b-jtjxre7sw9] .fl-auth-sub {
        font-size: 14px !important;
    }

    [b-jtjxre7sw9] .fl-hero-ambient-orb.orb-1 {
        width: 550px !important;
        height: 550px !important;
        top: -120px !important;
        right: -120px !important;
        opacity: 0.45 !important;
    }

    [b-jtjxre7sw9] .fl-hero-ambient-orb.orb-2 {
        width: 420px !important;
        height: 420px !important;
        bottom: -80px !important;
        left: -80px !important;
        opacity: 0.35 !important;
    }

    [b-jtjxre7sw9] .fl-hero-ambient-orb.orb-3 {
        width: 280px !important;
        height: 280px !important;
        opacity: 0.2 !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE (below 768px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    [b-jtjxre7sw9] .fl-auth-screen {
        min-height: 100vh !important;
        height: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    [b-jtjxre7sw9] .fl-auth-grid {
        grid-template-columns: 1fr !important;
        height: auto !important;
        max-height: none !important;
        min-height: 100vh !important;
        overflow: visible !important;
    }

    [b-jtjxre7sw9] .fl-auth-hero {
        display: none !important;
    }

    [b-jtjxre7sw9] .fl-auth-form-wrap {
        order: 1 !important;
        height: auto !important; /* was 800px, causing the clip */
        min-height: 100vh !important;
        overflow: visible !important; /* was inherited overflow: hidden */
        justify-content: flex-start !important;
        padding: 32px 20px 48px !important;
    }


    [b-jtjxre7sw9] .fl-auth-top-bar {
        top: 16px !important;
        right: 16px !important;
    }

    [b-jtjxre7sw9] .fl-auth-title {
        font-size: 24px !important;
        font-weight: 800 !important;
    }

    [b-jtjxre7sw9] .fl-auth-sub {
        font-size: 13.5px !important;
        margin-bottom: 20px !important;
    }

    [b-jtjxre7sw9] .fl-mobile-hero-illustration {
        margin-top: 28px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    [b-jtjxre7sw9] .fl-illustration-card {
        width: 100%;
        background: linear-gradient(135deg, rgba(21, 101, 255, 0.08) 0%, rgba(22, 211, 209, 0.08) 100%);
        border: 1px solid var(--fl-border);
        border-radius: var(--fl-radius-lg);
        padding: 16px;
    }

    [b-jtjxre7sw9] .fl-illu-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
    }

    [b-jtjxre7sw9] .fl-illu-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--fl-royal);
    }

    [b-jtjxre7sw9] .fl-illu-title {
        font-size: 12px;
        font-weight: 700;
        color: var(--fl-text-primary);
    }

    [b-jtjxre7sw9] .fl-illu-metrics {
        display: flex;
        justify-content: space-between;
    }

    [b-jtjxre7sw9] .fl-illu-label {
        font-size: 11px;
        color: var(--fl-text-secondary);
        display: block;
    }

    [b-jtjxre7sw9] .fl-illu-val {
        font-size: 15px;
        font-weight: 700;
        color: var(--fl-text-primary);
    }
}
/* /Components/Pages/Products/ProductAddEdit.razor.rz.scp.css */
.fl-product-page-container[b-d7vknxs1o2] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

.fl-form-page-header[b-d7vknxs1o2] {
    margin-bottom: 1.5rem;
    width: 100%;
}

.breadcrumb-trail[b-d7vknxs1o2] {
    margin-bottom: 0.5rem;
}

.breadcrumb-link[b-d7vknxs1o2] {
    color: var(--fl-text-secondary, #94A3B8);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: color 0.15s ease;
}

.breadcrumb-link:hover[b-d7vknxs1o2] {
    color: var(--fl-color-blue, #60A5FA);
}

.fl-header-title-bar[b-d7vknxs1o2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 1rem;
}

.fl-header-title-bar .fl-page-title[b-d7vknxs1o2] {
    font-family: var(--fl-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--fl-text-primary, #0F172A);
    margin: 0;
    line-height: 1.25;
    word-break: break-word;
}

.fl-header-actions[b-d7vknxs1o2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.fl-page-subtitle[b-d7vknxs1o2] {
    font-size: 0.9rem;
    color: var(--fl-text-secondary, #94A3B8);
    margin-bottom: 0;
}

/* ── Interactive FL Cards ────────────────────────────────────────── */
.fl-card[b-d7vknxs1o2] {
    background: var(--fl-bg-surface, #FFFFFF);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--fl-border, #E2E8F0);
    margin-bottom: 1.5rem;
    overflow: hidden;
    max-width: 100%;
    min-width: 0;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.fl-card:hover[b-d7vknxs1o2] {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.fl-highlight-card-top[b-d7vknxs1o2] {
    border-top: 3px solid var(--fl-color-blue, #1565FF);
}

.fl-card-header[b-d7vknxs1o2] {
    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[b-d7vknxs1o2] {
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.fl-formula-badge[b-d7vknxs1o2] {
    background: rgba(37, 99, 235, 0.18);
    color: var(--fl-color-blue, #60A5FA);
    font-size: 0.78rem;
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    font-weight: 700;
    border: 1px solid rgba(37, 99, 235, 0.35);
}

.fl-card-body[b-d7vknxs1o2] {
    padding: 1.5rem;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* ── Labels & Inputs (Identical to Customer Edit Reference) ─────── */
.fl-form-label[b-d7vknxs1o2] {
    font-family: var(--fl-font-ui, 'Inter', sans-serif);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--fl-text-secondary, #475569);
    margin-bottom: 0.45rem;
    display: block;
}

.required-field[b-d7vknxs1o2]::after {
    content: " *";
    color: var(--fl-color-red, #EF4444);
    font-weight: 700;
}

.fl-input-action-wrap[b-d7vknxs1o2] {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
}

.fl-input-action-wrap .e-input-group[b-d7vknxs1o2],
.fl-input-action-wrap .e-control-wrapper[b-d7vknxs1o2] {
    flex: 1;
    min-width: 0;
}

.fl-auto-btn[b-d7vknxs1o2] {
    white-space: nowrap;
    font-weight: 600;
}

.fl-add-dim-btn[b-d7vknxs1o2] {
    font-weight: 700;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

[b-d7vknxs1o2] .fl-validation-error,
[b-d7vknxs1o2] .validation-message,
.fl-validation-error[b-d7vknxs1o2] {
    color: #DC2626 !important;
    font-size: 0.8rem;
    margin-top: 0.25rem;
    font-weight: 500;
}

/* ── Form Controls & Dropdown Standard Sizing (Prevents Validation Distortion) ── */
[b-d7vknxs1o2] .e-control-wrapper.e-ddl,
[b-d7vknxs1o2] .e-control-wrapper.e-textbox,
[b-d7vknxs1o2] .e-control-wrapper.e-input-group,
[b-d7vknxs1o2] .e-ddl.e-input-group,
[b-d7vknxs1o2] .e-input-group {
    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;
}

[b-d7vknxs1o2] .e-control-wrapper.e-ddl.e-error,
[b-d7vknxs1o2] .e-control-wrapper.e-ddl.invalid,
[b-d7vknxs1o2] .e-ddl.e-input-group.e-error,
[b-d7vknxs1o2] .e-ddl.e-input-group.invalid,
[b-d7vknxs1o2] .e-input-group.e-error,
[b-d7vknxs1o2] .e-input-group.invalid,
[b-d7vknxs1o2] .e-control-wrapper.e-error,
[b-d7vknxs1o2] .e-control-wrapper.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;
    border-color: #DC2626 !important;
}

[b-d7vknxs1o2] .e-control-wrapper.e-ddl input.e-input,
[b-d7vknxs1o2] .e-control-wrapper.e-input-group input.e-input,
[b-d7vknxs1o2] .e-ddl.e-input-group input.e-input,
[b-d7vknxs1o2] .e-input-group input.e-input {
    height: 100% !important;
    min-height: unset !important;
    max-height: 100% !important;
    line-height: normal !important;
    box-sizing: border-box !important;
    flex: 1 1 auto !important;
}

[b-d7vknxs1o2] .e-control-wrapper.e-ddl .e-ddl-icon,
[b-d7vknxs1o2] .e-control-wrapper.e-ddl .e-input-group-icon,
[b-d7vknxs1o2] .e-input-group-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    min-height: unset !important;
    flex-shrink: 0 !important;
}

/* ── Live Computed Volume Card ───────────────────────────────────── */
.fl-cft-calculator-card[b-d7vknxs1o2] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12) 0%, rgba(21, 101, 255, 0.08) 100%);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    border: 1px solid rgba(34, 197, 94, 0.3);
    margin-bottom: 1rem;
    max-width: 100%;
    box-sizing: border-box;
}

.fl-calc-label[b-d7vknxs1o2] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--fl-color-green, #22C55E);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fl-calc-result-row[b-d7vknxs1o2] {
    margin-top: 0.25rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.fl-cft-val[b-d7vknxs1o2] {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--fl-color-green, #22C55E);
    text-shadow: 0 0 16px rgba(34, 197, 94, 0.25);
}

.fl-cft-math[b-d7vknxs1o2] {
    font-size: 0.85rem;
    color: var(--fl-text-secondary, #94A3B8);
}

.fl-dimension-header-wrap[b-d7vknxs1o2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fl-dim-heading-group[b-d7vknxs1o2] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.fl-section-heading[b-d7vknxs1o2] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--fl-text-primary, #0F172A);
    margin: 0;
    white-space: nowrap;
}

.fl-count-badge[b-d7vknxs1o2] {
    background: var(--fl-color-blue, #1565FF);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.fl-text-muted-sm[b-d7vknxs1o2] {
    font-size: 0.8rem;
    color: var(--fl-text-secondary, #94A3B8);
}

/* ── Responsive Table Wrapper (Strictly Contained) ───────────────── */
.fl-dimensions-table-wrap[b-d7vknxs1o2] {
    overflow-x: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    border-radius: 8px;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    display: block;
}

.fl-dimensions-table-wrap .fl-themed-grid[b-d7vknxs1o2],
.fl-dimensions-table-wrap[b-d7vknxs1o2]  .e-grid {
    min-width: 580px !important;
    width: 100% !important;
}

/* ── Grid Custom Tokens ─────────────────────────────────────────── */
.fl-grid-idx[b-d7vknxs1o2] {
    color: var(--fl-text-secondary, #94A3B8);
    font-weight: 600;
}

.fl-dim-val[b-d7vknxs1o2] {
    color: var(--fl-text-primary, #FFFFFF);
    font-weight: 700;
}

.fl-dim-pill[b-d7vknxs1o2] {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    background: var(--fl-bg-surface-2, #142037);
    color: var(--fl-text-primary, #E2E8F0);
    border: 1px solid var(--fl-border, #1C2D4A);
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.82rem;
}

.fl-cft-pill[b-d7vknxs1o2] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    background: var(--fl-color-blue, #1565FF);
    color: #FFFFFF;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.82rem;
}

.fl-empty-dim-card[b-d7vknxs1o2] {
    background: var(--fl-bg-surface-2, #142037);
    border: 1px dashed var(--fl-border, #1C2D4A);
    border-radius: 10px;
}

.fl-empty-icon[b-d7vknxs1o2] {
    color: var(--fl-text-muted, #64748B);
}

.fl-empty-text[b-d7vknxs1o2] {
    color: var(--fl-text-secondary, #94A3B8);
}

.fl-actions-card[b-d7vknxs1o2] {
    padding: 1.25rem;
    min-width: 0;
}

.fl-save-btn[b-d7vknxs1o2] {
    font-weight: 700;
    height: 40px;
    width: 100%;
}

.fl-cancel-btn[b-d7vknxs1o2] {
    font-weight: 600;
    height: 40px;
    width: 100%;
}

.fl-loading-state[b-d7vknxs1o2] {
    text-align: center;
    padding: 4rem 1rem;
}

.fl-loading-text[b-d7vknxs1o2] {
    color: var(--fl-text-secondary, #94A3B8);
}

.fl-alert-warning[b-d7vknxs1o2] {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: var(--fl-color-amber, #F59E0B);
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.85rem;
}

.fl-card-footer[b-d7vknxs1o2] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--fl-border, #E2E8F0);
    background: var(--fl-bg-surface-2, #F8FAFC);
}

.fl-cancel-btn[b-d7vknxs1o2] {
    font-weight: 600;
    height: 38px;
    min-width: 90px;
}

.fl-save-btn[b-d7vknxs1o2] {
    font-weight: 600;
    height: 38px;
    min-width: 160px;
}

/* ── Sticky Sidebar & Live Preview Card ─────────────────────────── */
.fl-sticky-sidebar[b-d7vknxs1o2] {
    position: sticky;
    top: 1rem;
}

.fl-preview-card[b-d7vknxs1o2] {
    border-top: 3px solid var(--fl-color-blue, #1565FF);
}

.fl-preview-badge[b-d7vknxs1o2] {
    background: rgba(37, 99, 235, 0.1);
    color: var(--fl-color-blue, #1565FF);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
}

.fl-preview-hero[b-d7vknxs1o2] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px dashed var(--fl-border, #E2E8F0);
    margin-bottom: 1.25rem;
}

.fl-preview-avatar[b-d7vknxs1o2] {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1565FF, #23A8FF);
    color: #FFFFFF;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(21, 101, 255, 0.25);
}

.fl-avatar-wood[b-d7vknxs1o2] {
    background: linear-gradient(135deg, #D97706, #F59E0B);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25);
}

.fl-preview-info[b-d7vknxs1o2] {
    min-width: 0;
    flex: 1;
}

.fl-preview-name[b-d7vknxs1o2] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--fl-text-primary, #0F172A);
    margin: 0 0 0.4rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fl-preview-meta[b-d7vknxs1o2] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.fl-pill-badge[b-d7vknxs1o2] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
}

.fl-pill-code[b-d7vknxs1o2] {
    background: var(--fl-bg-surface-2, #F1F5F9);
    color: var(--fl-text-secondary, #475569);
    font-family: monospace;
}

.fl-pill-cat[b-d7vknxs1o2] {
    background: rgba(217, 119, 6, 0.12);
    color: #D97706;
}

.fl-status-indicator[b-d7vknxs1o2] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 99px;
}

.fl-status-active[b-d7vknxs1o2] {
    background: rgba(34, 197, 94, 0.15);
    color: #16A34A;
}

.fl-status-inactive[b-d7vknxs1o2] {
    background: rgba(245, 165, 36, 0.15) !important;
    color: #D97706 !important;
}

.fl-preview-details-list[b-d7vknxs1o2] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.fl-preview-item[b-d7vknxs1o2] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.fl-preview-icon[b-d7vknxs1o2] {
    font-size: 1.05rem;
    color: var(--fl-color-blue, #1565FF);
    margin-top: 0.1rem;
    width: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fl-preview-item-content[b-d7vknxs1o2] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fl-preview-label[b-d7vknxs1o2] {
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--fl-text-secondary, #64748B);
}

.fl-preview-val[b-d7vknxs1o2] {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--fl-text-primary, #0F172A);
    word-break: break-word;
}

.fl-desc-clamp[b-d7vknxs1o2] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Tips Card ───────────────────────────────────────────────────── */
.fl-tips-card[b-d7vknxs1o2] {
    background: linear-gradient(135deg, rgba(21, 101, 255, 0.04), rgba(35, 168, 255, 0.02));
    border: 1px solid rgba(21, 101, 255, 0.15);
    margin-top: 1.5rem;
}

.fl-tips-title[b-d7vknxs1o2] {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--fl-text-primary, #0F172A);
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.fl-formula-box[b-d7vknxs1o2] {
    background: var(--fl-bg-surface-2, #F8FAFC);
    border: 1px solid var(--fl-border, #E2E8F0);
}

.fl-tips-list[b-d7vknxs1o2] {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.84rem;
    color: var(--fl-text-secondary, #475569);
    line-height: 1.55;
}

.fl-tips-list li[b-d7vknxs1o2] {
    margin-bottom: 0.4rem;
}

@media (max-width: 992px) {
    .fl-sticky-sidebar[b-d7vknxs1o2] {
        position: static;
        margin-top: 1rem;
    }
}

/* ── Mobile/Responsive Media Queries ────────────────────────────── */
@media (max-width: 768px) {
    .fl-product-page-container[b-d7vknxs1o2] {
        padding: 1rem 0.75rem 5rem 0.75rem;
    }

    .fl-header-title-bar[b-d7vknxs1o2] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.85rem !important;
    }

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

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

    .fl-header-actions .fl-cancel-btn[b-d7vknxs1o2] {
        flex: 1 !important;
        min-width: 0 !important;
        height: 40px !important;
    }

    .fl-header-actions .fl-save-btn[b-d7vknxs1o2] {
        flex: 2 !important;
        min-width: 0 !important;
        height: 40px !important;
    }

    .fl-card[b-d7vknxs1o2] {
        border-radius: 12px;
        margin-bottom: 1rem;
    }

    .fl-card-header[b-d7vknxs1o2] {
        padding: 0.85rem 1rem;
    }

    .fl-card-body[b-d7vknxs1o2] {
        padding: 1rem 0.75rem;
    }

    .fl-dimensions-table-wrap[b-d7vknxs1o2] {
        margin-top: 1rem;
    }

    .fl-dimension-header-wrap[b-d7vknxs1o2] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.25rem !important;
    }
}
/* /Components/Pages/Products/ProductDetail.razor.rz.scp.css */
/* Specific layout adjustments for Product Detail matching Customer Detail layout reference */
.fl-product-page-container[b-trw7wuqi5x] {
    padding: 1.5rem;
    max-width: 1300px;
    margin: 0 auto;
    box-sizing: border-box;
    width: 100%;
}

.fl-page-header[b-trw7wuqi5x] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.breadcrumb-trail[b-trw7wuqi5x] {
    margin-bottom: 0.5rem;
}

.breadcrumb-link[b-trw7wuqi5x] {
    color: var(--fl-text-secondary, #94A3B8);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: color 0.15s ease;
}

.breadcrumb-link:hover[b-trw7wuqi5x] {
    color: var(--fl-color-blue, #60A5FA);
}

.fl-avatar-large[b-trw7wuqi5x] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1565FF 0%, #23A8FF 100%);
    color: #FFFFFF;
    font-size: 1.2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(21, 101, 255, 0.25);
    flex-shrink: 0;
}

.fl-header-actions[b-trw7wuqi5x] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.fl-header-actions .e-btn[b-trw7wuqi5x] {
    white-space: nowrap !important;
    font-size: 0.85rem !important;
    padding: 0.45rem 0.85rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.fl-edit-btn[b-trw7wuqi5x] {
    font-weight: 700;
}

.fl-page-title[b-trw7wuqi5x] {
    font-family: var(--fl-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--fl-text-primary, #0F172A);
    line-height: 1.25;
    word-break: break-word;
}

.fl-page-subtitle[b-trw7wuqi5x] {
    font-size: 0.9rem;
    color: var(--fl-text-secondary, #94A3B8);
    margin-top: 0.25rem;
    margin-bottom: 0;
}

.fl-code-text[b-trw7wuqi5x] {
    color: var(--fl-color-blue, #60A5FA);
}

/* ── Two-Column Grid: Left Card compact (4.5fr) | Right Timber Card extended (7.5fr) ── */
.fl-detail-grid[b-trw7wuqi5x] {
    display: grid;
    grid-template-columns: minmax(340px, 4.5fr) minmax(500px, 7.5fr);
    gap: 1.5rem;
    align-items: start;
}

/* ── Interactive FL Cards ────────────────────────────────────────── */
.fl-card[b-trw7wuqi5x] {
    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.05);
    overflow: hidden;
}

.fl-highlight-card-top[b-trw7wuqi5x] {
    border-top: 3px solid var(--fl-color-blue, #1565FF);
}

.fl-card-header[b-trw7wuqi5x] {
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--fl-border, #E2E8F0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

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

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

.fl-formula-badge[b-trw7wuqi5x] {
    background: rgba(37, 99, 235, 0.12);
    color: var(--fl-color-blue, #2563EB);
    font-size: 0.78rem;
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    font-weight: 700;
    border: 1px solid rgba(37, 99, 235, 0.25);
}

.fl-card-body[b-trw7wuqi5x] {
    padding: 1.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

/* ── Spec Information Rows ───────────────────────────────────────── */
.fl-info-row[b-trw7wuqi5x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px dashed var(--fl-border-soft, #EEF2F7);
    font-size: 0.92rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fl-info-row:last-child[b-trw7wuqi5x] {
    border-bottom: none;
}

.fl-info-label[b-trw7wuqi5x] {
    font-size: 0.88rem;
    color: var(--fl-text-secondary, #475569);
    font-weight: 500;
}

.fl-info-val[b-trw7wuqi5x] {
    font-size: 0.92rem;
    color: var(--fl-text-primary, #0F172A);
    text-align: right;
    word-break: break-word;
}

.fl-code-badge[b-trw7wuqi5x] {
    font-family: var(--fl-font-mono, monospace);
    background: var(--fl-bg-surface-2, #F8FAFC);
    color: var(--fl-royal, #2563EB);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid var(--fl-border, #CBD5E1);
}

.fl-status-active[b-trw7wuqi5x] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #16A34A;
    background: rgba(22, 163, 74, 0.12);
    border: 1px solid rgba(22, 163, 74, 0.25);
    border-radius: 6px;
}

.fl-status-inactive[b-trw7wuqi5x] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #DC2626;
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.25);
    border-radius: 6px;
}

.fl-badge[b-trw7wuqi5x] {
    padding: 0.25rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 6px;
}

.fl-cft-pill[b-trw7wuqi5x] {
    background: var(--fl-royal, #2563EB);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .fl-product-page-container[b-trw7wuqi5x] {
        padding: 1rem 0.75rem 5rem 0.75rem;
    }

    .fl-detail-grid[b-trw7wuqi5x] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .fl-page-header[b-trw7wuqi5x] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
    }

    .fl-header-actions[b-trw7wuqi5x] {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .fl-header-actions .e-btn[b-trw7wuqi5x] {
        flex: 1 1 calc(50% - 0.25rem) !important;
        min-width: 120px !important;
    }
}
/* /Components/Pages/Products/ProductsList.razor.rz.scp.css */
.fl-products-container[b-itjv3cd3q3] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

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

.fl-page-title[b-itjv3cd3q3] {
    font-family: var(--fl-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--fl-text-primary, #FFFFFF);
    margin-bottom: 0.25rem;
    line-height: 1.25;
}

.fl-page-subtitle[b-itjv3cd3q3] {
    font-size: 0.9rem;
    color: var(--fl-text-secondary, #94A3B8);
    margin-bottom: 0;
}

.fl-add-btn[b-itjv3cd3q3] {
    font-weight: 700;
    height: 38px;
}

/* ── Interactive FL Cards ────────────────────────────────────────── */
.fl-card[b-itjv3cd3q3] {
    background: var(--fl-bg-surface, #0F1B32);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--fl-border, #1C2D4A);
    margin-bottom: 1.25rem;
    overflow: hidden;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.fl-toolbar-card[b-itjv3cd3q3] {
    padding: 1rem 1.25rem;
}

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

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

.fl-grid-card[b-itjv3cd3q3] {
    padding: 1.25rem;
    overflow-x: hidden !important;
}


@media (max-width: 768px) {
    .fl-products-container[b-itjv3cd3q3] {
        padding: 1rem 0.75rem;
    }

    .fl-page-header[b-itjv3cd3q3] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .fl-grid-card[b-itjv3cd3q3] {
        padding: 0.75rem;
    }
}

/* ── Table Typography & Links ────────────────────────────────────── */
.fl-code-link[b-itjv3cd3q3] {
    font-weight: 700;
    color: var(--fl-color-blue, #60A5FA);
    text-decoration: none;
    font-size: 0.92rem;
    transition: color 0.15s ease;
}

.fl-code-link:hover[b-itjv3cd3q3] {
    color: #93C5FD;
    text-decoration: underline;
}

.fl-name-cell .fl-item-name[b-itjv3cd3q3] {
    font-weight: 600;
    color: var(--fl-text-primary, #FFFFFF);
    font-size: 0.92rem;
}

.fl-name-cell .fl-hsn-text[b-itjv3cd3q3] {
    color: var(--fl-text-secondary, #94A3B8);
    font-size: 0.8rem;
}

.fl-cat-pill[b-itjv3cd3q3] {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    background: var(--fl-bg-surface-2, #142037);
    color: var(--fl-text-primary, #E2E8F0);
    border: 1px solid var(--fl-border, #1C2D4A);
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 500;
}

.fl-dims-count-badge[b-itjv3cd3q3] {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.8rem;
    background: rgba(37, 99, 235, 0.18);
    color: var(--fl-color-blue, #60A5FA);
    border-radius: 99px;
    font-size: 0.82rem;
    font-weight: 700;
    border: 1px solid rgba(37, 99, 235, 0.35);
}

.fl-uom-text[b-itjv3cd3q3] {
    color: var(--fl-text-primary, #FFFFFF);
    font-weight: 500;
    font-size: 0.9rem;
}

.fl-status-active[b-itjv3cd3q3] {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    background: rgba(34, 197, 94, 0.15);
    color: var(--fl-color-green, #22C55E);
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.8rem;
}

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

.fl-action-btns[b-itjv3cd3q3] {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
}

.fl-action-icon-btn[b-itjv3cd3q3] {
    color: var(--fl-text-secondary, #94A3B8) !important;
}

.fl-action-icon-btn:hover[b-itjv3cd3q3] {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.fl-action-delete-btn[b-itjv3cd3q3] {
    color: var(--fl-color-red, #EF4444) !important;
}

.fl-action-delete-btn:hover[b-itjv3cd3q3] {
    background: rgba(239, 68, 68, 0.18) !important;
}

.fl-text-muted[b-itjv3cd3q3] {
    color: var(--fl-text-muted, #64748B);
}

/* ── Empty & Loading States ──────────────────────────────────────── */
.fl-empty-state[b-itjv3cd3q3],
.fl-loading-state[b-itjv3cd3q3] {
    text-align: center;
    padding: 4rem 1rem;
}

.fl-empty-icon-wrap[b-itjv3cd3q3] {
    margin-bottom: 1rem;
}

.fl-empty-folder-icon[b-itjv3cd3q3] {
    color: var(--fl-text-muted, #64748B);
}

.fl-empty-title[b-itjv3cd3q3] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fl-text-primary, #FFFFFF);
    margin-bottom: 0.35rem;
}

.fl-empty-sub[b-itjv3cd3q3],
.fl-loading-text[b-itjv3cd3q3] {
    color: var(--fl-text-secondary, #94A3B8);
    font-size: 0.9rem;
}

/* ── Delete Dialog ───────────────────────────────────────────────── */
.fl-delete-dialog-body[b-itjv3cd3q3] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 0;
}

.fl-delete-icon-box[b-itjv3cd3q3] {
    font-size: 2rem;
    color: var(--fl-color-red, #EF4444);
    line-height: 1;
}

.fl-delete-title[b-itjv3cd3q3] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fl-text-primary, #FFFFFF);
    margin-bottom: 0.35rem;
}

.fl-delete-item-desc[b-itjv3cd3q3] {
    color: var(--fl-text-secondary, #94A3B8);
    margin-bottom: 0.5rem;
}

.fl-delete-note[b-itjv3cd3q3] {
    color: var(--fl-text-muted, #64748B);
    display: block;
    line-height: 1.4;
}



/* ── Pager Dark Theme Scoped Styling ─────────────────────────────── */
[b-itjv3cd3q3] .e-gridpager,
[b-itjv3cd3q3] .e-pager {
    background-color: var(--fl-bg-surface, #0F1B32) !important;
    border-top: 1px solid var(--fl-border, #1C2D4A) !important;
    color: var(--fl-text-secondary, #94A3B8) !important;
    padding: 0.75rem 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

[b-itjv3cd3q3] .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;
}

[b-itjv3cd3q3] .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;
}

[b-itjv3cd3q3] .e-pager .e-numericitem,
[b-itjv3cd3q3] .e-pager a.e-link,
[b-itjv3cd3q3] .e-pager .e-firstpage,
[b-itjv3cd3q3] .e-pager .e-prevpage,
[b-itjv3cd3q3] .e-pager .e-nextpage,
[b-itjv3cd3q3] .e-pager .e-lastpage,
[b-itjv3cd3q3] .e-pager .e-pager-default,
[b-itjv3cd3q3] .e-pager .e-spacing {
    background-color: var(--fl-bg-surface-2, #142037) !important;
    color: var(--fl-text-primary, #E2E8F0) !important;
    border: 1px solid var(--fl-border, #1C2D4A) !important;
    border-radius: 6px !important;
    min-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;
}

[b-itjv3cd3q3] .e-pager .e-numericitem:hover:not(.e-currentitem),
[b-itjv3cd3q3] .e-pager a.e-link:hover:not(.e-currentitem),
[b-itjv3cd3q3] .e-pager .e-firstpage:hover:not(.e-disable):not(.e-firstpagedisabled),
[b-itjv3cd3q3] .e-pager .e-prevpage:hover:not(.e-disable):not(.e-prevpagedisabled),
[b-itjv3cd3q3] .e-pager .e-nextpage:hover:not(.e-disable):not(.e-nextpagedisabled),
[b-itjv3cd3q3] .e-pager .e-lastpage:hover:not(.e-disable):not(.e-lastpagedisabled) {
    background-color: #1E2D4A !important;
    color: #FFFFFF !important;
    border-color: #2D4370 !important;
}

[b-itjv3cd3q3] .e-pager .e-currentitem,
[b-itjv3cd3q3] .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;
}

[b-itjv3cd3q3] .e-pager .e-icons {
    color: var(--fl-text-secondary, #94A3B8) !important;
    font-size: 12px !important;
}

[b-itjv3cd3q3] .e-pager .e-firstpagedisabled,
[b-itjv3cd3q3] .e-pager .e-prevpagedisabled,
[b-itjv3cd3q3] .e-pager .e-nextpagedisabled,
[b-itjv3cd3q3] .e-pager .e-lastpagedisabled,
[b-itjv3cd3q3] .e-pager .e-disable {
    background-color: var(--fl-bg-app, #0A1329) !important;
    border-color: var(--fl-border-soft, #152035) !important;
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

[b-itjv3cd3q3] .e-pager .e-firstpagedisabled .e-icons,
[b-itjv3cd3q3] .e-pager .e-prevpagedisabled .e-icons,
[b-itjv3cd3q3] .e-pager .e-nextpagedisabled .e-icons,
[b-itjv3cd3q3] .e-pager .e-lastpagedisabled .e-icons {
    color: #475569 !important;
}

[b-itjv3cd3q3] .e-pager .e-pagesizes .e-input-group {
    background-color: var(--fl-bg-app, #0A1329) !important;
    border: 1px solid var(--fl-border, #1C2D4A) !important;
    border-radius: 6px !important;
    height: 32px !important;
    color: var(--fl-text-primary, #E2E8F0) !important;
}

[b-itjv3cd3q3] .e-pager .e-pagesizes .e-input {
    color: var(--fl-text-primary, #E2E8F0) !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
}

[b-itjv3cd3q3] .e-pager .e-parentmsgbar {
    color: var(--fl-text-secondary, #94A3B8) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
}
/* /Components/Pages/Profile/MyProfile.razor.rz.scp.css */
.fl-profile-page-container[b-ci62mqglso] {
    padding: 1.5rem;
    max-width: 1300px;
    margin: 0 auto;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

.fl-page-header[b-ci62mqglso] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
    min-width: 0;
}

.breadcrumb-trail[b-ci62mqglso] {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.breadcrumb-link[b-ci62mqglso] {
    color: var(--fl-text-secondary, #94A3B8);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: color 0.15s ease;
}

.breadcrumb-link:hover[b-ci62mqglso] {
    color: var(--fl-color-blue, #60A5FA);
}

.breadcrumb-separator[b-ci62mqglso] {
    color: var(--fl-text-muted, #64748B);
    font-size: 0.85rem;
}

.breadcrumb-current[b-ci62mqglso] {
    color: var(--fl-text-primary, #E2E8F0);
    font-size: 0.88rem;
    font-weight: 600;
}

.fl-page-title[b-ci62mqglso] {
    font-family: var(--fl-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--fl-text-primary, #E2E8F0);
    line-height: 1.25;
    word-break: break-word;
}

.fl-page-subtitle[b-ci62mqglso] {
    font-size: 0.9rem;
    color: var(--fl-text-secondary, #94A3B8);
    margin-top: 0.25rem;
}

/* ── Interactive FL Cards ────────────────────────────────────────── */
.fl-card[b-ci62mqglso] {
    background: var(--fl-bg-surface, #0F1B32);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--fl-border, #1C2D4A);
    overflow: hidden;
    max-width: 100%;
    min-width: 0;
    transition: transform 180ms ease, box-shadow 180ms ease;
    margin-bottom: 1.5rem;
}

.fl-card:hover[b-ci62mqglso] {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.fl-highlight-card-top[b-ci62mqglso] {
    border-top: 3px solid var(--fl-color-blue, #1565FF);
}

.fl-card-header[b-ci62mqglso] {
    padding: 1rem 1.25rem;
    background: var(--fl-bg-surface-2, #142037);
    border-bottom: 1px solid var(--fl-border, #1C2D4A);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

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

/* ── Icon highlight box ───────────────────────────────────────────── */
.fl-hl-icon[b-ci62mqglso] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.fl-hl-icon .e-icons[b-ci62mqglso] {
    font-size: 1.15rem;
    line-height: 1;
    display: inline-block;
}

.fl-hl-bg--blue[b-ci62mqglso] {
    background: rgba(37, 99, 235, 0.18);
    color: var(--fl-color-blue, #60A5FA);
}

.fl-hl-bg--teal[b-ci62mqglso] {
    background: rgba(13, 148, 136, 0.18);
    color: var(--fl-color-teal, #14B8A6);
}

.fl-hl-bg--green[b-ci62mqglso] {
    background: rgba(34, 197, 94, 0.18);
    color: var(--fl-color-green, #22C55E);
}

.fl-hl-bg--amber[b-ci62mqglso] {
    background: rgba(245, 158, 11, 0.18);
    color: var(--fl-color-amber, #F59E0B);
}

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

.fl-card-body[b-ci62mqglso] {
    padding: 1.25rem;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* ── Information Rows ────────────────────────────────────────────── */
.fl-info-row[b-ci62mqglso] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--fl-border-soft, #152035);
    font-size: 0.92rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fl-info-row:last-child[b-ci62mqglso] {
    border-bottom: none;
}

.fl-info-label[b-ci62mqglso] {
    color: var(--fl-text-secondary, #94A3B8);
    font-weight: 500;
}

.fl-info-val[b-ci62mqglso] {
    color: var(--fl-text-primary, #E2E8F0);
    text-align: right;
    font-weight: 600;
}

/* ── Status Pills & Badges ────────────────────────────────────────── */
.fl-status-active[b-ci62mqglso] {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    background: rgba(34, 197, 94, 0.15);
    color: var(--fl-color-green, #22C55E);
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.8rem;
}

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

.fl-verified-badge[b-ci62mqglso] {
    color: var(--fl-color-green, #22C55E);
    font-weight: 600;
}

.fl-unverified-badge[b-ci62mqglso] {
    color: var(--fl-color-amber, #F59E0B);
    font-weight: 600;
}

.fl-role-item[b-ci62mqglso] {
    background: var(--fl-bg-surface-2, #142037);
    border: 1px solid var(--fl-border, #1C2D4A) !important;
}

.fl-role-pill[b-ci62mqglso] {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    background: rgba(37, 99, 235, 0.15);
    color: var(--fl-color-blue, #60A5FA);
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.82rem;
    border: 1px solid rgba(37, 99, 235, 0.3);
}

.fl-role-desc-text[b-ci62mqglso] {
    color: var(--fl-text-secondary, #94A3B8);
    font-size: 0.85rem;
    line-height: 1.4;
}

.fl-company-count-badge[b-ci62mqglso] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    background: rgba(37, 99, 235, 0.18);
    color: var(--fl-color-blue, #60A5FA);
    border: 1px solid rgba(37, 99, 235, 0.35);
    border-radius: 99px;
    font-size: 0.78rem;
    font-weight: 700;
}

/* ── Company Memberships Table ───────────────────────────────────── */
.fl-company-table[b-ci62mqglso] {
    width: 100%;
    border-collapse: collapse;
}

.fl-company-table th[b-ci62mqglso] {
    color: var(--fl-text-secondary, #94A3B8);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.75rem 1.25rem;
    background: var(--fl-bg-surface-2, #142037);
    border-bottom: 1px solid var(--fl-border, #1C2D4A);
}

.fl-company-table td[b-ci62mqglso] {
    padding: 0.85rem 1.25rem;
    color: var(--fl-text-primary, #E2E8F0);
    font-size: 0.88rem;
    border-bottom: 1px solid var(--fl-border-soft, #152035);
}

.fl-company-table tr:last-child td[b-ci62mqglso] {
    border-bottom: none;
}

/* ── Security / Password Form Styles ─────────────────────────────── */
.fl-security-notice[b-ci62mqglso] {
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.22);
    border-radius: 10px;
    padding: 0.9rem 1.15rem;
}

.fl-security-icon[b-ci62mqglso] {
    color: var(--fl-color-blue, #60A5FA);
    font-size: 1.15rem;
    flex-shrink: 0;
    line-height: 1.2;
}

.fl-security-title[b-ci62mqglso] {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--fl-color-blue, #60A5FA);
    margin-bottom: 0.25rem;
}

.fl-security-desc[b-ci62mqglso] {
    color: var(--fl-text-secondary, #94A3B8);
    font-size: 0.85rem;
    line-height: 1.45;
}

.fl-form-label[b-ci62mqglso] {
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--fl-text-primary, #E2E8F0);
    margin-bottom: 0.4rem;
}

.required-field[b-ci62mqglso]::after {
    content: " *";
    color: var(--fl-color-red, #EF4444);
}

.fl-input-action-wrap[b-ci62mqglso] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.fl-input-action-wrap .e-input-group[b-ci62mqglso],
.fl-input-action-wrap .e-control-wrapper[b-ci62mqglso] {
    flex: 1;
    min-width: 0;
}

.fl-pwd-toggle-btn[b-ci62mqglso] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--fl-text-secondary, #94A3B8);
    cursor: pointer;
    padding: 4px 8px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

.fl-pwd-toggle-btn:hover[b-ci62mqglso] {
    color: var(--fl-text-primary, #E2E8F0);
}

.fl-validation-error[b-ci62mqglso] {
    color: var(--fl-color-red, #EF4444);
    font-size: 0.78rem;
    margin-top: 0.25rem;
    font-weight: 500;
}

.fl-save-btn[b-ci62mqglso] {
    font-weight: 600;
    padding: 0.5rem 1.25rem;
}

.fl-text-muted[b-ci62mqglso] {
    color: var(--fl-text-secondary, #94A3B8);
}

/* ── Alerts ──────────────────────────────────────────────────────── */


.fl-alert-success[b-ci62mqglso] {
    background: rgba(34, 197, 94, 0.12);
    color: var(--fl-color-green, #22C55E);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
    padding: 0.85rem 1.15rem;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 0.75rem;
}

.btn-close-alert[b-ci62mqglso] {
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    padding: 2px 6px;
    display: flex;
    align-items: center;
}

.btn-close-alert:hover[b-ci62mqglso] {
    opacity: 1;
}

/* ── Loading & Empty States ───────────────────────────────────────── */
.fl-loading-state[b-ci62mqglso] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    color: var(--fl-text-secondary, #94A3B8);
}

.fl-loading-text[b-ci62mqglso] {
    font-size: 0.95rem;
    color: var(--fl-text-secondary, #94A3B8);
}

.fl-empty-state[b-ci62mqglso] {
    text-align: center;
    padding: 3.5rem 1.5rem;
    background: var(--fl-bg-surface, #0F1B32);
    border-radius: 12px;
    border: 1px dashed var(--fl-border, #1C2D4A);
}

.fl-empty-icon-wrap[b-ci62mqglso] {
    margin-bottom: 1rem;
}

.fl-empty-title[b-ci62mqglso] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fl-text-primary, #E2E8F0);
    margin-bottom: 0.5rem;
}

.fl-empty-sub[b-ci62mqglso] {
    font-size: 0.9rem;
    color: var(--fl-text-secondary, #94A3B8);
    margin-bottom: 1rem;
}

/* ── Responsive Behavior ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .fl-profile-page-container[b-ci62mqglso] {
        padding: 1rem;
    }

    .fl-page-title[b-ci62mqglso] {
        font-size: 1.4rem;
    }

    .fl-card-body[b-ci62mqglso] {
        padding: 1rem;
    }

    .fl-info-row[b-ci62mqglso] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }

    .fl-info-val[b-ci62mqglso] {
        text-align: left;
    }

    .fl-save-btn[b-ci62mqglso] {
        width: 100%;
    }
}

/* /Components/Pages/Quotations/QuotationAddEdit.razor.rz.scp.css */
.fl-quotation-form-container[b-o227ybmbda] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.fl-form-page-header[b-o227ybmbda] {
    margin-bottom: 1.5rem;
    width: 100%;
}

.breadcrumb-trail[b-o227ybmbda] {
    margin-bottom: 0.5rem;
}

.breadcrumb-link[b-o227ybmbda] {
    color: var(--fl-text-secondary, #94A3B8);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: color 0.15s ease;
    display: inline-flex;
    align-items: center;
}

.breadcrumb-link:hover[b-o227ybmbda] {
    color: var(--fl-color-blue, #60A5FA);
}

.fl-header-title-bar[b-o227ybmbda] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 1rem;
    flex-wrap: wrap;
}

.fl-page-title[b-o227ybmbda] {
    font-family: var(--fl-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--fl-text-primary, #0F172A);
    margin: 0;
    line-height: 1.25;
    word-break: break-word;
}

.fl-header-actions[b-o227ybmbda] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.fl-action-btn-row[b-o227ybmbda] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.fl-grand-pill[b-o227ybmbda] {
    background: linear-gradient(135deg, #1565FF, #23A8FF);
    color: #FFFFFF;
    padding: 0.45rem 0.9rem;
    border-radius: 9999px;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(21, 101, 255, 0.25);
    white-space: nowrap;
}

.fl-cancel-btn[b-o227ybmbda] {
    font-weight: 600;
    height: 38px;
    min-width: 90px;
}

.fl-save-btn[b-o227ybmbda] {
    font-weight: 600;
    height: 38px;
    min-width: 160px;
}

/* ── Interactive FL Cards ────────────────────────────────────────── */
.fl-card[b-o227ybmbda] {
    background: var(--fl-bg-surface, #FFFFFF);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--fl-border, #E2E8F0);
    margin-bottom: 1.5rem;
    overflow: hidden;
    max-width: 100%;
    min-width: 0;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.fl-card:hover[b-o227ybmbda] {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.fl-card-header[b-o227ybmbda] {
    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[b-o227ybmbda] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fl-hl-icon[b-o227ybmbda] {
    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[b-o227ybmbda] {
    background: rgba(37, 99, 235, 0.12);
    color: var(--fl-color-blue, #1565FF);
}

.fl-hl-bg--amber[b-o227ybmbda] {
    background: rgba(217, 119, 6, 0.12);
    color: #D97706;
}

.fl-hl-bg--green[b-o227ybmbda] {
    background: rgba(22, 163, 74, 0.12);
    color: #16A34A;
}

.fl-hl-bg--purple[b-o227ybmbda] {
    background: rgba(147, 51, 234, 0.12);
    color: #9333EA;
}

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

.fl-card-body[b-o227ybmbda] {
    padding: 1.25rem;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.fl-form-label[b-o227ybmbda] {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--fl-text-primary, #0F172A);
    margin-bottom: 0.4rem;
    display: block;
}

.required-field[b-o227ybmbda]::after {
    content: " *";
    color: var(--fl-color-red, #EF4444);
    font-weight: 700;
}

.fl-field-hint[b-o227ybmbda] {
    display: block;
    font-size: 0.78rem;
    color: var(--fl-text-secondary, #64748B);
    margin-top: 0.35rem;
}

/* Calculation Settings Banner */
.fl-settings-bar[b-o227ybmbda] {
    background: var(--fl-bg-surface-2, #F8FAFC);
    border: 1px solid var(--fl-border, #E2E8F0);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
}

.fl-setting-group[b-o227ybmbda] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.fl-setting-group label[b-o227ybmbda] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--fl-text-secondary, #64748B);
}

.fl-mode-btn-group[b-o227ybmbda] {
    display: inline-flex;
    border-radius: 6px;
    border: 1px solid var(--fl-border, #CBD5E1);
    overflow: hidden;
}

.fl-mode-btn[b-o227ybmbda] {
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    background: var(--fl-bg-surface, #FFFFFF);
    color: var(--fl-text-secondary, #475569);
    border: none;
    border-right: 1px solid var(--fl-border, #CBD5E1);
    cursor: pointer;
    transition: all 0.15s;
}

.fl-mode-btn:last-child[b-o227ybmbda] {
    border-right: none;
}

.fl-mode-btn.active[b-o227ybmbda] {
    background: var(--fl-color-blue, #1565FF);
    color: #FFFFFF;
    font-weight: 600;
}

/* Timber Items Table */
.fl-items-table-wrap[b-o227ybmbda] {
    overflow-x: auto;
    border: 1px solid var(--fl-border, #E2E8F0);
    border-radius: 8px;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.fl-items-table[b-o227ybmbda] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.fl-items-table th[b-o227ybmbda] {
    background: var(--fl-bg-surface-2, #F8FAFC);
    color: var(--fl-text-secondary, #475569);
    font-weight: 600;
    padding: 0.75rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--fl-border, #E2E8F0);
    white-space: nowrap;
}

.fl-items-table td[b-o227ybmbda] {
    padding: 0.5rem;
    border-bottom: 1px solid var(--fl-border, #E2E8F0);
    vertical-align: middle;
}

.fl-cft-badge[b-o227ybmbda] {
    background: rgba(147, 51, 234, 0.12);
    color: #9333EA;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.8125rem;
    display: inline-block;
}

.fl-btn-remove[b-o227ybmbda] {
    color: var(--fl-color-red, #EF4444);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.35rem;
    border-radius: 4px;
    transition: background 0.15s;
}

.fl-btn-remove:hover[b-o227ybmbda] {
    background: rgba(239, 68, 68, 0.15);
}

/* Calculation Breakdown Card */
.fl-breakdown-card[b-o227ybmbda] {
    background: var(--fl-bg-surface, #FFFFFF);
    border: 1px solid var(--fl-border, #E2E8F0);
    border-radius: 12px;
    padding: 1.25rem;
}

.fl-breakdown-row[b-o227ybmbda] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0;
    font-size: 0.875rem;
    color: var(--fl-text-secondary, #475569);
    border-bottom: 1px dashed var(--fl-border, #E2E8F0);
}

.fl-breakdown-row:last-child[b-o227ybmbda] {
    border-bottom: none;
}

.fl-breakdown-row.highlight[b-o227ybmbda] {
    font-weight: 600;
    color: var(--fl-text-primary, #0F172A);
}

.fl-breakdown-row.grand-total[b-o227ybmbda] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--fl-color-blue, #1565FF);
    border-top: 2px solid var(--fl-border, #E2E8F0);
    border-bottom: 2px solid var(--fl-border, #E2E8F0);
    padding: 0.75rem 0;
    margin: 0.5rem 0;
}

.fl-breakdown-row.balance[b-o227ybmbda] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--fl-color-amber, #D97706);
}

.fl-btn-record-payment[b-o227ybmbda] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--fl-color-blue, #1565FF);
    background: rgba(21, 101, 255, 0.08);
    color: var(--fl-color-blue, #1565FF);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.18s ease;
    padding: 0;
}

.fl-btn-record-payment:hover[b-o227ybmbda] {
    background: var(--fl-color-blue, #1565FF);
    color: #FFFFFF;
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(21, 101, 255, 0.35);
}



/* ── Mobile/Responsive Media Queries ────────────────────────────── */
@media (max-width: 768px) {
    .fl-quotation-form-container[b-o227ybmbda] {
        padding: 1rem 0.75rem 5rem 0.75rem !important;
    }

    .fl-header-title-bar[b-o227ybmbda] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.85rem !important;
    }

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

    .fl-header-actions[b-o227ybmbda] {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.5rem !important;
        align-items: stretch !important;
    }

    .fl-grand-pill[b-o227ybmbda] {
        text-align: center !important;
        width: 100% !important;
        padding: 0.6rem !important;
        font-size: 1rem !important;
    }

    .fl-action-btn-row[b-o227ybmbda] {
        display: flex !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .fl-cancel-btn[b-o227ybmbda] {
        flex: 1 !important;
        min-width: 0 !important;
        height: 40px !important;
    }

    .fl-save-btn[b-o227ybmbda] {
        flex: 2 !important;
        min-width: 0 !important;
        height: 40px !important;
    }

    .fl-card[b-o227ybmbda] {
        border-radius: 12px !important;
        margin-bottom: 1rem !important;
    }

    .fl-card-header[b-o227ybmbda] {
        padding: 0.85rem 1rem !important;
    }

    .fl-card-body[b-o227ybmbda] {
        padding: 1rem 0.75rem !important;
    }

    .fl-settings-bar[b-o227ybmbda] {
        padding: 0.85rem 1rem !important;
        gap: 1rem !important;
    }
}
/* /Components/Pages/Quotations/QuotationDetail.razor.rz.scp.css */
/* Specific layout adjustments for Quotation Detail (Core typography, fl-card, fl-info-row inherited from app.css) */
.fl-detail-container[b-s7hdzkx6g2] {
    padding: 1.5rem;
    max-width: 1300px;
    margin: 0 auto;
}

.fl-detail-header[b-s7hdzkx6g2] {
    margin-bottom: 1.5rem;
}

.breadcrumb-trail[b-s7hdzkx6g2] {
    margin-bottom: 0.5rem;
}

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

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

.fl-header-title-bar[b-s7hdzkx6g2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.fl-title-with-badge[b-s7hdzkx6g2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.fl-page-title[b-s7hdzkx6g2] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--fl-text-primary, #0F172A);
    margin: 0;
}

.fl-header-actions[b-s7hdzkx6g2] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.fl-detail-grid[b-s7hdzkx6g2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .fl-detail-container[b-s7hdzkx6g2] {
        padding: 1rem 0.75rem 5rem 0.75rem !important;
    }

    .fl-header-title-bar[b-s7hdzkx6g2] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.85rem !important;
    }

    .fl-page-title[b-s7hdzkx6g2] {
        font-size: 1.4rem !important;
    }

    .fl-header-actions[b-s7hdzkx6g2] {
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    .fl-header-actions .e-btn[b-s7hdzkx6g2] {
        flex: 1 !important;
        min-width: 120px !important;
    }

    .fl-detail-grid[b-s7hdzkx6g2] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
}

.fl-cft-tag[b-s7hdzkx6g2] {
    background: rgba(147, 51, 234, 0.12);
    color: #9333ea;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
}

/* ── Thermal Paper Roll Receipt Styling (80mm POS Standard) ────────── */
.fl-thermal-receipt[b-s7hdzkx6g2] {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    background: #FFFFFF;
    color: #000000;
    font-family: 'Courier New', Courier, monospace, 'Lucida Console', sans-serif;
    font-size: 11.5px;
    line-height: 1.35;
    padding: 16px 12px;
    border-radius: 2px;
    box-sizing: border-box;
}

.thermal-header[b-s7hdzkx6g2] {
    text-align: center;
    margin-bottom: 6px;
}

.thermal-store-name[b-s7hdzkx6g2] {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.thermal-store-sub[b-s7hdzkx6g2] {
    font-size: 10.5px;
    font-weight: 600;
    color: #222;
}

.thermal-store-info[b-s7hdzkx6g2],
.thermal-store-address[b-s7hdzkx6g2] {
    font-size: 9.5px;
    color: #333;
    margin-top: 1px;
}

.thermal-doc-title[b-s7hdzkx6g2] {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    text-align: center;
    margin: 3px 0;
    text-transform: uppercase;
}

.thermal-divider-double[b-s7hdzkx6g2] {
    text-align: center;
    font-weight: 700;
    letter-spacing: -1px;
    overflow: hidden;
    white-space: nowrap;
    margin: 3px 0;
    font-size: 10px;
    user-select: none;
}

.thermal-divider-dashed[b-s7hdzkx6g2] {
    text-align: center;
    letter-spacing: -0.5px;
    overflow: hidden;
    white-space: nowrap;
    margin: 3px 0;
    font-size: 10px;
    user-select: none;
}

.thermal-meta[b-s7hdzkx6g2] {
    margin: 4px 0;
}

.thermal-row[b-s7hdzkx6g2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2px;
    font-size: 10.5px;
}

.thermal-row strong[b-s7hdzkx6g2] {
    font-weight: 700;
}

.thermal-items-header[b-s7hdzkx6g2] {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 10.5px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.thermal-col-desc[b-s7hdzkx6g2] {
    flex: 2;
    text-align: left;
}

.thermal-col-qty[b-s7hdzkx6g2] {
    flex: 1.2;
    text-align: center;
}

.thermal-col-amt[b-s7hdzkx6g2] {
    flex: 1;
    text-align: right;
}

.thermal-item-block[b-s7hdzkx6g2] {
    margin-bottom: 5px;
    font-size: 10.5px;
}

.thermal-item-title[b-s7hdzkx6g2] {
    font-weight: 700;
    word-break: break-word;
}

.thermal-item-specs[b-s7hdzkx6g2] {
    font-size: 9.5px;
    color: #333;
    padding-left: 6px;
}

.thermal-item-row[b-s7hdzkx6g2] {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    padding-left: 6px;
}

.thermal-item-disc[b-s7hdzkx6g2] {
    font-size: 9px;
    color: #444;
    padding-left: 6px;
}

.thermal-totals[b-s7hdzkx6g2] {
    margin-top: 4px;
}

.thermal-grand-total[b-s7hdzkx6g2] {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    margin: 4px 0;
}

.thermal-balance[b-s7hdzkx6g2] {
    font-size: 11.5px !important;
    font-weight: 700 !important;
}

.thermal-notes-section[b-s7hdzkx6g2] {
    font-size: 9.5px;
    margin: 4px 0;
}

.thermal-note-line[b-s7hdzkx6g2] {
    margin-bottom: 2px;
}

.thermal-footer[b-s7hdzkx6g2] {
    text-align: center;
    margin-top: 8px;
}

.thermal-thankyou[b-s7hdzkx6g2] {
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 3px;
}

.thermal-footer-sub[b-s7hdzkx6g2] {
    font-size: 9px;
    color: #444;
}

.thermal-cut-line[b-s7hdzkx6g2] {
    font-size: 9px;
    color: #777;
    margin-top: 6px;
    letter-spacing: 2px;
}

/* ── Screen vs Thermal Print Visibility ───────────────────────────── */
.fl-thermal-print-only[b-s7hdzkx6g2] {
    display: none;
}

@media print {

    /* Hide the web application UI entirely */
    body[b-s7hdzkx6g2],
    html[b-s7hdzkx6g2] {
        background: #FFFFFF !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body *[b-s7hdzkx6g2] {
        visibility: hidden !important;
    }

    /* Print exclusively the thermal paper roll receipt */
    .fl-thermal-print-only[b-s7hdzkx6g2],
    .fl-thermal-print-only *[b-s7hdzkx6g2] {
        visibility: visible !important;
        display: block !important;
    }

    .fl-thermal-print-only[b-s7hdzkx6g2] {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 78mm !important;
        max-width: 80mm !important;
        margin: 0 !important;
        padding: 2mm 3mm !important;
        box-shadow: none !important;
        border: none !important;
        background: #FFFFFF !important;
        color: #000000 !important;
    }

    .fl-thermal-receipt[b-s7hdzkx6g2] {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .thermal-row[b-s7hdzkx6g2],
    .thermal-items-header[b-s7hdzkx6g2],
    .thermal-item-row[b-s7hdzkx6g2] {
        display: flex !important;
    }

    @page {
        size: 80mm auto;
        margin: 0;
    }
}
/* /Components/Pages/Quotations/QuotationsList.razor.rz.scp.css */
/* Specific layout adjustments for Quotations List (Core typography and styling inherited from app.css) */
.fl-quotations-container[b-ib7gy36enu] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.fl-page-header[b-ib7gy36enu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.fl-page-title[b-ib7gy36enu] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--fl-text-primary, #0F172A);
    margin: 0;
}

.fl-stats-row[b-ib7gy36enu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.fl-stat-card[b-ib7gy36enu] {
    background: var(--fl-bg-surface, #ffffff);
    border: 1px solid var(--fl-border, #e2e8f0);
    border-radius: 12px;
    padding: 1.15rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fl-stat-card:hover[b-ib7gy36enu] {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.fl-stat-icon[b-ib7gy36enu] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.fl-stat-icon--blue[b-ib7gy36enu] {
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
}

.fl-stat-icon--amber[b-ib7gy36enu] {
    background: rgba(217, 119, 6, 0.12);
    color: #d97706;
}

.fl-stat-icon--green[b-ib7gy36enu] {
    background: rgba(22, 163, 74, 0.12);
    color: #16a34a;
}

.fl-stat-icon--purple[b-ib7gy36enu] {
    background: rgba(147, 51, 234, 0.12);
    color: #9333ea;
}

.fl-stat-content[b-ib7gy36enu] {
    display: flex;
    flex-direction: column;
}

.fl-stat-label[b-ib7gy36enu] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fl-text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.fl-stat-value[b-ib7gy36enu] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--fl-text-primary, #0f172a);
    margin-top: 0.15rem;
}

.fl-toolbar-card[b-ib7gy36enu] {
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.fl-toolbar-grid[b-ib7gy36enu] {
    display: grid;
    grid-template-columns: 1fr 240px auto;
    gap: 0.875rem;
    align-items: center;
}

@media (max-width: 900px) {
    .fl-toolbar-grid[b-ib7gy36enu] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .fl-toolbar-grid[b-ib7gy36enu] {
        grid-template-columns: 1fr;
    }

    .fl-quotations-container[b-ib7gy36enu] {
        padding: 1rem 0.75rem 5rem 0.75rem !important;
    }
}

.fl-grid-card[b-ib7gy36enu] {
    padding: 0.5rem;
    overflow: hidden;
}

.fl-tax-pill[b-ib7gy36enu] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--fl-bg-surface-2, #f1f5f9);
    color: var(--fl-text-secondary, #475569);
    width: fit-content;
}

.fl-action-btns[b-ib7gy36enu] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.fl-action-btn[b-ib7gy36enu] {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    border: 1px solid var(--fl-border, #e2e8f0) !important;
    background: var(--fl-bg-surface-2, #f8fafc) !important;
    color: var(--fl-text-secondary, #64748b) !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

.fl-action-btn:hover[b-ib7gy36enu] {
    background: var(--fl-bg-surface, #ffffff) !important;
    color: var(--fl-text-primary, #0f172a) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px);
}

.fl-btn-view:hover[b-ib7gy36enu] {
    color: var(--fl-color-blue, #1565ff) !important;
    border-color: rgba(21, 101, 255, 0.4) !important;
    background: rgba(21, 101, 255, 0.1) !important;
}

.fl-btn-edit:hover[b-ib7gy36enu] {
    color: var(--fl-color-amber, #d97706) !important;
    border-color: rgba(217, 119, 6, 0.4) !important;
    background: rgba(217, 119, 6, 0.1) !important;
}

.fl-btn-status[b-ib7gy36enu] {
    color: #C084FC !important;
    background: rgba(168, 85, 247, 0.12) !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
}

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

.fl-btn-delete[b-ib7gy36enu] {
    color: var(--fl-color-red, #dc2626) !important;
}

.fl-btn-delete:hover[b-ib7gy36enu] {
    color: var(--fl-color-red, #dc2626) !important;
    border-color: rgba(220, 38, 38, 0.4) !important;
    background: rgba(220, 38, 38, 0.1) !important;
}
/* /Components/Pages/ResetPassword.razor.rz.scp.css */
[b-e1x4fce6r7] .fl-auth-screen {
    position: relative;
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    background: var(--fl-bg-app);
    overflow: hidden !important;
    display: flex;
}

[b-e1x4fce6r7] .fl-auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

[b-e1x4fce6r7] .fl-auth-hero {
    order: 2;
    background-image: linear-gradient(180deg, rgba(4, 12, 42, 0.08) 0%, rgba(4, 12, 42, 0.15) 25%, rgba(2, 8, 28, 0.35) 60%, rgba(0, 0, 0, 0.55) 100%), url('/Login%20hero%20BG.png');
    background-size: cover;
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #0A1430;
    position: relative;
    padding: 56px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: #FFFFFF;
    height: 100vh;
    box-sizing: border-box;
}

[b-e1x4fce6r7] .fl-hero-bg-overlay {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(ellipse at 99% 76%, rgba(20, 103, 226, -0.75) 0%, transparent 100%), 
        linear-gradient(to right, transparent 100%, rgba(5, 36, 54, 32.55) 0%);
    pointer-events: none;
    z-index: 1;
}

[b-e1x4fce6r7] .fl-hero-ambient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
    pointer-events: none;
}

    [b-e1x4fce6r7] .fl-hero-ambient-orb.orb-1 {
        width: 550px;
        height: 550px;
        background: radial-gradient(circle, #1565FF 0%, #0D47A1 60%, transparent 100%);
        top: -120px;
        right: -120px;
        opacity: 0.45;
        filter: blur(100px);
    }

    [b-e1x4fce6r7] .fl-hero-ambient-orb.orb-2 {
        width: 420px;
        height: 420px;
        background: radial-gradient(circle, #16D3D1 0%, #0891B2 60%, transparent 100%);
        bottom: -80px;
        left: -80px;
        opacity: 0.35;
        filter: blur(90px);
    }

    [b-e1x4fce6r7] .fl-hero-ambient-orb.orb-3 {
        position: absolute;
        width: 280px;
        height: 280px;
        background: radial-gradient(circle, #6366F1 0%, transparent 100%);
        bottom: 30%;
        right: -40px;
        opacity: 0.2;
        filter: blur(70px);
        border-radius: 50%;
        pointer-events: none;
    }

/* ─── Hero Content & Showcase ────────────────────────────────── */
[b-e1x4fce6r7] .fl-hero-content {
    position: relative;
    z-index: 2;
    max-width: 520px;
    margin: 0 auto;
}

/* Feature Badge Pill */
[b-e1x4fce6r7] .fl-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    font-size: 12px;
    font-weight: 600;
    color: #E2E8F0;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transition: all 300ms ease;
}

    [b-e1x4fce6r7] .fl-hero-badge:hover {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.25);
        transform: translateY(-2px);
    }

[b-e1x4fce6r7] .fl-badge-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.8);
    animation: fl-pulse-live-b-e1x4fce6r7 2s infinite ease-in-out;
}

@keyframes fl-pulse-live-b-e1x4fce6r7 {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.4);
        opacity: 0.6;
    }
}

[b-e1x4fce6r7] .fl-hero-title {
    font-family: var(--fl-font-display);
    font-size: 42px;
    font-weight: 900;
    line-height: 1.10;
    color: #FFFFFF;
    margin-bottom: 16px;
    letter-spacing: -1px;
}

[b-e1x4fce6r7] .fl-hero-gradient-text {
    background: linear-gradient(135deg, #38BDF8 0%, #22D3EE 50%, #818CF8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[b-e1x4fce6r7] .fl-hero-subtitle {
    font-size: 15px;
    line-height: 1.60;
    color: rgba(255, 255, 255, 0.80);
    margin-bottom: 32px;
    font-weight: 400;
}

/* Showcase Container */
[b-e1x4fce6r7] .fl-hero-showcase {
    position: relative;
    margin-bottom: 24px;
}

/* Floating Micro Toasts via SfCard */
[b-e1x4fce6r7] .fl-floating-toast.e-card {
    position: absolute;
    z-index: 10;
    background: rgba(8, 18, 44, 0.88) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 14px !important;
    padding: 10px 16px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.50), 0 0 24px rgba(21, 101, 255, 0.25) !important;
}

[b-e1x4fce6r7] .fl-toast--top {
    top: -18px;
    right: -14px;
    animation: fl-float-top-b-e1x4fce6r7 5s ease-in-out infinite;
}

[b-e1x4fce6r7] .fl-toast--bottom {
    bottom: -16px;
    left: -14px;
    animation: fl-float-bottom-b-e1x4fce6r7 6s ease-in-out infinite;
}

@keyframes fl-float-top-b-e1x4fce6r7 {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes fl-float-bottom-b-e1x4fce6r7 {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}

[b-e1x4fce6r7] .fl-toast-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

[b-e1x4fce6r7] .fl-toast-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

[b-e1x4fce6r7] .fl-toast-icon--green {
    background: rgba(34, 197, 94, 0.30);
    color: #22C55E;
}

[b-e1x4fce6r7] .fl-toast-icon--blue {
    background: rgba(35, 168, 255, 0.30);
    color: #38BDF8;
}

[b-e1x4fce6r7] .fl-toast-title {
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.3;
}

[b-e1x4fce6r7] .fl-toast-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.70);
}

/* Floating Glass Main Widget via SfCard */
[b-e1x4fce6r7] .fl-hero-widget.e-card {
    background: rgba(255, 255, 255, 0.09) !important;
    backdrop-filter: blur(32px) !important;
    -webkit-backdrop-filter: blur(32px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 20px !important;
    padding: 20px 24px !important;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.45), 
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

    [b-e1x4fce6r7] .fl-hero-widget.e-card .e-card-content {
        padding: 0 !important;
    }

    [b-e1x4fce6r7] .fl-hero-widget.e-card:hover {
        transform: translateY(-4px);
        box-shadow: 
            0 28px 80px rgba(0, 0, 0, 0.55), 
            inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    }

[b-e1x4fce6r7] .fl-widget-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

[b-e1x4fce6r7] .fl-widget-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(35, 168, 255, 0.30) 0%, rgba(56, 189, 248, 0.20) 100%);
    color: #38BDF8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 1px solid rgba(35, 168, 255, 0.25);
}

[b-e1x4fce6r7] .fl-widget-title {
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0.3px;
}

[b-e1x4fce6r7] .fl-widget-sub {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
}

[b-e1x4fce6r7] .fl-status-pill.fl-status--paid {
    background: rgba(34, 197, 94, 0.20);
    color: #22C55E;
    border: 1px solid rgba(34, 197, 94, 0.40);
    border-radius: 9999px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Sparkline Chart */
[b-e1x4fce6r7] .fl-widget-chart {
    width: 100%;
    height: 58px;
    margin-bottom: 16px;
}

[b-e1x4fce6r7] .fl-sparkline-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

[b-e1x4fce6r7] .fl-chart-pulse {
    animation: fl-dot-pulse-b-e1x4fce6r7 2s infinite;
}

@keyframes fl-dot-pulse-b-e1x4fce6r7 {
    0%, 100% {
        transform: scale(1);
        opacity: 0.35;
    }

    50% {
        transform: scale(1.6);
        opacity: 0.8;
    }
}

[b-e1x4fce6r7] .fl-widget-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

[b-e1x4fce6r7] .fl-widget-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

[b-e1x4fce6r7] .fl-widget-val {
    font-family: var(--fl-font-display);
    font-size: 16px;
    font-weight: 800;
    color: #FFFFFF;
    margin-top: 4px;
}

[b-e1x4fce6r7] .fl-widget-trend {
    font-size: 11px;
    font-weight: 700;
    margin-top: 2px;
}

/* Trust Bar */
[b-e1x4fce6r7] .fl-hero-trust {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.80);
    margin-top: 16px;
}

[b-e1x4fce6r7] .fl-trust-rating {
    display: flex;
    align-items: center;
    gap: 8px;
}

[b-e1x4fce6r7] .fl-stars {
    color: #FBBF24;
    letter-spacing: 2px;
    font-size: 12px;
}

[b-e1x4fce6r7] .fl-rating-score {
    font-weight: 800;
    color: #FFFFFF;
}

[b-e1x4fce6r7] .fl-trust-divider {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.25);
}

[b-e1x4fce6r7] .fl-trust-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
}

    [b-e1x4fce6r7] .fl-trust-text strong {
        color: #FFFFFF;
        font-weight: 700;
    }

/* ═══════════════════════════════════════════════════════════
   FORM PANEL (LEFT SIDE) - PREMIUM STYLING
   ═══════════════════════════════════════════════════════════ */

[b-e1x4fce6r7] .fl-auth-card.e-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 100%;
    max-width: 420px;
    padding: 0 !important;
}

    [b-e1x4fce6r7] .fl-auth-card.e-card .e-card-content {
        padding: 0 !important;
    }

[b-e1x4fce6r7] .fl-auth-checkbox.e-checkbox-wrapper .e-label {
    font-size: 13px !important;
    color: var(--fl-text-secondary) !important;
    font-weight: 500 !important;
}

[b-e1x4fce6r7] .fl-auth-checkbox.e-checkbox-wrapper .e-frame {
    border-radius: 4px !important;
}

[b-e1x4fce6r7] .e-btn.fl-pwd-toggle {
    position: absolute;
    right: 10px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--fl-text-muted) !important;
    padding: 0 4px !important;
    min-height: auto !important;
    height: auto !important;
    z-index: 5;
}

/* ─── Form Panel (LEFT SIDE) ─────────────────────────── */
[b-e1x4fce6r7] .fl-auth-form-wrap {
    order: 1;
    background: var(--fl-bg-surface);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 48px;
    position: relative;
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
}

[b-e1x4fce6r7] .fl-auth-top-bar {
    position: absolute;
    top: 28px;
    right: 32px;
    z-index: 10;
    display: flex;
    align-items: center;
}

[b-e1x4fce6r7] .fl-theme-toggle-btn.e-btn {
    height: 40px !important;
    padding: 0 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
    background: var(--fl-bg-surface-2) !important;
    border: 1px solid var(--fl-border) !important;
    color: var(--fl-text-primary) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 200ms ease !important;
}

    [b-e1x4fce6r7] .fl-theme-toggle-btn.e-btn:hover {
        background: var(--fl-royal) !important;
        color: #FFFFFF !important;
        border-color: var(--fl-royal) !important;
        box-shadow: 0 6px 16px rgba(21, 101, 255, 0.30) !important;
        transform: translateY(-1px);
    }

[b-e1x4fce6r7] .fl-theme-toggle-content {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

[b-e1x4fce6r7] .fl-theme-icon {
    display: inline-block !important;
    flex-shrink: 0 !important;
}

[b-e1x4fce6r7] .fl-auth-card {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* =============================================================
   BRAND LOGO STYLING
   ============================================================= */

[b-e1x4fce6r7] .fl-form-brand,
.fl-form-brand[b-e1x4fce6r7] {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    justify-content: center;
}

.fl-theme-light .fl-form-logo[b-e1x4fce6r7],
.fl-theme-light[b-e1x4fce6r7]  .fl-form-logo,
.fl-form-logo[b-e1x4fce6r7],
[b-e1x4fce6r7] .fl-form-logo {
    height: 110px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    display: block;
    filter: none !important;
    opacity: 1 !important;
}

.fl-theme-dark .fl-form-logo[b-e1x4fce6r7],
.fl-theme-dark[b-e1x4fce6r7]  .fl-form-logo,
.fl-auth-screen.fl-theme-dark .fl-form-logo[b-e1x4fce6r7],
[b-e1x4fce6r7] .fl-auth-screen.fl-theme-dark .fl-form-logo {
    height: 120px;
    width: 100%;
    margin-left: -15px;
    max-width: 200px;
    object-fit: contain;
    display: block;
    filter: none !important;
    opacity: 1 !important;
}

[b-e1x4fce6r7] .fl-auth-title {
    font-family: var(--fl-font-display);
    font-size: 28px;
    font-weight: 900;
    color: var(--fl-text-primary);
    margin: 0 0 8px;
    letter-spacing: -0.5px;
}

[b-e1x4fce6r7] .fl-auth-sub {
    font-size: 14px;
    color: var(--fl-text-secondary);
    margin: 0 0 28px;
    line-height: 1.5;
    font-weight: 400;
}

[b-e1x4fce6r7] .fl-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

[b-e1x4fce6r7] .fl-field-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--fl-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[b-e1x4fce6r7] .fl-input-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

[b-e1x4fce6r7] .fl-field-icon {
    position: absolute;
    left: 14px;
    font-size: 15px;
    color: var(--fl-text-muted);
    z-index: 5;
    pointer-events: none;
}

[b-e1x4fce6r7] .fl-auth-input {
    width: 100% !important;
}

    [b-e1x4fce6r7] .fl-auth-input input.e-input {
        padding-left: 40px !important;
        height: 42px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
        border: 1.5px solid var(--fl-border) !important;
        background: var(--fl-bg-surface-2) !important;
        color: var(--fl-text-primary) !important;
        transition: all 200ms ease !important;
        font-weight: 500;
    }

    [b-e1x4fce6r7] .fl-auth-input input.e-input:focus {
        border-color: var(--fl-royal) !important;
        box-shadow: 0 0 0 3px rgba(21, 101, 255, 0.10) !important;
    }

    [b-e1x4fce6r7] .fl-auth-input input.e-input::placeholder {
        color: var(--fl-text-muted);
    }

[b-e1x4fce6r7] .fl-pwd-toggle {
    position: absolute;
    right: 14px;
    background: none;
    border: none;
    color: var(--fl-text-muted);
    cursor: pointer;
    z-index: 5;
    padding: 0;
    transition: color 200ms ease;
}

    [b-e1x4fce6r7] .fl-pwd-toggle:hover {
        color: var(--fl-text-primary);
    }

[b-e1x4fce6r7] .fl-btn-auth.e-btn {
    width: 100% !important;
    height: 44px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #1565FF 0%, #0052EA 100%) !important;
    box-shadow: 0 6px 20px rgba(21, 101, 255, 0.40) !important;
    color: #FFFFFF !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    text-transform: none !important;
    transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    border: none !important;
    margin-top: 8px;
}

    [b-e1x4fce6r7] .fl-btn-auth.e-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 28px rgba(21, 101, 255, 0.50) !important;
    }

    [b-e1x4fce6r7] .fl-btn-auth.e-btn:active {
        transform: translateY(0);
        box-shadow: 0 4px 12px rgba(21, 101, 255, 0.35) !important;
    }

[b-e1x4fce6r7] .fl-btn-auth-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
}

/* ─── Circular Round Loading Spinner ───────────────────────────── */
[b-e1x4fce6r7] .fl-round-spinner,
.fl-round-spinner[b-e1x4fce6r7] {
    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-b-e1x4fce6r7 0.75s linear infinite !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

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

[b-e1x4fce6r7] .fl-auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0 18px;
    color: var(--fl-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

    [b-e1x4fce6r7] .fl-auth-divider::before,
    [b-e1x4fce6r7] .fl-auth-divider::after {
        content: '';
        flex: 1;
        border-bottom: 1.5px solid var(--fl-border);
    }

    [b-e1x4fce6r7] .fl-divider-text,
    [b-e1x4fce6r7] .fl-auth-divider span {
        padding: 0 14px;
    }

[b-e1x4fce6r7] .fl-sso-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

[b-e1x4fce6r7] .e-btn.fl-btn-sso,
[b-e1x4fce6r7] .fl-btn-sso {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    height: 42px !important;
    background: var(--fl-bg-surface-2) !important;
    border: 1.5px solid var(--fl-border) !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--fl-text-primary) !important;
    text-transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    cursor: pointer !important;
    transition: all 200ms ease !important;
}

    [b-e1x4fce6r7] .e-btn.fl-btn-sso:hover,
    [b-e1x4fce6r7] .fl-btn-sso:hover {
        background: var(--fl-border-soft) !important;
        border-color: var(--fl-royal) !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(21, 101, 255, 0.15) !important;
    }

[b-e1x4fce6r7] .fl-sso-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
}

[b-e1x4fce6r7] .fl-sso-icon,
.fl-sso-icon[b-e1x4fce6r7] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

[b-e1x4fce6r7] .fl-sso-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--fl-text-primary) !important;
}

[b-e1x4fce6r7] .e-btn.fl-auth-link-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--fl-royal) !important;
    text-transform: none !important;
    min-height: auto !important;
    height: auto !important;
    cursor: pointer !important;
    transition: all 200ms ease !important;
}

    [b-e1x4fce6r7] .e-btn.fl-auth-link-btn:hover {
        text-decoration: underline !important;
        background: transparent !important;
        color: var(--fl-royal) !important;
    }

[b-e1x4fce6r7] .fl-auth-card__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 13px;
    color: var(--fl-text-secondary);
}

[b-e1x4fce6r7] .fl-footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

[b-e1x4fce6r7] .fl-footer-dot {
    color: var(--fl-text-muted);
}

[b-e1x4fce6r7] .e-btn.fl-footer-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 12px !important;
    color: var(--fl-text-muted) !important;
    text-transform: none !important;
    min-height: auto !important;
    height: auto !important;
    transition: all 200ms ease !important;
}

    [b-e1x4fce6r7] .e-btn.fl-footer-btn:hover {
        color: var(--fl-royal) !important;
        background: transparent !important;
        text-decoration: underline !important;
    }

[b-e1x4fce6r7] .fl-auth-footer-notes {
    margin-top: 20px;
    text-align: center;
    font-size: 11px;
    color: var(--fl-text-muted);
    display: flex;
    flex-direction: column;
    gap: 4px;
    letter-spacing: 0.3px;
}

/* ─── Dark Theme Mode ────────────────────────────────────── */
.fl-auth-screen.fl-theme-dark[b-e1x4fce6r7],
[b-e1x4fce6r7] .fl-auth-screen.fl-theme-dark,
.fl-theme-dark.fl-auth-screen[b-e1x4fce6r7],
.fl-theme-dark .fl-auth-screen[b-e1x4fce6r7],
[b-e1x4fce6r7] .fl-theme-dark .fl-auth-screen {
    --fl-bg-app: #01071B;
    --fl-bg-surface: #01071B;
    --fl-bg-surface-2: #07122D;
    --fl-border: #101E42;
    --fl-border-soft: #0A1430;
    --fl-text-primary: #E2E8F0;
    --fl-text-secondary: #94A3B8;
    --fl-text-muted: #64748B;
    background: #01071B !important;
}

    .fl-auth-screen.fl-theme-dark .fl-auth-form-wrap[b-e1x4fce6r7],
    [b-e1x4fce6r7] .fl-auth-screen.fl-theme-dark .fl-auth-form-wrap,
    .fl-theme-dark .fl-auth-form-wrap[b-e1x4fce6r7],
    [b-e1x4fce6r7] .fl-theme-dark .fl-auth-form-wrap {
        background: #01071B !important;
    }

    .fl-auth-screen.fl-theme-dark .fl-auth-title[b-e1x4fce6r7],
    [b-e1x4fce6r7] .fl-auth-screen.fl-theme-dark .fl-auth-title,
    .fl-theme-dark .fl-auth-title[b-e1x4fce6r7],
    [b-e1x4fce6r7] .fl-theme-dark .fl-auth-title {
        color: #FFFFFF !important;
    }

    .fl-auth-screen.fl-theme-dark .fl-auth-sub[b-e1x4fce6r7],
    [b-e1x4fce6r7] .fl-auth-screen.fl-theme-dark .fl-auth-sub,
    .fl-theme-dark .fl-auth-sub[b-e1x4fce6r7],
    [b-e1x4fce6r7] .fl-theme-dark .fl-auth-sub {
        color: #94A3B8 !important;
    }

    .fl-auth-screen.fl-theme-dark .fl-field-label[b-e1x4fce6r7],
    [b-e1x4fce6r7] .fl-auth-screen.fl-theme-dark .fl-field-label,
    .fl-theme-dark .fl-field-label[b-e1x4fce6r7],
    [b-e1x4fce6r7] .fl-theme-dark .fl-field-label {
        color: #94A3B8 !important;
    }

    .fl-auth-screen.fl-theme-dark .fl-field-icon[b-e1x4fce6r7],
    [b-e1x4fce6r7] .fl-auth-screen.fl-theme-dark .fl-field-icon,
    .fl-theme-dark .fl-field-icon[b-e1x4fce6r7],
    [b-e1x4fce6r7] .fl-theme-dark .fl-field-icon {
        color: #64748B !important;
    }

    .fl-auth-screen.fl-theme-dark .fl-auth-footer[b-e1x4fce6r7],
    [b-e1x4fce6r7] .fl-auth-screen.fl-theme-dark .fl-auth-footer,
    .fl-theme-dark .fl-auth-footer[b-e1x4fce6r7],
    [b-e1x4fce6r7] .fl-theme-dark .fl-auth-footer {
        color: #64748B !important;
    }

    .fl-auth-screen.fl-theme-dark .fl-theme-toggle-btn.e-btn[b-e1x4fce6r7],
    [b-e1x4fce6r7] .fl-auth-screen.fl-theme-dark .fl-theme-toggle-btn.e-btn {
        background: #07122D !important;
        border-color: #101E42 !important;
        color: #E2E8F0 !important;
    }

    .fl-auth-screen.fl-theme-dark .fl-auth-input input.e-input[b-e1x4fce6r7],
    [b-e1x4fce6r7] .fl-auth-screen.fl-theme-dark .fl-auth-input input.e-input {
        background: #07122D !important;
        border-color: #101E42 !important;
        color: #E2E8F0 !important;
    }

    .fl-auth-screen.fl-theme-dark .fl-btn-sso[b-e1x4fce6r7],
    [b-e1x4fce6r7] .fl-auth-screen.fl-theme-dark .fl-btn-sso {
        background: #07122D !important;
        border-color: #101E42 !important;
        color: #E2E8F0 !important;
    }

        .fl-auth-screen.fl-theme-dark .fl-btn-sso:hover[b-e1x4fce6r7],
        [b-e1x4fce6r7] .fl-auth-screen.fl-theme-dark .fl-btn-sso:hover {
            background: #0D1D45 !important;
            border-color: var(--fl-royal) !important;
        }

    .fl-auth-screen.fl-theme-dark .fl-auth-hero[b-e1x4fce6r7],
    [b-e1x4fce6r7] .fl-auth-screen.fl-theme-dark .fl-auth-hero {
        background-image: linear-gradient(180deg, rgba(1, 7, 27, 0.08) 0%, rgba(1, 7, 27, 0.15) 25%, rgba(1, 7, 27, 0.35) 60%, rgba(0, 0, 0, 0.55) 100%), url('/Login%20hero%20BG.png');
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
        background-color: #01071B !important;
    }

/* ═══════════════════════════════════════════════════════════
   TABLET RESPONSIVE (768px - 1023px)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
    [b-e1x4fce6r7] .fl-auth-screen {
        min-height: 100vh !important;
        height: auto !important;
        overflow: hidden !important;
    }

    [b-e1x4fce6r7] .fl-form-brand,
    .fl-form-brand[b-e1x4fce6r7] {
        display: flex;
        align-items: center;
        margin-top: 12px;
        justify-content: center;
    }

    [b-e1x4fce6r7] .fl-auth-top-bar {
        top: 16px !important;
        right: 10px !important;
    }

    [b-e1x4fce6r7] .fl-auth-grid {
        grid-template-columns: 1fr 1fr !important;
        min-height: 100vh !important;
        height: 100vh !important;
        max-height: 100vh !important;
    }

    [b-e1x4fce6r7] .fl-auth-hero {
        display: flex !important;
        order: 2 !important;
        padding: 32px 28px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    [b-e1x4fce6r7] .fl-hero-content {
        max-width: 100% !important;
        margin: 0 !important;
    }

    [b-e1x4fce6r7] .fl-hero-title {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
    }

    [b-e1x4fce6r7] .fl-hero-subtitle {
        font-size: 12px !important;
        line-height: 1.5 !important;
        margin-bottom: 18px !important;
    }

    [b-e1x4fce6r7] .fl-hero-badge {
        font-size: 11px !important;
        margin-bottom: 14px !important;
    }

    [b-e1x4fce6r7] .fl-hero-widget.e-card {
        padding: 14px 16px !important;
        margin-bottom: 16px !important;
    }

    [b-e1x4fce6r7] .fl-widget-header {
        gap: 10px !important;
        margin-bottom: 10px !important;
    }

    [b-e1x4fce6r7] .fl-widget-icon {
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }

    [b-e1x4fce6r7] .fl-widget-title {
        font-size: 12px !important;
    }

    [b-e1x4fce6r7] .fl-widget-sub {
        font-size: 10px !important;
    }

    [b-e1x4fce6r7] .fl-widget-chart {
        height: 40px !important;
        margin-bottom: 10px !important;
    }

    [b-e1x4fce6r7] .fl-widget-metrics {
        gap: 8px !important;
        padding-top: 10px !important;
    }

    [b-e1x4fce6r7] .fl-widget-label {
        font-size: 9.5px !important;
    }

    [b-e1x4fce6r7] .fl-widget-val {
        font-size: 13px !important;
    }

    [b-e1x4fce6r7] .fl-widget-trend {
        font-size: 9px !important;
    }

    [b-e1x4fce6r7] .fl-hero-trust {
        font-size: 11px !important;
        gap: 10px !important;
        margin-top: 8px !important;
    }

    [b-e1x4fce6r7] .fl-auth-form-wrap {
        order: 1 !important;
        height: 100vh !important;
        overflow-y: auto !important;
        padding: 20px 28px !important;
    }

    [b-e1x4fce6r7] .fl-auth-card {
        max-width: 380px !important;
    }

    [b-e1x4fce6r7] .fl-auth-title {
        font-size: 20px !important;
    }

    [b-e1x4fce6r7] .fl-auth-sub {
        font-size: 12px !important;
    }

    [b-e1x4fce6r7] .fl-hero-ambient-orb.orb-1 {
        width: 350px !important;
        height: 350px !important;
        top: -100px !important;
        right: -100px !important;
    }

    [b-e1x4fce6r7] .fl-hero-ambient-orb.orb-2 {
        width: 280px !important;
        height: 280px !important;
        bottom: -60px !important;
        left: -60px !important;
    }

    [b-e1x4fce6r7] .fl-hero-ambient-orb.orb-3 {
        width: 200px !important;
        height: 200px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP RESPONSIVE (1024px - 1199px)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1199px) {
    [b-e1x4fce6r7] .fl-auth-hero {
        padding: 48px 40px !important;
        height: 100vh !important;
        overflow:hidden;
        justify-content: center !important;
    }

    [b-e1x4fce6r7] .fl-hero-content {
        max-width: 480px !important;
        width: 100% !important;
    }

    [b-e1x4fce6r7] .fl-hero-title {
        font-size: 32px !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }

    [b-e1x4fce6r7] .fl-hero-subtitle {
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin-bottom: 24px !important;
    }

    [b-e1x4fce6r7] .fl-hero-badge {
        font-size: 11.5px !important;
        margin-bottom: 18px !important;
    }

    [b-e1x4fce6r7] .fl-hero-widget.e-card {
        padding: 16px 20px !important;
        margin-bottom: 20px !important;
    }

    [b-e1x4fce6r7] .fl-widget-header {
        gap: 11px !important;
        margin-bottom: 11px !important;
    }

    [b-e1x4fce6r7] .fl-widget-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 15px !important;
    }

    [b-e1x4fce6r7] .fl-widget-title {
        font-size: 13px !important;
    }

    [b-e1x4fce6r7] .fl-widget-sub {
        font-size: 10.5px !important;
    }

    [b-e1x4fce6r7] .fl-widget-chart {
        height: 50px !important;
        margin-bottom: 12px !important;
    }

    [b-e1x4fce6r7] .fl-widget-metrics {
        gap: 11px !important;
        padding-top: 11px !important;
    }

    [b-e1x4fce6r7] .fl-widget-label {
        font-size: 10px !important;
    }

    [b-e1x4fce6r7] .fl-widget-val {
        font-size: 14.5px !important;
    }

    [b-e1x4fce6r7] .fl-widget-trend {
        font-size: 10px !important;
    }

    [b-e1x4fce6r7] .fl-hero-trust {
        font-size: 11px !important;
        gap: 10px !important;
        margin-top: 10px !important;
    }

    [b-e1x4fce6r7] .fl-auth-form-wrap {
        padding: 22px 36px !important;
    }

    [b-e1x4fce6r7] .fl-auth-card {
        max-width: 400px !important;
    }

    [b-e1x4fce6r7] .fl-auth-title {
        font-size: 20px !important;
    }

    [b-e1x4fce6r7] .fl-auth-sub {
        font-size: 12.5px !important;
    }

    [b-e1x4fce6r7] .fl-hero-ambient-orb.orb-1 {
        width: 450px !important;
        height: 450px !important;
        top: -110px !important;
        right: -110px !important;
        opacity: 0.42 !important;
    }

    [b-e1x4fce6r7] .fl-hero-ambient-orb.orb-2 {
        width: 360px !important;
        height: 360px !important;
        bottom: -70px !important;
        left: -70px !important;
        opacity: 0.33 !important;
    }

    [b-e1x4fce6r7] .fl-hero-ambient-orb.orb-3 {
        width: 240px !important;
        height: 240px !important;
        opacity: 0.18 !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   LAPTOP/LARGE DESKTOP RESPONSIVE (1200px and up)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
    [b-e1x4fce6r7] .fl-auth-hero {
        padding: 56px 52px !important;
        height: 100vh !important;
        overflow: hidden !important;
        justify-content: center !important;
    }

    [b-e1x4fce6r7] .fl-hero-content {
        max-width: 520px !important;
        width: 100% !important;
    }

    [b-e1x4fce6r7] .fl-hero-title {
        font-size: 42px !important;
        line-height: 1.10 !important;
        margin-bottom: 16px !important;
    }

    [b-e1x4fce6r7] .fl-hero-subtitle {
        font-size: 15px !important;
        line-height: 1.60 !important;
        margin-bottom: 32px !important;
    }

    [b-e1x4fce6r7] .fl-hero-badge {
        font-size: 12px !important;
        margin-bottom: 20px !important;
    }

    [b-e1x4fce6r7] .fl-hero-widget.e-card {
        padding: 20px 24px !important;
        margin-bottom: 24px !important;
    }

    [b-e1x4fce6r7] .fl-widget-header {
        gap: 14px !important;
        margin-bottom: 14px !important;
    }

    [b-e1x4fce6r7] .fl-widget-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }

    [b-e1x4fce6r7] .fl-widget-title {
        font-size: 14px !important;
    }

    [b-e1x4fce6r7] .fl-widget-sub {
        font-size: 11.5px !important;
    }

    [b-e1x4fce6r7] .fl-widget-chart {
        height: 58px !important;
        margin-bottom: 16px !important;
    }

    [b-e1x4fce6r7] .fl-widget-metrics {
        gap: 14px !important;
        padding-top: 14px !important;
    }

    [b-e1x4fce6r7] .fl-widget-label {
        font-size: 11px !important;
    }

    [b-e1x4fce6r7] .fl-widget-val {
        font-size: 16px !important;
    }

    [b-e1x4fce6r7] .fl-widget-trend {
        font-size: 11px !important;
    }

    [b-e1x4fce6r7] .fl-hero-trust {
        font-size: 12px !important;
        gap: 14px !important;
        margin-top: 16px !important;
    }

    [b-e1x4fce6r7] .fl-auth-form-wrap {
        padding: 32px 48px !important;
    }

    [b-e1x4fce6r7] .fl-auth-card {
        max-width: 420px !important;
    }

    [b-e1x4fce6r7] .fl-auth-title {
        font-size: 28px !important;
    }

    [b-e1x4fce6r7] .fl-auth-sub {
        font-size: 14px !important;
    }

    [b-e1x4fce6r7] .fl-hero-ambient-orb.orb-1 {
        width: 550px !important;
        height: 550px !important;
        top: -120px !important;
        right: -120px !important;
        opacity: 0.45 !important;
    }

    [b-e1x4fce6r7] .fl-hero-ambient-orb.orb-2 {
        width: 420px !important;
        height: 420px !important;
        bottom: -80px !important;
        left: -80px !important;
        opacity: 0.35 !important;
    }

    [b-e1x4fce6r7] .fl-hero-ambient-orb.orb-3 {
        width: 280px !important;
        height: 280px !important;
        opacity: 0.2 !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE (below 768px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    [b-e1x4fce6r7] .fl-auth-screen {
        min-height: 100vh !important;
        height: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    [b-e1x4fce6r7] .fl-auth-grid {
        grid-template-columns: 1fr !important;
        height: auto !important;
        max-height: none !important;
        min-height: 100vh !important;
        overflow: visible !important;
    }

    [b-e1x4fce6r7] .fl-auth-hero {
        display: none !important;
    }

    [b-e1x4fce6r7] .fl-auth-form-wrap {
        order: 1 !important;
        height: auto !important; /* was 800px, causing the clip */
        min-height: 100vh !important;
        overflow: visible !important; /* was inherited overflow: hidden */
        justify-content: flex-start !important;
        padding: 32px 20px 48px !important;
    }


    [b-e1x4fce6r7] .fl-auth-top-bar {
        top: 16px !important;
        right: 16px !important;
    }

    [b-e1x4fce6r7] .fl-auth-title {
        font-size: 24px !important;
        font-weight: 800 !important;
    }

    [b-e1x4fce6r7] .fl-auth-sub {
        font-size: 13.5px !important;
        margin-bottom: 20px !important;
    }

    [b-e1x4fce6r7] .fl-mobile-hero-illustration {
        margin-top: 28px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    [b-e1x4fce6r7] .fl-illustration-card {
        width: 100%;
        background: linear-gradient(135deg, rgba(21, 101, 255, 0.08) 0%, rgba(22, 211, 209, 0.08) 100%);
        border: 1px solid var(--fl-border);
        border-radius: var(--fl-radius-lg);
        padding: 16px;
    }

    [b-e1x4fce6r7] .fl-illu-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
    }

    [b-e1x4fce6r7] .fl-illu-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--fl-royal);
    }

    [b-e1x4fce6r7] .fl-illu-title {
        font-size: 12px;
        font-weight: 700;
        color: var(--fl-text-primary);
    }

    [b-e1x4fce6r7] .fl-illu-metrics {
        display: flex;
        justify-content: space-between;
    }

    [b-e1x4fce6r7] .fl-illu-label {
        font-size: 11px;
        color: var(--fl-text-secondary);
        display: block;
    }

    [b-e1x4fce6r7] .fl-illu-val {
        font-size: 15px;
        font-weight: 700;
        color: var(--fl-text-primary);
    }
}
/* /Components/Pages/Roles/Components/RoleForm.razor.rz.scp.css */
.fl-role-page-container[b-dra04n6orp] {
    padding: 0 1.5rem 1.5rem 1.5rem;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

/* ── Form Page Header ────────────────────────────────────────────── */
.fl-form-page-header[b-dra04n6orp] {
    padding-top: 1rem;
    margin-bottom: 1.5rem;
    width: 100%;
}

.breadcrumb-trail[b-dra04n6orp] {
    margin-bottom: 0.5rem;
}

.breadcrumb-link[b-dra04n6orp] {
    color: var(--fl-text-secondary, #94A3B8);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: color 0.15s ease;
}

.breadcrumb-link:hover[b-dra04n6orp] {
    color: var(--fl-color-blue, #60A5FA);
}

.fl-header-title-bar[b-dra04n6orp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 1rem;
}

.fl-header-title-bar .fl-page-title[b-dra04n6orp] {
    font-family: var(--fl-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--fl-text-primary, #FFFFFF);
    margin: 0;
    line-height: 1.25;
    word-break: break-word;
}

.fl-header-actions[b-dra04n6orp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* ── Interactive FL Cards ────────────────────────────────────────── */
.fl-card[b-dra04n6orp] {
    background: var(--fl-bg-surface, #0F1B32);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--fl-border, #1C2D4A);
    margin-bottom: 1.5rem;
    overflow: hidden;
    max-width: 100%;
    min-width: 0;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.fl-card:hover[b-dra04n6orp] {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.fl-highlight-card-top[b-dra04n6orp] {
    border-top: 3px solid var(--fl-color-blue, #1565FF);
}

.fl-card-header[b-dra04n6orp] {
    padding: 1rem 1.25rem;
    background: var(--fl-bg-surface-2, #142037);
    border-bottom: 1px solid var(--fl-border, #1C2D4A);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

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

.fl-hl-icon[b-dra04n6orp] {
    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[b-dra04n6orp] {
    background: rgba(37, 99, 235, 0.15);
    color: var(--fl-color-blue, #1565FF);
}

.fl-hl-bg--blue .e-icons[b-dra04n6orp] {
    color: #60A5FA !important;
    font-size: 1rem !important;
}

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

.fl-hl-bg--teal .e-icons[b-dra04n6orp] {
    color: #0D9488 !important;
    font-size: 1rem !important;
}

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

.fl-card-body[b-dra04n6orp] {
    padding: 1.5rem;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* ── Card Footer ─────────────────────────────────────────────────── */
.fl-card-footer[b-dra04n6orp] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--fl-border, #1C2D4A);
    background: var(--fl-bg-surface-2, #142037);
}

/* ── Form Controls (Identical to Customer Edit Reference) ───────── */
.fl-form-label[b-dra04n6orp] {
    font-family: var(--fl-font-ui, 'Inter', sans-serif);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--fl-text-secondary, #475569);
    margin-bottom: 0.45rem;
    display: block;
}

.required-field[b-dra04n6orp]::after {
    content: " *";
    color: var(--fl-color-red, #EF4444);
    font-weight: 700;
}

[b-dra04n6orp] .fl-validation-error,
[b-dra04n6orp] .validation-message,
.fl-validation-error[b-dra04n6orp] {
    color: #DC2626 !important;
    font-size: 0.8rem;
    margin-top: 0.25rem;
    font-weight: 500;
}

/* ── Permission Category & Selector Styling ──────────────────────── */
.fl-perm-category-group[b-dra04n6orp] {
    background: var(--fl-bg-surface-2, #F1F5F9);
    border: 1px solid var(--fl-border, #E2E8F0);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.fl-perm-cat-header[b-dra04n6orp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--fl-border, #E2E8F0);
}

.fl-perm-cat-title[b-dra04n6orp] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--fl-color-blue, #1565FF);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fl-perm-cat-count[b-dra04n6orp] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fl-text-secondary, #64748B);
}

.fl-perm-grid[b-dra04n6orp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
}

.fl-perm-item-card[b-dra04n6orp] {
    background: var(--fl-bg-surface, #FFFFFF);
    border: 1px solid var(--fl-border, #E2E8F0);
    border-radius: 8px;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fl-perm-item-card:hover[b-dra04n6orp] {
    border-color: #3B82F6;
    background: rgba(59, 130, 246, 0.06);
}

/* Selected state — readable in both light and dark mode */
.fl-perm-item-card.selected[b-dra04n6orp] {
    border-color: #10B981;
    background: rgba(16, 185, 129, 0.12);
    border-width: 1.5px;
}

.fl-perm-item-header[b-dra04n6orp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Permission name must be readable on both selected and unselected backgrounds */
.fl-perm-name[b-dra04n6orp] {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--fl-text-primary, #0F172A);
    word-break: break-word;
    min-width: 0;
    flex: 1;
    padding-right: 0.5rem;
}

/* On selected card, ensure name text is clearly readable */
.fl-perm-item-card.selected .fl-perm-name[b-dra04n6orp] {
    color: var(--fl-text-primary, #0F172A);
}

.fl-perm-desc[b-dra04n6orp] {
    font-size: 0.775rem;
    color: var(--fl-text-secondary, #64748B);
    line-height: 1.35;
    word-break: break-word;
}

/* Description on selected card */
.fl-perm-item-card.selected .fl-perm-desc[b-dra04n6orp] {
    color: var(--fl-text-secondary, #64748B);
}

/* ── Save / Cancel Buttons ───────────────────────────────────────── */
.fl-cancel-btn[b-dra04n6orp] {
    font-weight: 600;
    height: 38px;
    min-width: 90px;
}

.fl-save-btn[b-dra04n6orp] {
    font-weight: 700;
    height: 38px;
    min-width: 160px;
}

/* ── Loading & Alert ─────────────────────────────────────────────── */
.fl-loading-state[b-dra04n6orp] {
    text-align: center;
    padding: 4rem 1rem;
}

.fl-loading-text[b-dra04n6orp] {
    color: var(--fl-text-secondary, #94A3B8);
    font-size: 0.95rem;
}



/* ── Sticky Sidebar & Live Preview Card (Matches Products) ────────── */
.fl-sticky-sidebar[b-dra04n6orp] {
    position: sticky;
    top: calc(var(--fl-topbar-h, 72px) + 1.5rem);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.fl-preview-card[b-dra04n6orp] {
    border-top: 3px solid var(--fl-color-blue, #1565FF);
}

.fl-preview-badge[b-dra04n6orp] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.2rem 0.55rem;
    border-radius: 99px;
    background: rgba(37, 99, 235, 0.18);
    color: var(--fl-color-blue, #60A5FA);
    border: 1px solid rgba(37, 99, 235, 0.35);
}

.fl-preview-hero[b-dra04n6orp] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--fl-border, #1C2D4A);
    margin-bottom: 1.25rem;
}

.fl-preview-avatar[b-dra04n6orp] {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1565FF, #23A8FF);
    color: #FFFFFF;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(21, 101, 255, 0.25);
}

.fl-avatar-wood[b-dra04n6orp] {
    background: linear-gradient(135deg, #D97706, #F59E0B);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25);
}

.fl-preview-info[b-dra04n6orp] {
    min-width: 0;
    flex: 1;
}

.fl-preview-name[b-dra04n6orp] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--fl-text-primary, #0F172A);
    margin: 0 0 0.4rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fl-preview-meta[b-dra04n6orp] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.fl-pill-badge[b-dra04n6orp] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
}

.fl-pill-cat[b-dra04n6orp] {
    background: rgba(217, 119, 6, 0.12);
    color: #D97706;
}

.fl-dims-count-badge[b-dra04n6orp] {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.8rem;
    background: rgba(37, 99, 235, 0.18);
    color: var(--fl-color-blue, #1565FF);
    border-radius: 99px;
    font-size: 0.82rem;
    font-weight: 700;
    border: 1px solid rgba(37, 99, 235, 0.35);
}

.fl-preview-details-list[b-dra04n6orp] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.fl-preview-item[b-dra04n6orp] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.fl-preview-icon[b-dra04n6orp] {
    font-size: 1.05rem;
    color: var(--fl-color-blue, #1565FF);
    margin-top: 0.1rem;
    width: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fl-preview-item-content[b-dra04n6orp] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fl-preview-label[b-dra04n6orp] {
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--fl-text-secondary, #64748B);
}

.fl-preview-val[b-dra04n6orp] {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--fl-text-primary, #0F172A);
    word-break: break-word;
}

.fl-desc-clamp[b-dra04n6orp] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Tips Card ───────────────────────────────────────────────────── */
.fl-tips-card[b-dra04n6orp] {
    background: linear-gradient(135deg, rgba(21, 101, 255, 0.04), rgba(35, 168, 255, 0.02));
    border: 1px solid rgba(21, 101, 255, 0.15);
}

.fl-tips-title[b-dra04n6orp] {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--fl-text-primary, #0F172A);
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.fl-tips-list[b-dra04n6orp] {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.84rem;
    color: var(--fl-text-secondary, #64748B);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* ── Mobile / Responsive ─────────────────────────────────────────── */
@media (max-width: 992px) {
    .fl-sticky-sidebar[b-dra04n6orp] {
        position: static;
        margin-top: 1rem;
    }
}

@media (max-width: 768px) {
    .fl-role-page-container[b-dra04n6orp] {
        padding: 0.75rem 0.5rem;
    }

    .fl-header-title-bar[b-dra04n6orp] {
        flex-direction: column;
        align-items: flex-start;
    }

    .fl-header-title-bar .fl-page-title[b-dra04n6orp] {
        font-size: 1.35rem;
    }

    .fl-header-actions[b-dra04n6orp] {
        width: 100%;
        flex-wrap: wrap;
    }

    .fl-header-actions .e-btn[b-dra04n6orp] {
        flex: 1 1 auto;
        min-width: 0;
        text-align: center;
        justify-content: center;
    }

    .fl-card[b-dra04n6orp] {
        border-radius: 10px;
        margin-bottom: 1rem;
    }

    .fl-card-header[b-dra04n6orp] {
        padding: 0.85rem 1rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .fl-card-body[b-dra04n6orp] {
        padding: 1rem 0.75rem;
    }

    .fl-card-footer[b-dra04n6orp] {
        padding: 1rem 0.75rem;
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

    .fl-card-footer .e-btn[b-dra04n6orp] {
        width: 100%;
        justify-content: center;
        min-width: 0;
        height: 42px;
    }

    .fl-cancel-btn[b-dra04n6orp],
    .fl-save-btn[b-dra04n6orp] {
        width: 100%;
        min-width: 0;
        height: 42px;
    }
}

@media (max-width: 480px) {
    .fl-role-page-container[b-dra04n6orp] {
        padding: 0.5rem 0.4rem;
    }
}
/* /Components/Pages/Roles/RoleDetail.razor.rz.scp.css */
.fl-role-page-container[b-lxws90u710] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.fl-page-header[b-lxws90u710] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.breadcrumb-trail[b-lxws90u710] {
    margin-bottom: 0.25rem;
}

.breadcrumb-link[b-lxws90u710] {
    color: var(--fl-text-secondary, #94A3B8);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.15s ease;
}

.breadcrumb-link:hover[b-lxws90u710] {
    color: #60A5FA;
}

.fl-header-left[b-lxws90u710] {
    display: flex;
    flex-direction: column;
}

.fl-page-title[b-lxws90u710] {
    font-family: var(--fl-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--fl-text-primary, #FFFFFF);
    margin-bottom: 0.25rem;
    line-height: 1.25;
}

.fl-page-subtitle[b-lxws90u710] {
    font-size: 0.9rem;
    color: var(--fl-text-secondary, #94A3B8);
    margin: 0;
}

/* ── Sticky Sidebar Layout ────────────────────────────────────────── */
.fl-role-detail-layout[b-lxws90u710] {
    align-items: stretch !important;
}

.fl-role-detail-layout > .col-lg-5[b-lxws90u710] {
    display: flex !important;
    flex-direction: column !important;
}

.fl-sticky-sidebar[b-lxws90u710] {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 1rem !important;
    z-index: 10 !important;
}

@media (max-width: 991px) {
    .fl-sticky-sidebar[b-lxws90u710] {
        position: static !important;
        top: auto !important;
    }
}

.fl-header-actions[b-lxws90u710] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.fl-code-badge[b-lxws90u710] {
    background: rgba(37, 99, 235, 0.12);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--fl-color-blue, #1565FF);
}

/* ── Buttons ────────────────────────────────────────────── */
.fl-edit-btn[b-lxws90u710] {
    background: linear-gradient(135deg, #1565FF 0%, #0052CC 100%) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(21, 101, 255, 0.35) !important;
}

/* ── Cards ──────────────────────────────────────────────── */
.fl-card[b-lxws90u710] {
    background: var(--fl-bg-surface, #FFFFFF);
    border: 1px solid var(--fl-border, #E2E8F0);
    border-radius: 12px;
    box-shadow: var(--fl-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
    overflow: hidden;
}

.fl-highlight-card-top[b-lxws90u710] {
    border-top: 3px solid #1565FF;
}

.fl-card-header[b-lxws90u710] {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--fl-border, #E2E8F0);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fl-header-title-group[b-lxws90u710] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.fl-hl-icon[b-lxws90u710] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.fl-hl-bg--blue[b-lxws90u710] {
    background: rgba(21, 101, 255, 0.12);
    color: var(--fl-color-blue, #1565FF);
}

.fl-hl-bg--blue .e-icons[b-lxws90u710] {
    color: var(--fl-color-blue, #1565FF) !important;
    font-size: 1rem !important;
}

.fl-hl-bg--teal[b-lxws90u710] {
    background: rgba(20, 184, 166, 0.12);
    color: #0D9488;
}

.fl-hl-bg--teal .e-icons[b-lxws90u710] {
    color: #0D9488 !important;
    font-size: 1rem !important;
}

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

.fl-card-body[b-lxws90u710] {
    padding: 1.25rem;
}

/* ── Info Rows ──────────────────────────────────────────── */
.fl-info-row[b-lxws90u710] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--fl-border-soft, #EEF2F7);
}

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

.fl-info-label[b-lxws90u710] {
    font-size: 0.85rem;
    color: var(--fl-text-secondary, #64748B);
    font-weight: 500;
}

.fl-info-val[b-lxws90u710] {
    font-size: 0.875rem;
    color: var(--fl-text-primary, #0F172A);
    text-align: right;
    max-width: 60%;
}

/* ── Assigned Permissions Section ───────────────────────── */
.fl-perm-cat-section[b-lxws90u710] {
    margin-bottom: 1.25rem;
    background: var(--fl-bg-surface-2, #F1F5F9);
    border: 1px solid var(--fl-border, #E2E8F0);
    border-radius: 10px;
    padding: 1rem;
}

.fl-perm-cat-heading[b-lxws90u710] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--fl-border, #E2E8F0);
}

.fl-perm-cat-name[b-lxws90u710] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--fl-color-blue, #1565FF);
    margin: 0;
}

.fl-perm-cat-badge[b-lxws90u710] {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: var(--fl-color-green, #16A34A);
    border-radius: 12px;
    font-weight: 600;
}

.fl-assigned-perm-grid[b-lxws90u710] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
}

.fl-assigned-perm-card[b-lxws90u710] {
    background: var(--fl-bg-surface, #FFFFFF);
    border: 1px solid var(--fl-border, #E2E8F0);
    border-radius: 8px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.fl-assigned-perm-title[b-lxws90u710] {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--fl-text-primary, #0F172A);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.fl-assigned-perm-desc[b-lxws90u710] {
    font-size: 0.775rem;
    color: var(--fl-text-secondary, #64748B);
    line-height: 1.35;
}

/* ── Empty / Loading ────────────────────────────────────── */
.fl-loading-state[b-lxws90u710],
.fl-empty-state[b-lxws90u710] {
    text-align: center;
    padding: 4rem 1rem;
}

.fl-empty-icon-wrap[b-lxws90u710] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

/* ── Delete Dialog ──────────────────────────────────────── */
.fl-delete-dialog-body[b-lxws90u710] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 0;
}

.fl-delete-icon-box[b-lxws90u710] {
    font-size: 2rem;
    color: var(--fl-color-amber, #F59E0B);
    line-height: 1;
}

.fl-delete-title[b-lxws90u710] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fl-text-primary, #FFFFFF);
    margin-bottom: 0.35rem;
}

.fl-delete-item-desc[b-lxws90u710] {
    color: var(--fl-text-secondary, #94A3B8);
    margin-bottom: 0.5rem;
}

.fl-delete-note[b-lxws90u710] {
    color: var(--fl-text-muted, #64748B);
    font-size: 0.8rem;
    display: block;
    line-height: 1.4;
}

/* ── Mobile/Responsive Media Queries ────────────────────────────── */
@media (max-width: 768px) {
    .fl-role-page-container[b-lxws90u710] {
        padding: 0.75rem 0.5rem 5.5rem 0.5rem;
    }

    .fl-page-header[b-lxws90u710] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .fl-header-actions[b-lxws90u710] {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .fl-header-actions .e-btn[b-lxws90u710] {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
    }

    .fl-info-row[b-lxws90u710] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .fl-info-val[b-lxws90u710] {
        text-align: left;
        max-width: 100%;
    }

    .fl-assigned-perm-grid[b-lxws90u710] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Roles/RolesList.razor.rz.scp.css */
.fl-roles-container[b-edycei9v7y] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* ── Page Header ────────────────────────────────────────── */
.fl-page-header[b-edycei9v7y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.fl-header-left[b-edycei9v7y] {
    display: flex;
    flex-direction: column;
}

.fl-page-title[b-edycei9v7y] {
    font-family: var(--fl-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--fl-text-primary, #FFFFFF);
    margin-bottom: 0.25rem;
    line-height: 1.25;
}

.fl-page-subtitle[b-edycei9v7y] {
    font-size: 0.9rem;
    color: var(--fl-text-secondary, #94A3B8);
    margin-bottom: 0;
}

.fl-header-actions[b-edycei9v7y] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.fl-add-btn[b-edycei9v7y] {
    background: linear-gradient(135deg, #1565FF 0%, #0052CC 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 0.5rem 1.25rem !important;
    box-shadow: 0 4px 14px rgba(21, 101, 255, 0.35) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.fl-add-btn:hover[b-edycei9v7y] {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(21, 101, 255, 0.45) !important;
}

/* ── Card Base ─────────────────────────────────────────── */
.fl-card[b-edycei9v7y] {
    background: var(--fl-bg-surface, #FFFFFF);
    border: 1px solid var(--fl-border, #E2E8F0);
    border-radius: 12px;
    box-shadow: var(--fl-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
    margin-bottom: 1.5rem;
    overflow: hidden;
}

/* ── Toolbar Card ──────────────────────────────────────── */
.fl-toolbar-card[b-edycei9v7y] {
    padding: 1rem 1.25rem;
}

.fl-toolbar-grid[b-edycei9v7y] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.fl-search-wrap[b-edycei9v7y] {
    flex: 1 1 300px;
}

.fl-refresh-btn-wrap[b-edycei9v7y] {
    margin-left: auto;
}

.fl-refresh-btn[b-edycei9v7y] {
    border-radius: 8px !important;
    border-color: var(--fl-border, #E2E8F0) !important;
    color: var(--fl-text-primary, #0F172A) !important;
    background: var(--fl-bg-surface, #FFFFFF) !important;
}

.fl-refresh-btn:hover[b-edycei9v7y] {
    background: var(--fl-bg-surface-2, #F1F5F9) !important;
}

/* ── Grid Card ─────────────────────────────────────────── */
.fl-grid-card[b-edycei9v7y] {
    border: 1px solid var(--fl-border, #E2E8F0);
}

/* ── Role Cells ────────────────────────────────────────── */
.fl-role-cell[b-edycei9v7y] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.fl-role-icon[b-edycei9v7y] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(21, 101, 255, 0.12);
    border: 1px solid rgba(21, 101, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--fl-color-blue, #1565FF) !important;
    font-size: 1rem;
}

.fl-role-icon .e-icons[b-edycei9v7y] {
    color: var(--fl-color-blue, #1565FF) !important;
    font-size: 1rem !important;
    line-height: 1;
}

.fl-role-info[b-edycei9v7y] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    overflow: hidden;
}

.fl-role-name[b-edycei9v7y] {
    font-weight: 600;
    color: var(--fl-color-blue, #1565FF);
    text-decoration: none;
    font-size: 0.925rem;
}

.fl-role-name:hover[b-edycei9v7y] {
    text-decoration: underline;
    color: #2563EB;
}

.fl-role-desc[b-edycei9v7y] {
    color: var(--fl-text-secondary, #64748B);
    font-size: 0.85rem;
    line-height: 1.4;
}

.fl-perm-count-badge[b-edycei9v7y] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: var(--fl-color-green, #16A34A);
    border-radius: 20px;
    font-size: 0.775rem;
    font-weight: 600;
}

.fl-cat-pill[b-edycei9v7y] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: var(--fl-text-secondary, #64748B);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* ── Actions ───────────────────────────────────────────── */
.fl-action-btns[b-edycei9v7y] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.fl-action-btn[b-edycei9v7y] {
    width: 32px;
    height: 32px;
    border-radius: 6px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid transparent !important;
}

.fl-btn-view[b-edycei9v7y] {
    background: rgba(21, 101, 255, 0.12) !important;
    color: var(--fl-color-blue, #1565FF) !important;
    border-color: rgba(21, 101, 255, 0.25) !important;
}

.fl-btn-view:hover[b-edycei9v7y] {
    background: rgba(21, 101, 255, 0.25) !important;
}

.fl-btn-edit[b-edycei9v7y] {
    background: rgba(245, 158, 11, 0.12) !important;
    color: var(--fl-color-amber, #D97706) !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
}

.fl-btn-edit:hover[b-edycei9v7y] {
    background: rgba(245, 158, 11, 0.25) !important;
}

.fl-btn-delete[b-edycei9v7y] {
    background: rgba(239, 68, 68, 0.12) !important;
    color: var(--fl-color-red, #DC2626) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
}

.fl-btn-delete:hover[b-edycei9v7y] {
    background: rgba(239, 68, 68, 0.25) !important;
}

/* ── Disabled Action Buttons (Matching Greyed Out Muted Disabled Style) ── */
.fl-action-btn:disabled[b-edycei9v7y],
.fl-action-btn.e-disabled[b-edycei9v7y],
.fl-action-btn.fl-action-btn--disabled[b-edycei9v7y],
[b-edycei9v7y] .e-grid .fl-action-btn.e-disabled,
[b-edycei9v7y] .e-grid .fl-action-btn:disabled,
[b-edycei9v7y] .e-grid .fl-action-btn.fl-action-btn--disabled {
    background: rgba(148, 163, 184, 0.08) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
    color: var(--fl-text-secondary, #94A3B8) !important;
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
    transform: none !important;
}

.fl-action-btn:disabled .e-icons[b-edycei9v7y],
.fl-action-btn.e-disabled .e-icons[b-edycei9v7y],
.fl-action-btn.fl-action-btn--disabled .e-icons[b-edycei9v7y],
[b-edycei9v7y] .e-grid .fl-action-btn.e-disabled .e-icons,
[b-edycei9v7y] .e-grid .fl-action-btn:disabled .e-icons,
[b-edycei9v7y] .e-grid .fl-action-btn.fl-action-btn--disabled .e-icons {
    color: var(--fl-text-secondary, #94A3B8) !important;
}

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

/* ── Delete Dialog ─────────────────────────────────────── */
.fl-delete-dialog-body[b-edycei9v7y] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 0;
}

.fl-delete-icon-box[b-edycei9v7y] {
    font-size: 2rem;
    color: var(--fl-color-amber, #F59E0B);
    line-height: 1;
}

.fl-delete-title[b-edycei9v7y] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fl-text-primary, #0F172A);
    margin-bottom: 0.35rem;
}

.fl-delete-item-desc[b-edycei9v7y] {
    color: var(--fl-text-secondary, #94A3B8);
    margin-bottom: 0.5rem;
}

.fl-delete-note[b-edycei9v7y] {
    color: var(--fl-text-muted, #64748B);
    display: block;
    line-height: 1.4;
}

/* ── Custom Pager ──────────────────────────────────────── */
.fl-custom-pager[b-edycei9v7y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 0.5rem;
    border-top: 1px solid var(--fl-border, #1C2D4A);
    flex-wrap: wrap;
    gap: 1rem;
}

.fl-pager-meta-group[b-edycei9v7y] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.fl-pager-sizer[b-edycei9v7y] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fl-pager-label[b-edycei9v7y] {
    color: var(--fl-text-secondary, #94A3B8);
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

.fl-pager-info[b-edycei9v7y] {
    color: var(--fl-text-secondary, #94A3B8);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.fl-pager-nav-wrap[b-edycei9v7y] {
    display: flex;
    align-items: center;
}

.fl-pager-nav[b-edycei9v7y] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.fl-pager-nav-btn[b-edycei9v7y] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--fl-border, #1C2D4A);
    background: var(--fl-bg-surface-2, #142037);
    color: var(--fl-text-primary, #E2E8F0);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.fl-pager-nav-btn svg[b-edycei9v7y] {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fl-pager-nav-btn:hover:not(.disabled)[b-edycei9v7y] {
    background: #1E2D4A;
    border-color: #2D4370;
    color: #FFFFFF;
}

.fl-pager-nav-btn.disabled[b-edycei9v7y],
.fl-pager-nav-btn:disabled[b-edycei9v7y] {
    opacity: 0.35;
    cursor: not-allowed;
    background: var(--fl-bg-app, #0A1329);
    border-color: var(--fl-border-soft, #152035);
}

/* ── Empty State ───────────────────────────────────────── */
.fl-empty-state[b-edycei9v7y] {
    text-align: center;
    padding: 3.5rem 1rem;
}

.fl-empty-icon-wrap[b-edycei9v7y] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(21, 101, 255, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.fl-empty-icon[b-edycei9v7y] {
    font-size: 2rem;
    color: #60A5FA;
}

.fl-empty-title[b-edycei9v7y] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--fl-text-primary, #FFFFFF);
    margin-bottom: 0.35rem;
}

.fl-empty-sub[b-edycei9v7y] {
    font-size: 0.875rem;
    color: var(--fl-text-secondary, #94A3B8);
    max-width: 380px;
    margin: 0 auto 1rem auto;
}

/* ── Syncfusion Pager Dark Theme Overrides ─────────────── */
[b-edycei9v7y] .e-gridpager,
[b-edycei9v7y] .e-pager {
    background-color: var(--fl-bg-surface, #0F1B32) !important;
    border-top: 1px solid var(--fl-border, #1C2D4A) !important;
    color: var(--fl-text-secondary, #94A3B8) !important;
    padding: 0.75rem 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

[b-edycei9v7y] .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;
}

[b-edycei9v7y] .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;
}

[b-edycei9v7y] .e-pager .e-numericitem,
[b-edycei9v7y] .e-pager a.e-link,
[b-edycei9v7y] .e-pager .e-firstpage,
[b-edycei9v7y] .e-pager .e-prevpage,
[b-edycei9v7y] .e-pager .e-nextpage,
[b-edycei9v7y] .e-pager .e-lastpage,
[b-edycei9v7y] .e-pager .e-pager-default,
[b-edycei9v7y] .e-pager .e-spacing {
    background-color: var(--fl-bg-surface-2, #142037) !important;
    color: var(--fl-text-primary, #E2E8F0) !important;
    border: 1px solid var(--fl-border, #1C2D4A) !important;
    border-radius: 6px !important;
    min-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;
}

[b-edycei9v7y] .e-pager .e-numericitem:hover:not(.e-currentitem),
[b-edycei9v7y] .e-pager a.e-link:hover:not(.e-currentitem),
[b-edycei9v7y] .e-pager .e-firstpage:hover:not(.e-disable):not(.e-firstpagedisabled),
[b-edycei9v7y] .e-pager .e-prevpage:hover:not(.e-disable):not(.e-prevpagedisabled),
[b-edycei9v7y] .e-pager .e-nextpage:hover:not(.e-disable):not(.e-nextpagedisabled),
[b-edycei9v7y] .e-pager .e-lastpage:hover:not(.e-disable):not(.e-lastpagedisabled) {
    background-color: #1E2D4A !important;
    color: #FFFFFF !important;
    border-color: #2D4370 !important;
}

[b-edycei9v7y] .e-pager .e-currentitem,
[b-edycei9v7y] .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;
}

[b-edycei9v7y] .e-pager .e-icons {
    color: var(--fl-text-secondary, #94A3B8) !important;
    font-size: 12px !important;
}

[b-edycei9v7y] .e-pager .e-firstpagedisabled,
[b-edycei9v7y] .e-pager .e-prevpagedisabled,
[b-edycei9v7y] .e-pager .e-nextpagedisabled,
[b-edycei9v7y] .e-pager .e-lastpagedisabled,
[b-edycei9v7y] .e-pager .e-disable {
    background-color: var(--fl-bg-app, #0A1329) !important;
    border-color: var(--fl-border-soft, #152035) !important;
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}
/* /Components/Pages/Settings/Settings.razor.rz.scp.css */
.fl-settings-page-container[b-qylhjtie2x] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.5rem 0 2rem 0;
}

.fl-page-title[b-qylhjtie2x] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.25;
}

.fl-page-subtitle[b-qylhjtie2x] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0.25rem 0 0 0;
}

.fl-input-hint[b-qylhjtie2x] {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.25rem;
}

.fl-module-nav-list[b-qylhjtie2x] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.fl-module-nav-btn[b-qylhjtie2x] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    width: 100%;
}

.fl-module-nav-btn:hover[b-qylhjtie2x] {
    background: #f8fafc;
    border-color: #cbd5e1;
    transform: translateX(2px);
}

.fl-module-nav-icon[b-qylhjtie2x] {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.fl-module-nav-text[b-qylhjtie2x] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.fl-module-nav-text strong[b-qylhjtie2x] {
    font-size: 0.875rem;
    color: #1e293b;
    font-weight: 600;
}

.fl-module-nav-text span[b-qylhjtie2x] {
    font-size: 0.75rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fl-module-nav-btn i.bi-chevron-right[b-qylhjtie2x] {
    font-size: 0.85rem;
    color: #94a3b8;
}
/* /Components/Pages/Users/Components/UserForm.razor.rz.scp.css */
.fl-user-page-container[b-msp05n0x1s] {
    padding: 0 1.5rem 1.5rem 1.5rem;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

/* ── Form Page Header ────────────────────────────────────────────── */
.fl-form-page-header[b-msp05n0x1s] {
    padding-top: 1rem;
    margin-bottom: 1.5rem;
    width: 100%;
}

.breadcrumb-trail[b-msp05n0x1s] {
    margin-bottom: 0.5rem;
}

.breadcrumb-link[b-msp05n0x1s] {
    color: var(--fl-text-secondary, #64748B);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: color 0.15s ease;
}

.breadcrumb-link:hover[b-msp05n0x1s] {
    color: var(--fl-color-blue, #1565FF);
}

.fl-header-title-bar[b-msp05n0x1s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 1rem;
}

.fl-header-title-bar .fl-page-title[b-msp05n0x1s] {
    font-family: var(--fl-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--fl-text-primary, #0F172A);
    margin: 0;
    line-height: 1.25;
    word-break: break-word;
}

.fl-header-actions[b-msp05n0x1s] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* ── Interactive FL Cards ────────────────────────────────────────── */
.fl-card[b-msp05n0x1s] {
    background: var(--fl-bg-surface, #FFFFFF);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--fl-border, #E2E8F0);
    margin-bottom: 1.5rem;
    overflow: hidden;
    max-width: 100%;
    min-width: 0;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.fl-card:hover[b-msp05n0x1s] {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.fl-highlight-card-top[b-msp05n0x1s] {
    border-top: 3px solid var(--fl-color-blue, #1565FF);
}

.fl-card-header[b-msp05n0x1s] {
    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[b-msp05n0x1s] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Icon highlight box — with high contrast in light & dark themes ── */
.fl-hl-icon[b-msp05n0x1s] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.fl-hl-icon .e-icons[b-msp05n0x1s] {
    font-size: 1.15rem;
    line-height: 1;
    display: inline-block;
}

.fl-hl-bg--blue[b-msp05n0x1s] {
    background: rgba(37, 99, 235, 0.12);
    color: var(--fl-color-blue, #1565FF);
}

.fl-hl-bg--teal[b-msp05n0x1s] {
    background: rgba(13, 148, 136, 0.12);
    color: var(--fl-color-teal, #0D9488);
}

.fl-hl-bg--green[b-msp05n0x1s] {
    background: rgba(34, 197, 94, 0.12);
    color: var(--fl-color-green, #16A34A);
}

.fl-hl-bg--amber[b-msp05n0x1s] {
    background: rgba(245, 158, 11, 0.12);
    color: var(--fl-color-amber, #D97706);
}

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

.fl-card-body[b-msp05n0x1s] {
    padding: 1.5rem;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* ── Card Footer — matches Products fl-card-footer exactly ──────── */
.fl-card-footer[b-msp05n0x1s] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--fl-border, #E2E8F0);
    background: var(--fl-bg-surface-2, #F8FAFC);
}

/* ── Labels & Inputs (Identical to Customer Edit Reference) ─────── */
.fl-form-label[b-msp05n0x1s] {
    font-family: var(--fl-font-ui, 'Inter', sans-serif);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--fl-text-secondary, #475569);
    margin-bottom: 0.45rem;
    display: block;
}

.required-field[b-msp05n0x1s]::after {
    content: " *";
    color: var(--fl-color-red, #EF4444);
    font-weight: 700;
}

.fl-input-action-wrap[b-msp05n0x1s] {
    display: flex;
    position: relative;
    width: 100%;
    min-width: 0;
}

.fl-input-action-wrap .e-input-group[b-msp05n0x1s],
.fl-input-action-wrap .e-control-wrapper[b-msp05n0x1s] {
    flex: 1;
    min-width: 0;
}

.fl-pwd-toggle-btn[b-msp05n0x1s] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--fl-text-secondary, #64748B);
    cursor: pointer;
    padding: 4px 8px;
    z-index: 10;
}

.fl-pwd-toggle-btn:hover[b-msp05n0x1s] {
    color: var(--fl-text-primary, #0F172A);
}

[b-msp05n0x1s] .fl-validation-error,
[b-msp05n0x1s] .validation-message,
.fl-validation-error[b-msp05n0x1s] {
    color: #DC2626 !important;
    font-size: 0.8rem;
    margin-top: 0.25rem;
    font-weight: 500;
}

.fl-role-desc[b-msp05n0x1s] {
    font-size: 0.82rem;
    color: var(--fl-text-secondary, #475569);
    background: var(--fl-bg-surface-2, #F1F5F9);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--fl-border, #E2E8F0);
}

/* ── Self Deactivation Warning Box ─────────────────────────────── */
.fl-self-warning-box[b-msp05n0x1s] {
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    color: var(--fl-text-secondary, #475569);
}

/* ── Status Badges ───────────────────────────────────────────────── */
.fl-status-active[b-msp05n0x1s] {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    background: rgba(34, 197, 94, 0.15);
    color: var(--fl-color-green, #16A34A);
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.8rem;
}

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

/* ── Save / Cancel Buttons — matches Products exactly ───────────── */
.fl-cancel-btn[b-msp05n0x1s] {
    font-weight: 600;
    height: 38px;
    min-width: 90px;
}

.fl-save-btn[b-msp05n0x1s] {
    font-weight: 700;
    height: 38px;
    min-width: 160px;
}

/* ── Loading & Alert ─────────────────────────────────────────────── */
.fl-loading-state[b-msp05n0x1s] {
    text-align: center;
    padding: 4rem 1rem;
}

.fl-loading-text[b-msp05n0x1s] {
    color: var(--fl-text-secondary, #64748B);
}



/* ── Sticky Sidebar & Live Preview Card (Matches Products) ────────── */
.fl-sticky-sidebar[b-msp05n0x1s] {
    position: sticky;
    top: calc(var(--fl-topbar-h, 72px) + 1.5rem);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.fl-preview-card[b-msp05n0x1s] {
    border-top: 3px solid var(--fl-color-blue, #1565FF);
}

.fl-preview-badge[b-msp05n0x1s] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.2rem 0.55rem;
    border-radius: 99px;
    background: rgba(37, 99, 235, 0.12);
    color: var(--fl-color-blue, #1565FF);
    border: 1px solid rgba(37, 99, 235, 0.25);
}

.fl-preview-hero[b-msp05n0x1s] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--fl-border, #E2E8F0);
    margin-bottom: 1.25rem;
}

.fl-preview-avatar[b-msp05n0x1s] {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1565FF, #23A8FF);
    color: #FFFFFF;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(21, 101, 255, 0.25);
}

.fl-avatar-wood[b-msp05n0x1s] {
    background: linear-gradient(135deg, #D97706, #F59E0B);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25);
}

.fl-preview-info[b-msp05n0x1s] {
    min-width: 0;
    flex: 1;
}

.fl-preview-name[b-msp05n0x1s] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--fl-text-primary, #0F172A);
    margin: 0 0 0.4rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fl-preview-meta[b-msp05n0x1s] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.fl-pill-badge[b-msp05n0x1s] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
}

.fl-pill-cat[b-msp05n0x1s] {
    background: rgba(217, 119, 6, 0.12);
    color: #D97706;
}

.fl-status-indicator[b-msp05n0x1s] {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 99px;
}

.fl-preview-details-list[b-msp05n0x1s] {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.fl-preview-item[b-msp05n0x1s] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.fl-preview-icon[b-msp05n0x1s] {
    font-size: 1.05rem;
    color: var(--fl-color-blue, #1565FF);
    margin-top: 0.1rem;
    width: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fl-preview-item-content[b-msp05n0x1s] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fl-preview-label[b-msp05n0x1s] {
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--fl-text-secondary, #64748B);
}

.fl-preview-val[b-msp05n0x1s] {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--fl-text-primary, #0F172A);
    word-break: break-word;
}

.fl-desc-clamp[b-msp05n0x1s] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Tips Card ───────────────────────────────────────────────────── */
.fl-tips-card[b-msp05n0x1s] {
    background: linear-gradient(135deg, rgba(21, 101, 255, 0.04), rgba(35, 168, 255, 0.02));
    border: 1px solid rgba(21, 101, 255, 0.15);
}

.fl-tips-title[b-msp05n0x1s] {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--fl-text-primary, #0F172A);
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.fl-tips-list[b-msp05n0x1s] {
    margin: 0;
    padding-left: 1.2rem;
    font-size: 0.84rem;
    color: var(--fl-text-secondary, #64748B);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* ── Mobile / Responsive ─────────────────────────────────────────── */
@media (max-width: 992px) {
    .fl-sticky-sidebar[b-msp05n0x1s] {
        position: static;
        margin-top: 1rem;
    }
}

@media (max-width: 768px) {
    .fl-user-page-container[b-msp05n0x1s] {
        padding: 0.75rem 0.5rem;
    }

    .fl-header-title-bar[b-msp05n0x1s] {
        flex-direction: column;
        align-items: flex-start;
    }

    .fl-header-title-bar .fl-page-title[b-msp05n0x1s] {
        font-size: 1.35rem;
    }

    .fl-header-actions[b-msp05n0x1s] {
        width: 100%;
        flex-wrap: wrap;
    }

    .fl-header-actions .e-btn[b-msp05n0x1s] {
        flex: 1 1 auto;
        min-width: 0;
        text-align: center;
        justify-content: center;
    }

    .fl-card[b-msp05n0x1s] {
        border-radius: 10px;
        margin-bottom: 1rem;
    }

    .fl-card-header[b-msp05n0x1s] {
        padding: 0.85rem 1rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .fl-card-body[b-msp05n0x1s] {
        padding: 1rem 0.75rem;
    }

    .fl-card-footer[b-msp05n0x1s] {
        padding: 1rem 0.75rem;
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

    .fl-card-footer .e-btn[b-msp05n0x1s] {
        width: 100%;
        justify-content: center;
        min-width: 0;
        height: 42px;
    }

    .fl-cancel-btn[b-msp05n0x1s],
    .fl-save-btn[b-msp05n0x1s] {
        width: 100%;
        min-width: 0;
        height: 42px;
    }
}

@media (max-width: 480px) {
    .fl-user-page-container[b-msp05n0x1s] {
        padding: 0.5rem 0.4rem;
    }
}
/* /Components/Pages/Users/UserDetail.razor.rz.scp.css */
.fl-user-page-container[b-hx25eu0gti] {
    padding: 1.5rem;
    max-width: 1300px;
    margin: 0 auto;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

.fl-page-header[b-hx25eu0gti] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
    min-width: 0;
}

.breadcrumb-trail[b-hx25eu0gti] {
    margin-bottom: 0.5rem;
}

.breadcrumb-link[b-hx25eu0gti] {
    color: var(--fl-text-secondary, #64748B);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    transition: color 0.15s ease;
}

.breadcrumb-link:hover[b-hx25eu0gti] {
    color: var(--fl-color-blue, #1565FF);
}

.fl-page-title[b-hx25eu0gti] {
    font-family: var(--fl-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--fl-text-primary, #0F172A);
    line-height: 1.25;
    word-break: break-word;
}

.fl-page-subtitle[b-hx25eu0gti] {
    font-size: 0.9rem;
    color: var(--fl-text-secondary, #64748B);
    margin-top: 0.25rem;
}

.fl-code-text[b-hx25eu0gti] {
    color: var(--fl-color-blue, #1565FF);
}

.fl-edit-btn[b-hx25eu0gti] {
    font-weight: 700;
}

/* ── Sticky Sidebar for User Profile & Roles ──────────────────────── */
.fl-sticky-sidebar[b-hx25eu0gti] {
    position: -webkit-sticky;
    position: sticky;
    top: 1.5rem;
    z-index: 10;
}

@media (max-width: 991.98px) {
    .fl-sticky-sidebar[b-hx25eu0gti] {
        position: static;
        top: auto;
    }
}

/* ── Interactive FL Cards ────────────────────────────────────────── */
.fl-card[b-hx25eu0gti] {
    background: var(--fl-bg-surface, #FFFFFF);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--fl-border, #E2E8F0);
    overflow: hidden;
    max-width: 100%;
    min-width: 0;
    transition: transform 180ms ease, box-shadow 180ms ease;
    margin-bottom: 1.5rem;
}

.fl-card:hover[b-hx25eu0gti] {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.fl-highlight-card-top[b-hx25eu0gti] {
    border-top: 3px solid var(--fl-color-blue, #1565FF);
}

.fl-card-header[b-hx25eu0gti] {
    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[b-hx25eu0gti] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Icon highlight box — with high contrast in light & dark themes ── */
.fl-hl-icon[b-hx25eu0gti] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.fl-hl-icon .e-icons[b-hx25eu0gti] {
    font-size: 1.15rem;
    line-height: 1;
    display: inline-block;
}

.fl-hl-bg--blue[b-hx25eu0gti] {
    background: rgba(37, 99, 235, 0.12);
    color: var(--fl-color-blue, #1565FF);
}

.fl-hl-bg--teal[b-hx25eu0gti] {
    background: rgba(13, 148, 136, 0.12);
    color: var(--fl-color-teal, #0D9488);
}

.fl-hl-bg--green[b-hx25eu0gti] {
    background: rgba(34, 197, 94, 0.12);
    color: var(--fl-color-green, #16A34A);
}

.fl-hl-bg--amber[b-hx25eu0gti] {
    background: rgba(245, 158, 11, 0.12);
    color: var(--fl-color-amber, #D97706);
}

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

.fl-card-body[b-hx25eu0gti] {
    padding: 1.25rem;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* ── Spec Information Rows ───────────────────────────────────────── */
.fl-info-row[b-hx25eu0gti] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--fl-border-soft, #EEF2F7);
    font-size: 0.92rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fl-info-row:last-child[b-hx25eu0gti] {
    border-bottom: none;
}

.fl-info-label[b-hx25eu0gti] {
    color: var(--fl-text-secondary, #64748B);
    font-weight: 500;
}

.fl-info-val[b-hx25eu0gti] {
    color: var(--fl-text-primary, #0F172A);
    text-align: right;
    font-weight: 600;
}

.fl-code-badge[b-hx25eu0gti] {
    background: rgba(21, 101, 255, 0.12);
    color: var(--fl-color-blue, #1565FF);
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 700;
    border: 1px solid rgba(21, 101, 255, 0.25);
}

.fl-status-active[b-hx25eu0gti] {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    background: rgba(34, 197, 94, 0.15);
    color: var(--fl-color-green, #16A34A);
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.8rem;
}

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

.fl-role-pill[b-hx25eu0gti] {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    background: rgba(37, 99, 235, 0.12);
    color: var(--fl-color-blue, #1565FF);
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.82rem;
    border: 1px solid rgba(37, 99, 235, 0.25);
}

.fl-role-desc-text[b-hx25eu0gti] {
    color: var(--fl-text-secondary, #64748B);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.fl-company-table[b-hx25eu0gti] {
    width: 100%;
    border-collapse: collapse;
}

.fl-company-table th[b-hx25eu0gti] {
    color: var(--fl-text-secondary, #64748B);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--fl-border, #E2E8F0);
}

.fl-company-table td[b-hx25eu0gti] {
    padding: 0.75rem;
    color: var(--fl-text-primary, #0F172A);
    font-size: 0.88rem;
    border-bottom: 1px solid var(--fl-border-soft, #EEF2F7);
}

.fl-company-table tr:last-child td[b-hx25eu0gti] {
    border-bottom: none;
}

.fl-default-badge[b-hx25eu0gti] {
    background: rgba(245, 158, 11, 0.15);
    color: var(--fl-color-amber, #D97706);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.fl-loading-state[b-hx25eu0gti],
.fl-empty-state[b-hx25eu0gti] {
    text-align: center;
    padding: 4rem 1rem;
}

.fl-empty-icon-wrap[b-hx25eu0gti] {
    margin-bottom: 1rem;
}

.fl-empty-title[b-hx25eu0gti] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fl-text-primary, #0F172A);
    margin-bottom: 0.35rem;
}

.fl-empty-sub[b-hx25eu0gti],
.fl-loading-text[b-hx25eu0gti] {
    color: var(--fl-text-secondary, #64748B);
    font-size: 0.9rem;
}



.fl-delete-dialog-body[b-hx25eu0gti] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 0;
}

.fl-delete-icon-box[b-hx25eu0gti] {
    font-size: 2rem;
    color: var(--fl-color-amber, #D97706);
}

.fl-delete-title[b-hx25eu0gti] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--fl-text-primary, #0F172A);
    margin-bottom: 0.5rem;
}

.fl-delete-item-desc[b-hx25eu0gti] {
    color: var(--fl-text-primary, #0F172A);
    margin-bottom: 0.5rem;
}

.fl-delete-note[b-hx25eu0gti] {
    color: var(--fl-text-muted, #64748B);
    font-size: 0.8rem;
    display: block;
    line-height: 1.4;
}

/* ── Mobile/Responsive Media Queries ────────────────────────────── */
@media (max-width: 768px) {
    .fl-user-page-container[b-hx25eu0gti] {
        padding: 0.75rem 0.5rem;
    }

    .fl-page-header[b-hx25eu0gti] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .fl-header-actions[b-hx25eu0gti] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        width: 100%;
    }

    .fl-header-actions .e-btn[b-hx25eu0gti] {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
    }

    .fl-page-title[b-hx25eu0gti] {
        font-size: 1.35rem;
    }

    .fl-card[b-hx25eu0gti] {
        border-radius: 10px;
        margin-bottom: 1rem;
    }

    .fl-card-header[b-hx25eu0gti] {
        padding: 0.85rem 1rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .fl-card-body[b-hx25eu0gti] {
        padding: 1rem 0.75rem;
    }

    .fl-info-row[b-hx25eu0gti] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .fl-info-val[b-hx25eu0gti] {
        text-align: left;
    }

    .fl-company-table th[b-hx25eu0gti],
    .fl-company-table td[b-hx25eu0gti] {
        padding: 0.5rem 0.4rem;
        font-size: 0.82rem;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .fl-code-badge[b-hx25eu0gti] {
        font-size: 0.75rem;
        padding: 2px 5px;
    }
}

@media (max-width: 480px) {
    .fl-user-page-container[b-hx25eu0gti] {
        padding: 0.5rem 0.4rem;
    }
}
/* /Components/Pages/Users/UsersList.razor.rz.scp.css */
/* ── Page Container ──────────────────────────────────────────────── */
.fl-users-container[b-jdk2uzrl4i] {
    padding: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

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

.fl-page-title[b-jdk2uzrl4i] {
    font-family: var(--fl-font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--fl-text-primary, #0F172A);
    margin-bottom: 0.25rem;
    line-height: 1.25;
}

.fl-page-subtitle[b-jdk2uzrl4i] {
    font-size: 0.9rem;
    color: var(--fl-text-secondary, #64748B);
    margin-bottom: 0;
}

.fl-add-btn[b-jdk2uzrl4i] {
    font-weight: 700;
    height: 38px;
}

/* ── Interactive FL Cards ────────────────────────────────────────── */
.fl-card[b-jdk2uzrl4i] {
    background: var(--fl-bg-surface, #FFFFFF);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--fl-border, #E2E8F0);
    margin-bottom: 1.25rem;
    overflow: hidden;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.fl-toolbar-card[b-jdk2uzrl4i] {
    padding: 1rem 1.25rem;
}

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

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

.fl-grid-card[b-jdk2uzrl4i] {
    padding: 1.25rem;
    overflow-x: hidden !important;
}


/* ── Refresh button ──────────────────────────────────────────────── */
.fl-refresh-btn[b-jdk2uzrl4i] {
    font-weight: 600;
    height: 38px;
    white-space: nowrap;
}

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .fl-users-container[b-jdk2uzrl4i] {
        padding: 1rem 0.75rem;
    }

    .fl-page-header[b-jdk2uzrl4i] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .fl-page-header .fl-header-actions[b-jdk2uzrl4i] {
        width: 100%;
    }

    .fl-grid-card[b-jdk2uzrl4i] {
        padding: 0.75rem;
    }
}

@media (max-width: 480px) {
    .fl-users-container[b-jdk2uzrl4i] {
        padding: 0.75rem 0.5rem;
    }
}

/* ── Table Typography & Links ────────────────────────────────────── */
.fl-code-link[b-jdk2uzrl4i] {
    font-weight: 700;
    color: var(--fl-color-blue, #1565FF);
    text-decoration: none;
    font-size: 0.92rem;
    transition: color 0.15s ease;
}

.fl-code-link:hover[b-jdk2uzrl4i] {
    color: #3B82F6;
    text-decoration: underline;
}

/* ── User Avatar Cell ────────────────────────────────────────────── */
.fl-user-cell[b-jdk2uzrl4i] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.fl-user-avatar[b-jdk2uzrl4i] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1565FF 0%, #0052CC 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(21, 101, 255, 0.35);
}

.fl-user-info[b-jdk2uzrl4i] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fl-user-email[b-jdk2uzrl4i] {
    color: var(--fl-text-secondary, #64748B);
    font-size: 0.8rem;
    overflow-wrap: break-word;
    word-break: break-all;
}

/* ── Pill / Badge Styles ─────────────────────────────────────────── */
.fl-cat-pill[b-jdk2uzrl4i] {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    background: var(--fl-bg-surface-2, #F1F5F9);
    color: var(--fl-text-primary, #0F172A);
    border: 1px solid var(--fl-border, #E2E8F0);
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 500;
}

.fl-date-text[b-jdk2uzrl4i] {
    color: var(--fl-text-secondary, #64748B);
    font-size: 0.88rem;
}

.fl-status-active[b-jdk2uzrl4i] {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    background: rgba(34, 197, 94, 0.15);
    color: var(--fl-color-green, #16A34A);
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.8rem;
}

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

.fl-action-btns[b-jdk2uzrl4i] {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
}

.fl-text-muted[b-jdk2uzrl4i] {
    color: var(--fl-text-muted, #64748B);
}

/* ── Empty & Loading States ──────────────────────────────────────── */
.fl-empty-state[b-jdk2uzrl4i],
.fl-loading-state[b-jdk2uzrl4i] {
    text-align: center;
    padding: 4rem 1rem;
}

.fl-empty-icon-wrap[b-jdk2uzrl4i] {
    margin-bottom: 1rem;
}

.fl-empty-folder-icon[b-jdk2uzrl4i] {
    color: var(--fl-text-muted, #64748B);
}

.fl-empty-title[b-jdk2uzrl4i] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fl-text-primary, #FFFFFF);
    margin-bottom: 0.35rem;
}

.fl-empty-sub[b-jdk2uzrl4i],
.fl-loading-text[b-jdk2uzrl4i] {
    color: var(--fl-text-secondary, #94A3B8);
    font-size: 0.9rem;
}

/* ── Delete Dialog ───────────────────────────────────────────────── */
.fl-delete-dialog-body[b-jdk2uzrl4i] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 0;
}

.fl-delete-icon-box[b-jdk2uzrl4i] {
    font-size: 2rem;
    color: var(--fl-color-amber, #F59E0B);
    line-height: 1;
}

.fl-delete-title[b-jdk2uzrl4i] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--fl-text-primary, #FFFFFF);
    margin-bottom: 0.35rem;
}

.fl-delete-item-desc[b-jdk2uzrl4i] {
    color: var(--fl-text-secondary, #94A3B8);
    margin-bottom: 0.5rem;
}

.fl-delete-note[b-jdk2uzrl4i] {
    color: var(--fl-text-muted, #64748B);
    display: block;
    line-height: 1.4;
}



/* ── Custom Pager ────────────────────────────────────────────────── */
.fl-custom-pager[b-jdk2uzrl4i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 0.5rem;
    border-top: 1px solid var(--fl-border, #1C2D4A);
    flex-wrap: wrap;
    gap: 1rem;
}

.fl-pager-meta-group[b-jdk2uzrl4i] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.fl-pager-sizer[b-jdk2uzrl4i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fl-pager-label[b-jdk2uzrl4i] {
    color: var(--fl-text-secondary, #94A3B8);
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

.fl-pager-info[b-jdk2uzrl4i] {
    color: var(--fl-text-secondary, #94A3B8);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.fl-pager-nav-wrap[b-jdk2uzrl4i] {
    display: flex;
    align-items: center;
}

.fl-pager-nav[b-jdk2uzrl4i] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.fl-pager-nav-btn[b-jdk2uzrl4i] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--fl-border, #1C2D4A);
    background: var(--fl-bg-surface-2, #142037);
    color: var(--fl-text-primary, #E2E8F0);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.fl-pager-nav-btn svg[b-jdk2uzrl4i] {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fl-pager-nav-btn:hover:not(.disabled)[b-jdk2uzrl4i] {
    background: #1E2D4A;
    border-color: #2D4370;
    color: #FFFFFF;
}

.fl-pager-nav-btn.disabled[b-jdk2uzrl4i],
.fl-pager-nav-btn:disabled[b-jdk2uzrl4i] {
    opacity: 0.35;
    cursor: not-allowed;
    background: var(--fl-bg-app, #0A1329);
    border-color: var(--fl-border-soft, #152035);
}

/* ── Syncfusion Pager Dark Theme (matches Products exactly) ──────── */
[b-jdk2uzrl4i] .e-gridpager,
[b-jdk2uzrl4i] .e-pager {
    background-color: var(--fl-bg-surface, #0F1B32) !important;
    border-top: 1px solid var(--fl-border, #1C2D4A) !important;
    color: var(--fl-text-secondary, #94A3B8) !important;
    padding: 0.75rem 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

[b-jdk2uzrl4i] .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;
}

[b-jdk2uzrl4i] .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;
}

[b-jdk2uzrl4i] .e-pager .e-numericitem,
[b-jdk2uzrl4i] .e-pager a.e-link,
[b-jdk2uzrl4i] .e-pager .e-firstpage,
[b-jdk2uzrl4i] .e-pager .e-prevpage,
[b-jdk2uzrl4i] .e-pager .e-nextpage,
[b-jdk2uzrl4i] .e-pager .e-lastpage,
[b-jdk2uzrl4i] .e-pager .e-pager-default,
[b-jdk2uzrl4i] .e-pager .e-spacing {
    background-color: var(--fl-bg-surface-2, #142037) !important;
    color: var(--fl-text-primary, #E2E8F0) !important;
    border: 1px solid var(--fl-border, #1C2D4A) !important;
    border-radius: 6px !important;
    min-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;
}

[b-jdk2uzrl4i] .e-pager .e-numericitem:hover:not(.e-currentitem),
[b-jdk2uzrl4i] .e-pager a.e-link:hover:not(.e-currentitem),
[b-jdk2uzrl4i] .e-pager .e-firstpage:hover:not(.e-disable):not(.e-firstpagedisabled),
[b-jdk2uzrl4i] .e-pager .e-prevpage:hover:not(.e-disable):not(.e-prevpagedisabled),
[b-jdk2uzrl4i] .e-pager .e-nextpage:hover:not(.e-disable):not(.e-nextpagedisabled),
[b-jdk2uzrl4i] .e-pager .e-lastpage:hover:not(.e-disable):not(.e-lastpagedisabled) {
    background-color: #1E2D4A !important;
    color: #FFFFFF !important;
    border-color: #2D4370 !important;
}

[b-jdk2uzrl4i] .e-pager .e-currentitem,
[b-jdk2uzrl4i] .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;
}

[b-jdk2uzrl4i] .e-pager .e-icons {
    color: var(--fl-text-secondary, #94A3B8) !important;
    font-size: 12px !important;
}

[b-jdk2uzrl4i] .e-pager .e-firstpagedisabled,
[b-jdk2uzrl4i] .e-pager .e-prevpagedisabled,
[b-jdk2uzrl4i] .e-pager .e-nextpagedisabled,
[b-jdk2uzrl4i] .e-pager .e-lastpagedisabled,
[b-jdk2uzrl4i] .e-pager .e-disable {
    background-color: var(--fl-bg-app, #0A1329) !important;
    border-color: var(--fl-border-soft, #152035) !important;
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

[b-jdk2uzrl4i] .e-pager .e-firstpagedisabled .e-icons,
[b-jdk2uzrl4i] .e-pager .e-prevpagedisabled .e-icons,
[b-jdk2uzrl4i] .e-pager .e-nextpagedisabled .e-icons,
[b-jdk2uzrl4i] .e-pager .e-lastpagedisabled .e-icons {
    color: #475569 !important;
}

[b-jdk2uzrl4i] .e-pager .e-pagesizes .e-input-group {
    background-color: var(--fl-bg-app, #0A1329) !important;
    border: 1px solid var(--fl-border, #1C2D4A) !important;
    border-radius: 6px !important;
    height: 32px !important;
    color: var(--fl-text-primary, #E2E8F0) !important;
}

[b-jdk2uzrl4i] .e-pager .e-pagesizes .e-input {
    color: var(--fl-text-primary, #E2E8F0) !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
}

[b-jdk2uzrl4i] .e-pager .e-parentmsgbar {
    color: var(--fl-text-secondary, #94A3B8) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
}